|
CSS - Visible Hidden Vs. True False
Why on earth is visibility: hidden; not visible: false;
?? Not only do I have to worry about spelling visibility right and getting all the i's in the right spots, it make javascript that much harder. I have to pass object around rather than flipping a switch. It makes no logical sense IMO to have strings when you would have simply had a bool. Is it for future? Are they going to add 'transparent' and 'slightly visible'? Hopefully something else hard to spell like 'squirrel' CJB Similar TutorialsHello all. I want to hide everything in a div with a particular id except for a specific tag. In other words, I want to be able to do the following: Code:
<style type="text/css">
#outer { display: none; }
#outer p { display: block; }
</style>
<div id="outer">
<p>This is text. </p>
<h1>This is more text. </h1>
</div>
Where "This is text. " would appear but "This is more text. " would not appear? Is this possible? I understand the inheritance that #outer p is getting the display: none property from the parent but does not mean I cannot override it? Hi, Why doesn't my vertical nav display in IE? http://www.sabahseaside.com/sti/testindex.php Code: <div id="wrap"> <?php include 'banner.php'; ?> <div id="right"> <div class="prop"></div> <div id="menu"> <ul id="navmenu"> <li><a href="facilities.php">Facilities</a></li> <li><a href="otherinfo.php">Map & Info</a></li> <li><a href="tours.php">Tours</a></li> <li><a href="otherprops.php">Other Properties</a></li> <li><a href="links.php">Links</a></li> <li id="bottom"><a href="contact.php">Contact</a></li> </ul> </div> <div class="clear"></div> </div> <div id="main"> http://www.sabahseaside.com/sti/layout.css I'll admit right off - I don't know much about CSS. I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message. I know my viewers are going to be using IE 6.1. I've looked through here and on google for it, and I think I'm just looking in the wrong place. Thanks. i thought this was perfect example so i used it http://www.positioniseverything.net...example/rounded if you look at this it seems as if all boxes stretch so there is no big empty spaces on the page but however if the left purple block numbered 6, is larger then the small ones....there is gonna be a empty space under block 4 and 5...where block 6 extends to meet block 8, number 4 and 5 stay small aint that a weird layout if that happens? (i could make a picture if you wanna see how it looks) please tell me what you think....i did a lot of work for where i use this in and now it just looks weird, or is it just me? Hi, On the page http://simplyfocusing.net/LitSoc/ I have been trying to get CSS rollovers working. I use code similar to this For CSS Code: .nav {
width:172px;
height:32px;
}
td#nhome {
background-image:url(nav-home.gif);
background-repeat:no-repeat;
cursor:pointer;
}
td#nhome img {
visibility:hidden;
}
td#nhome:hover img {
visibility:visible;
}
For HTML Code: <td id="nhome" class="nav"><a href="index.htm"><img src="index_files/nav-home-over.gif" alt="" /></a></td> But the rollovers arent exactly working with IE. Works perfectly in FireFox 1. Also there seems to be some problem with the top right corner in IE. I can correct it by setting height to 0px in .shadowtopcorn but then it screws up FireFox. Any suggestions on what I should do? Thanks a lot Hi, I am pulling my hair out why the images are not visible on this page http://www.zahnarzt-oberland.de/Gmunden/Inhalte/test.htm It is based on this CSS gallery: http://www.cssplay.co.uk/menu/slide_show.html thank you in advance Raggi I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail: Code: div.headleft {
text-align: right;
width: 100%;
}
div.headleft a:link {
display: none;
}
div.headleft a:visited {
display: none;
}
div.headleft a:hover {
display: block;
background: inherit;
color: #ff0000;
}
div.headleft a:active {
display: none;
}
I have tried a few variations to the above snippet of code and am at my wits end... My gratitude ahead of time... Hi, I am using following css to apply vertical scrollbars in some tables: "clear: both; /*overflow: auto;*/ overflow-x: hidden; overflow-y: auto; height: 164px; padding-left: 0px; /*changed_v5*/ padding-top: 0px; /*changed_v5*/ width: 100%; border-bottom: 1px solid #A5B9D1; scrollbar-base-color: #EAEEF4; scrollbar-arrow-color: #506286; scrollbar-DarkShadow-Color: #506286; vertical-align: top;" it seem to be working absolutely fine in IE,safari and firefox but not in Netscape. Can anyone help me regarding this??? Is there any single style which cud work all the 3 browsers mentioned above Hello, I'm learning CSS and need some help in solving a simple issue. I have a basic set of 6 thumbnails and I would like a drop shadow background image for each (just experimenting with bckgr images; I know this can be done with CSS). Code:
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #bbb;
}
.wrapper {
height: 400px;
width: 744px;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
background-image: url(images/glowBg.jpg);
background-repeat: no-repeat;
}
.imageHolder {
height: 400px;
width: 600px;
margin-right: auto;
margin-left: auto;
background-image: url(images/galleryBg.jpg);
background-repeat: repeat;
}
.imageHolder img {
border: 1px solid #999;
margin-top: 50px;
margin-right: 45px;
margin-left: 45px;
background-image: url(drop.gif);
background-repeat: no-repeat;
margin-bottom: 30px;
}
.imageHolder img:hover {
border: 1px solid #F00;
margin-top: 50px;
margin-right: 45px;
margin-left: 45px;
margin-bottom: 30px;
background-image: url(drop.gif);
background-repeat: no-repeat;
}
-->
</style></head>
<body>
<div class="wrapper">
<div class="imageHolder"><img src="images/gallery/1th.jpg" width="100" height="100" /><img src="images/gallery/2th.jpg" width="100" height="100" /><img src="images/gallery/3th.jpg" width="100" height="100" /><img src="images/gallery/4th.jpg" width="100" height="100" /><img src="images/gallery/5th.jpg" width="100" height="100" /><img src="images/gallery/6th.jpg" width="100" height="100" /></div>
</div>
</body>
</html>
My problem is that drop.gif for the img tags is not showing up. It is in the same directory as the .html. If you go to http://mydomain/drop.gif it appears, and if you use it for background image of .imageHolder it appears as well so the image/path isn't messed up. I'm beating my head against the wall to get this little thing working. Please help! =D How would I align a div to the true bottom (by this i mean below the viewport. at current i use: Code:
.footer
{
background-color:#FFFFFF;
width:100%;
height:20px;
color:#000000;
position:absolute;
bottom:0px;
}
but this just aligns my div to the bottom of my window, not the bottom of the page, if i then need to scroll down it is visible that its not at the bottom of the page. any ideas? i have a div that has a background img. when i have p's within this div the background img only shows up if theres a line of text there. i specified the height: 277px to fix this (if theres a better way, pls let me know). and tried to put overflow:visible within p's but its still clipping. any ideas? containing div: Code: #content .col {
width: 303px;
height: 277px;
background: url(../images/one_third_box_top.png) no-repeat;
float: left;
}
p: Code: #content p, ul {
padding: 0 25px 0 30px;
line-height: 1.5em;
overflow: visible;
}
edit: this problem is in mozilla, but not in IE... weird. theres also one minor thing on a totally different subject. paths.. my paths a Code: /pub /css main.css /images foo.jpg foo2.jpg index.html obviously i have a link to the main.css in the index file but when i try to use url(images/foo.jpg), foo.jpg wont load? the path looks right unless im missing something... instead i have to url(../images/foo.jpg) for it to work... i always thought the '../' meant parent directory of the file (which is index.html since its linked from it)... right? thanks in advance. I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div: Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? Hey guys, I built a site that uses a linked list as an multi-level menu. This menu works fine in Moz/Netscape, but I have to use IE behaviours (thus JavaScript) for it to work in IE. Because this is a list I've contained it in a div with overflow: auto. And set a new external css file using JavaScript to convert that list into the multi-level menu. The problem is the menu's horizontal submenus appears within the parent div, rather than overflowing above the parent. I was able to fix this problem using a z-index and overflow: visible in IE. However, in Gecko based browsers the menu's submenu's links aren't accessible over the site content also contained in an overflow: auto div. But, as said works fine in IE. Here is the site. To test this bizare functionality manipulate the #contentArea and #navArea properties in this css file. You will notice that there is a DHTML custom scrollbar if JS is enabled, this is because the only way I could get the submenu's to be accessible above the content in Gecko is to make the div overflow: hidden. Myself, and the developer of the orginal menu, have been working on this for weeks (well, more me) and haven't determined how to make the menu accessible while mantaining overflow: auto on the #contentArea div. Just today we had some limited success changing the #navArea position to fixed rather than absolute in Gecko. After some repositioning the menu was fully accessible at medium/100% text size. But, once the site was resized using font sizes (it uses a relative font size 'em' for an elastic layout) the fixed div wouldn't stay in position. I'm hoping that someone here is able to tell me how to set overflow: visible to overflow above an overflow:auto div in NS/Moz (I'm using FF0.8) and still work in IE? I'd greatly appreciate it because I want to replace the custom scrollbar with default scrollbars for accessibility. Thanx. dear all, is it possible, using css or otherwise, to have a div on my page remian visible even when the page is scrolled hoizontally and the div goes out of view. the div in question runs vertically down the left hand side of the page. there are javascript menus i have seen that do this (albeit usually when scrolling vertically), but i wonder if it can be done with css. many thanks, mark When I place my flash file in a html document I don't want the scroll bars visible, unless the window is resized smaller than the dimensions of the flash movie. I'm using this piece of code nicely to turn the scroll bars of the browser window off, but it dosn't turn them back on when needed. <STYLE TYPE="text/css"> BODY {overflow:hidden;} </STYLE> This link, http://www.one9ine.com/flash.html works the way I'm trying to work out. No scrollbars visible untill, the browser window is rezised smaller that the flash movie content. Cheers for the help. new at this - learning the rope. baby steps. is there a way to set a link target to open the link in another div on the page? http://www.students.niu.edu/~z162609/asme.html That is my website. As you can see on the left the link box changes with the actual text in the main box. The text goes down as the text on the main content box gets bigger. I am very new to CSS and really do not know anything. I am fairly sure this is a one line fix. However, I really need this and would appreciate any help. Code:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}
Hi everybody, This may actually be a very easy thing to do with CSS, but with me being a newbie who learned what CSS stands for 2 days ago, it's become a huge headache. I've tried googling and looking at some sample code but all my attempts have failed. This is pretty much my last hope. Please help! Basically, I've been trying to place two different background images at two different specific locations, one of them at left-center, and the other one at right-center. I also need them to be able to move/slide as the user scrolls up and down so that they remain visible at all times. What I have at the moment is a single background image positioned at left-center, and it does not slide. My current code looks like this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="description" content="Welcome to my personal website.">
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#000000" text="333366" scroll="yes" style="background-image: url('devbg-left.jpg'); background-repeat: no-repeat; background-position: left center">
<div align="center"></div>
</body>
</html>
What I desperately need is one more image placed on the right side, and both of them to be able to slide. I would appreciate all kinds of help. Thank you so much. All the best, Yucel I am having trouble with the overflow: hidden; in IE6. I have a simple example. I have rewritten this to make it as simple as possible. [code] <html> <head> </head> <body> <div style="position:absolute; top: 100px; width:200px; z-index:1; bottom: 113px; overflow:hidden"> <img src="images/700/900-pixel-height-image.jpg"> </div> </body> </html> This simple page works fine in Firefox but in IE6 the overflow:hidden does not work. Why? I thought IE6 completely supported overflow. I have some hidden divs that on click they slide down under the link that was clicked. It works fine in firefox and ie, but in safari if you click it the first time it looks good, but when you click and close it and open it again the hidden div is off to the right i cant figure out why this is happening only in safari. this is the good one http://brendanperkinsDOTcom/ryangood.jpg this is the bad one http://brendanperkins.DOT/pic3.jpg this is the css im using Code:
/* Individual page divs (also in left column) */
.hidden-divs {
position: relative;
display: none;
width: 387px;
height: auto;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
font-size: 11px;
line-height: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
}
.hidden-divs a:link, .hidden-divs a:visited {
color: #4d4d4d;
font-size: 14px;
}
and this is my html for the nav and hidden divs Code:
<div id="main-nav">
<ul id="nav-higher" class="nav nav-higher">
<!-- HOME -->
<li><a class="trigger" rel="#header-6" onclick="return toggle_div('home-video', 'ryan_1');" href="#">Home</a></li>
<li><div id="home-video" class="hidden-divs">
<a href="readmore_home.htm" class="ceebox" rel="800 100 ajax">Why you are here</a>
</div>
</li>
<!-- MEET RYAN -->
<li><a class="trigger" rel="#header-5" onclick="return toggle_div('meet-ryan', 'ryan_2'); " href="#">Meet Ryan</a></li>
<li><div id="meet-ryan" class="hidden-divs">
<a href="readmore_meetryan.htm" class="ceebox" rel="800 220 ajax">BIO</a>
</div>
</li><!-- END OF MEET RYAN -->
<!-- PROGRAMS -->
<li><a class="trigger" rel="#header-4" onclick="return toggle_div('programs', 'ryan_3'); " href="#">Programs</a></li>
<li><div id="programs" class="hidden-divs">
<a href="readmore_programs.htm" class="ceebox" rel="800 400 ajax">Make Your Own Lunch™</a>
</div>
</li><!-- END OF PROGRAMS -->
<!-- BLOG -->
<li><a rel="external" href="http://makeyourownlunch.com/">Blog</a><br /></li><!-- END OF BLOG -->
<!-- REVIEWS -->
<li><a class="trigger" rel="#header-3" onclick="return toggle_div('reviews', 'ryan_4');" href="#">Reviews</a></li>
<li><div id="reviews" class="hidden-divs">
<div class="blurbwrap" id="review1">
<p class="blurb">“UH-MA-ZING!!! I laughed so hard that I think I sprouted a six-pack!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/Molly.jpg" alt="Review" />
<p class="img_id"><strong>Molly Somerville</strong><br />Idaho Business Professionals of America</p>
<div class="blurbwrap" id="review2">
<p class="blurb">“...In a nutshell Ryan blew those kids away”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/mell.jpg" alt="Review" />
<p class="img_id"><strong>Misty Elliott</strong><br />Michigan Association of Student Councils and Honor Societies</p>
<p><a onclick="return toggle_div2('review_section2');" href="#">more..</a></p>
<div id="review_section2" style="display: none;">
<div class="blurbwrap" id="review3">
<p class="blurb">“I cannot begin to tell you how much the students, the parents and the staff volunteers all LOVED Ryan and his message. It has been the most astounding feedback we have ever had about a speaker!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/my.jpg" alt="Review" />
<p class="img_id"><strong>Sara Gutowski</strong><br />Director of Programming, Michigan Youth Leadership</p>
<div class="blurbwrap" id="review4">
<p class="blurb">“I have never had anyone make that much of an impression of me in only an hour!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/loyalist.jpg" alt="Review" />
<p class="img_id"><strong>T.G.</strong><br />Loyalist College</p>
<div class="blurbwrap" id="review5">
<p class="blurb">“Ryan gives inspiration on how you can chase your dreams and make them real!”</p>
</div><!-- blurbwrap -->
<img class="review1-pic" src="images/ffa.jpg" alt="Review" />
<p class="img_id"><strong>M.W.</strong><br />Wisconsin FFA</p>
</div><!-- review section 2 -->
</div><!-- reviews -->
</li><!-- END OF REVIEWS -->
<!-- MEDIA -->
<li><a class="trigger" rel="#header-2" onclick="return toggle_div('media', 'ryan_5');" href="#">Media</a></li>
<li><div id="media" class="hidden-divs">
<h3>Client Resources<br /><br /></h3>
<p>Click <a href="html/av-checklist.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's A/V requirements and event checklist<br /><br /></p>
<p>Click <a href="html/speaker-intro.htm" class="ceebox" rel="800 380 ajax">here</a> for Ryan's speaker introduction<br /><br /></p>
<p>Click <a href="html/bio.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's bio (to be used in your program, website, blog, newspaper, magazines etc.)<br /><br /><br /></p>
<h3>Media Appearances<br /><br /></h3>
<p>Ryan on the radio If the player does not work, click <a href="pdf/Radio_Interview.mp3">here</a><br /><br /></p>
<p id="radio"><embed flashvars="valid_sample_rate=true&external_url=http://www.ryanspeaks.com/Radio_Interview.mp3" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" quality="high" src="http://www.odeo.com/flash/audio_player_standard_gray.swf"/><br /><br /></p>
<h3>Photo Gallery <br /></h3>
<p>Click images to enlarge..<br /><br /></p>
<p id="zip"><a href="images/images-download.zip">Click here to download images..</a></p>
<span><a href="images/ryan1_media.jpg" class="ceebox"><img src="images/ryan1_media_thumb.jpg" alt="Video Tag" /></a> </span>
<span><a href="images/ryan2_media.jpg" class="ceebox"><img src="images/ryan2_media_thumb.jpg" alt="Video Tag" /></a><br /><br /></span>
<span><a href="images/ryan3_media.jpg" class="ceebox"><img src="images/ryan3_media_thumb.jpg" alt="Video Tag" /></a> </span>
<span><a href="images/ryan4_media.jpg" class="ceebox"><img src="images/ryan4_media_thumb.jpg" alt="Video Tag" /></a></span>
</div>
</li><!-- END OF MEDIA -->
<!-- CONTACT -->
<li><a href="html/contact-form.php" class="trigger ceebox" rel="800 500 ajax" onclick="return toggle_div2('ryan_5');">Contact</a></li>
<li><a href="http://vimeo.com/1239140" rel="550 360" class="ceebox">Video</a></li><!-- END OF CONTACT -->
<!-- LOGO, FOOTER -->
<li>
<img id="main_logo" src="images/logo.png" alt="Ryan Speaks Logo" />
<div id="footer_content">
<form id="mailing_list" method="post" action="http://www.emailmeform.com/fid.php?formid=177854" enctype="multipart/form-data" accept-charset="UTF-8">
<p id="click_to_join">Click JOIN to receive Ryan's inspiring monthly newsletter</p>
<p><input type="text" name="FieldData0" value="" maxlength="100" size="30" /></p>
<p><input id="mailinglist_submit" type="submit" class="btn" value="Join" name="Submit" /></p>
</form>
<p>or email us at <a href="mailto:info@ryanspeaks.com"><strong>info@ryanspeaks.com</strong></a></p>
<p><a rel="external" href="http://www.facebook.com/ryanspeaks"><em>Facebook</em><!--<img src="images/facebook.gif" alt="Facebook" />--></a><em> .+ </em><a rel="external" href="http://twitter.com/lunch_buddy"><em>Twitter</em><!--<img src="images/twitter.png" alt="Twitter" />--></a></p>
<p>RyanSpeaks.com. All Rights Reserved.<a rel="external" href="http://designpilotonline.com"><strong>Website - Design Pilot</strong></a></p>
</div><!-- Footer Content -->
</li><!-- END OF LOGO FOOTER -->
</ul>
|
|||||||