|
CSS - Drop-down Nav And Z-index
Im converting a website to tabless layout and have used BonRouge Fixed 2 column layout to achive this. In the header div I have a drop-down css navigation. I had some problems with the drop downs displaying so I messed with some z-index and got it to work fine in Firefox...but of corse IE doesnt want to play nicely. It doesnt even display the drop down. So I come to Devshed for help.
Here is my messy CSS: Code:
img {
border: 0px none;
}
body {
background-color: #ffffff;
color: #000;
background-image: url('http://www.properties-abroad.net/images/bg.jpg');
margin:10px;
font-family: Verdana,sans-serif;
font-size:10px ;
padding: 0;
height: 100%;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
text-align: left;
}
#nav a {
display: block;
color: #fff;
font-family: verdana;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
#nav a:hover {
display: block;
color: #FFFF00;
font-family: verdana;
font-weight: bold;
}
#nav li{
float: left;
width: 120px;
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
}
#nav li ul{
position: absolute;
left: -999em;
width: 120px;
margin-top: 0px;
padding-top: 5px;
text-align: left;
z-index: 10;
}
#nav li ul li{
width: 120px;
text-align: left;
padding: 5px;
background:#A3B3DE;
z-index: 2;
}
#nav li ul li a{
width: 120px;
text-align: left;
color: #000;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#wrap {
width:780px;
margin:auto;
position:relative;
background: #ffffff;
}
#left {
float:left;
width:300px;
text-align:center;
background: #ffffff;
margin: 0;
border: 0;
}
#main {
position:relative;
margin: 0;
padding: 0;
margin-left: 300px;
background: #ffffff;
}
* html #main {
height:1px;
}
#navigation {
background: #ffffff;
padding: 0;
margin: 0;
}
#header {
padding:0;
margin: 0;
}
#clearfooter {
clear:both;
height: 30px;
overflow: hidden;
}
#footer {
height: 100px;
margin: 0;
color: #000;
text-align: center;
width: 780px;
margin: auto;
font-size: 10px;
background-image: url('images/div-foot.jpg');
background-position: bottom;
background-repeat: no-repeat;
}
And here is my cleaner HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Properties Abroad - Discount Self Catering Accommodation</TITLE> <link title="blue" href="stylediv.css" type="text/css" rel="STYLESHEET"> </head> <body> <center> <div id="wrap"> <div id="header"> <img src="images/div-head.jpg" alt="Discounted Holidays Abroad"></div> <div id="navigation"> <ul id="nav" style="background-image: url(navbg.jpg); width: 738px; height: 23px;"> <li style="padding-left: 10px; width: 120px;"><a href="index.html">Home Page</a> <ul> <li><a href="newsletter.html">Free Newsletter</a></li> <li><a href="corporate.html">Corporate Events</a></li> <li><a href="landing.html">Overseas Property Sales</a></li> <li><a href="advertise.html">Advertise with us</a></li> <li><a href="http://www.simply-global.com/" target=_blank>Website Design & Management</a></li> </ul> </li> <li><a href="prop.html">View Properties</a> <ul> <li><a href="spain.html">Costa Blanca, Spain</a></li> <li><a href="majorca.html">Alcudia, Majorca</a></li> <li><a href="tenerife.html">Tenerife</a></li> <li><a href="lanzarote.html">Lanzarote</a></li> <li><a href="landing.html">Homes Abroad</a></li> <li><a href="gallery.html">Photo Gallery</a></li> </ul> </li> <li><a href=index.html>Quick Searches</a> <ul> <li><a href="flightsearch.html">Flights</a></li> <li><a href="hotelsearch.html">Hotels</a></li> <li><a href="http://onlineautorentals.at/propertiesabroad" target=_blank>Car Hire</a></li> <li><a href="flighthotel.html">Flights + Hotel</a></li> <li><a href="http://www.skyscanner.net/" target=_blank>European Flights</a></li> <li><a href="http://www.activehotels.com/servlet/search/index.jsp?searchCode=EU&trkref=SGL" target=_blank>European Hotels</a></li> </ul> </li> <li><a href=beach.html>Beach Holidays</a> <ul> <li><a href="accommodation-alcudia.html">Belle Vue Complex</a></li> <li><a href="accommodation-sands.html">Sands Beach Villas</a></li> </ul> </li> <li><a href=villa.html>Villa Holidays</a> <ul> <li><a href="accommodation-spain.html">Luxury Townhouse - Sleeps 6</a></li> </ul> </li> <li><a href=golf.html>Golfing Holidays</a> <ul> <li><a href="golf-spain.html">Costa Blanca</a></li> <li><a href="golf-alcudia.html">Majorca</a></li> <li><a href="corporate.html">Cororate Events</a></li> </ul> </li> </ul> </div> <div id="left">Left</div> <div id="main">Main Content</div> <div id="clearfooter"></div> <div id="footer"> <center> <a href="index.html" title="Discounted Holidays Abroad">Discounted Holidays Abroad</a> | <a href="landing.html" title="Homes Abroad">Homes Abroad</a> | <a href="http://www.skyscanner.net/" title="Cheap European Flights" target=_blank>Cheap European Flights</a> | <a href="http://www.activehotels.com/servlet/search/index.jsp?searchCode=EU&trkref=SGL" title="Eurpoean Hotel Accommodation" target=_blank>Eurpoean Hotel Accommodation</a> | <a href="flightsearch.html" title="Cheap Flight Search">Cheap Flight Search</a> | <a href="hotelsearch.html" title="Cheap Hotel Search">Cheap Hotel Search</a> | <a href="http://onlineautorentals.at/propertiesabroad" title="Cheap Car Hire Search" target=_blank>Cheap Car Hire Search</a> | <a href="newsletter.html" title="Holiday Newsletter">Holiday Newsletter</a> | <a href="accommodation-spain.html" title="Costa Blanca Holiday">Costa Blanca Holiday</a> | <a href="accommodation-alcudia.html" title="Majorca Holiday">Majorca Holiday</a> | <a href="accommodation-tenerife.html" title="Tenerife Holiday">Tenerife Holiday</a> | <a href="accommodation-sands.html" title="Lazarote Holiday">Lazarote Holiday</a> | <a href="villa.html" title="Villa Holidays">Villa Holidays</a> | <a href="accommodation-alcudia.html" title="Apartment Holidays">Apartment Holidays</a> | <a href="accommodation-spain.html" title="Costa Blanca Villa Holidays">Costa Blanca Villa Holidays</a> | <a href="accommodation-alcudia.html" title="Alcudia, Majorca">Alcudia, Majorca</a> | <a href="accommodation-alcudia.html" title="Holidays in Majorca">Holidays in Majorca</a> | <a href="accommodation-alcudia.html" title="Holidays in Alcudia">Holidays in Alcudia</a> | <a href="accommodation-tenerife.html" title="Holidays in Tenerife">Holidays in Tenerife</a> | <a href="accommodation-sands.html" title="Holidays in Lanzarote">Holidays in Lanzarote</a> | <a href="accommodation-sands.html" title="Sands Beach Villa Holidays">Sands Beach Villa Holidays</a> | <a href="landing.html" title="Homes Abroad">Homes Abroad</a> | <a href="accommodation-spain.html" title="Beach Holidays in Spain">Beach Holidays in Spain</a> | <a href="accommodation-alcudia.html" title="Beach Holidays in Alcuida">Beach Holidays in Alcuida</a> | <a href="accommodation-sands.html" title="Beach Holidays in Lanzarote">Beach Holidays in Lanzarote</a> | <a href="golf-spain.html" title="Golfing Holidays in Costa Blanca">Golfing Holidays in Costa Blanca</a> | <a href="golf-alcudia.html" title="Golfing Holidays in Majorca">Golfing Holidays in Majorca</a> | <a href="corporate.html" title="Corporate Events">Corporate Events</a> <br><br> <a href=sitemap.html>Site Map</a> | <a href=linkpartners.php>Link Partners</a> | <a href="http://www.simply-global.com/privacy.php?comp=Properties Abroad.net" target=_blank>Privacy Policy</a> | <a href="http://www.simply-global.com/antispam.php?comp=Properties Abroad.net" target=_blank>Anti-Spam Policy</a></font><br> <font size=1>Developed by <a href=http://www.simply-global.com/ target=_blank title=Simply Global>Simply Global Group</a> </center> </div> </div> </center> </body> </html> Similar Tutorials--------This Part Solved!--------- Hi Guys! I have a CSS dropdown menu going on, and it's working semi-properly in Firefox, but is stuck behind the content div in IE6/7. I've tried using Z-index but either I'm altering the wrong tag or I'm way off in the wrong direction, as it ain't workin. Here is the page: http://www.whitecapgraphics.com/bates/front.php If you look at it in IE, there's actually no indication that it is dropping down at all, but I know it is as I moved the drop downs up a few pixels and I could see them dropping behind the div. PS - The Home button does not have a drop down menu. My CSS: Code:
#d1 {
background-color: #003366;
float: left;
width: 200px;
background-image: url(images/header_bg.gif);
background-repeat: repeat-x;
height: 107px;
}
#d2 {
background-color: #1F2935;
float: right;
width: 477px;
background-image: url(images/header_bg.gif);
}
#head_container {
background-color: #000066;
float: left;
background-image: url(images/header_bg.gif);
height: 107px;
}
#nav_container {
background-color: #1F2935;
float: left;
width: 100%;
background-image: url(images/nav_bar_bg.gif);
height: 30px;
}
#page_container {
margin: auto;
width: 99.99%;
height: 100%;
}
#content_container {
background-color: #e4e4e4;
float: left;
width: 100%;
background-image: url(images/content_blue_column_bg.gif);
background-repeat: repeat-y;
background-position: right;
}
#content {
background-color: #e4e4e4;
position: relative;
margin-right:253px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
padding-left: 10px;
padding-right: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
}
#right_column {
background-color: #CC9900;
float: right;
width: 253px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
/*____________________________________________________________*/
* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */
/* the horizontal menu starts here */
div#nav {
width:600px; /* sizes the nav div at a fixed width */
float:left;
background-color:#CCF; /* colors the div */
background-image: url(images/nav_bar_bg.gif);
z-index:10;
}
div#nav li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
border:1px solid black; /* creates dividing lines between the li elements */
font-family:Georgia, "Times New Roman", Times, serif;
font-size: medium;
font-weight: bold;
min-width: 126px;
text-align:center;
height:26px;
}
div#nav li:first-child {
border-left:1px solid; /*the first vertial line on the menu */
}
div#nav li:hover {
background-color:#D1C9B9; /*sets the background of the menu items */
}
div#nav a {
display:block;
padding:1px 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#D1C9B9; /* sets the type color */
}
div#nav a:hover {
color:black;
}
/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
margin:0;
z-index:20; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
left:-1px; /*aligns the drop exactly under the menu */
top:28px;
}
#pyt ul li {
background-color:#B3916B;
}
#h ul li {
background-color:#1F2935;
}
#ri ul li{
background-color: #827977;
}
#bn ul li{
background-color: #455D67;
}
div#nav ul li ul li {padding:0;
width:100%; /* makes the list items fill the list container (ul) */
border-left:1px solid; /* three sides of each drop-down item */
border-bottom:1px solid;
border-right:1px solid;
}
div#nav ul li ul li a {
padding:1px .5em;
font-size:small;
text-align:left;
vertical-align:middle;}
div#nav ul li ul li:first-child {
border-top:1px solid; /*the top edge of the dropdown */
}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}
/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
}
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html div#nav ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}
/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
@media all and (min-width: 0px){
body div#nav ul li ul {padding-bottom:22px;}
}
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */
#h {
background-color: #1F2935;
}
#ri {
background-color: #827977;
letter-spacing: -.06em;
}
body {
background-color: #1F2935;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#pyt {
background-color: #B3916B;
}
#bn {
background-color: #455D67;
}
#content #flash_map {
text-align: center;
border: 2px solid black;
width: 660px;
margin: auto;
}
--------****Still Need Help Here!----------- Unrelatedly, I'm also experiencing the following quirks that I'm not knowledgeable enough to work out quickly, so tips are aprpeciated: ****1) That menu bar is 26 pixels. Is there a way to vertically center the <a> inside the <li>? 2) The word-wrapped drop down options are extending outside of the menu - which of my styles is causing this? How can I solve it? *SOLVED* Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
ul#css3menu ul>li{
margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:left;}
ul#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu ul span{
background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#css3menu li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM Hello all, I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
Hi all, I've got a little request. Does anybody know how I could solve this issue: I want to have a menu hover on the left, and a menu hover at the top, while visitors can move the google map around in the background. I do this by setting my map div to z-index: -1, and it works good. Except it won't let people click on the map and move it around, even though there isn't a div ontop of it. http://pw.mmogm.com/0.0.5/frame.html The only other way I can think of it set the menu's to z-index: 1, but that would cause them to lag, and they're position would be fixed so when I "toggle" the menu, the top menu won't slide left. It's much nicer the first way, besides the clicking problem. http://pw.mmogm.com/0.0.5/frame2.html I greatly greatly any advice you might be able to shed on this issue. Thanks in advance if you can I have two elements. One has a z-index of 9999 and the other has 9000. Both elements are positioned. It is a modal popup window. When I open it, the element with a poistion of 9000 is on top of the one with 9999. I even checked to confirm that the z-index properties were the same once the popup completed. What could cause this? Having an issue with a drop down menu in firefox. I have a nav bar with drop down menus. Just below that is an embedded video. Everything works fine except for the drop down menu is behind the video on firefox. Looks fine in IE. I adjusted the z-index properties to make sure that the nav bar sits on top, but it still sits behind. ??? Is it a glitch of some sort? I have an object on my page with the following settings: Code:
#myEmail {
position:absolute;
left:400px;
top:50px;
z-index:2;
display:none;
}
and i have a video player in my form that looks like this: Code:
<object id="Player" height="400" style="border:solid 1px black; z-index:1;" width="500" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="<% =GetPlayerUrl() %>" />
<param name="autoPlay" value="true" />
</object>
Problem is, when the video starts to play, it moves to the top layer. What am i doing wrong? I am not sure why this is not working but I am trying to nest a div and overlay them. Code:
<style>
.txtImg {
posistion: relative;
z-index: 99;
height: 72px;
width: 100%;
background: url(../../images/roycity-gpl-01.png) no-repeat left;
}
.logo {
position: relative;
z-index: 1;
height: 72px;
width: 100%;
background: no-repeat right;
}
</style>
<div id="txt" class="txtImg" align="left">
<div id="bg-img" class="logo" align="right"></div>
</div>
Hi, I am trying to position a logo at the foot of http://www.root.lamtha2.co.uk/cssproblem/ If you look at the source it shows, <div id="footer" class="navTextBottom"> <br /> <!-- #BeginLibraryItem "/Library/bottom_nav_bar.lbi" --><a href="index.html">Home</a> | <a href="#">Terms & Conditions</a> | <a href="#">Links</a> | <a href="#">Contact Us</a><!-- #EndLibraryItem --><br /> <span class="copyrightText">Copyright Apex Verhicle Rentals 2006</span><br /> <div id="lamtha2logo"><a href="http://www.lamtha2.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lamtha2logo','','index_images/designed_by_l2_on.jpg',1)"><img src="index_images/designed_by_l2_off.jpg" alt="Lamtha2 Web Design" name="Lamtha2logo" width="89" height="29" border="0" id="Lamtha2logo" /></a> </div> <!-- end lamtha2logo --> </div> <!-- end footer --> Here is the css #footer { width:760px; font-size:12px; background-image: url(index_images/footer.gif); text-align: center; background-repeat: no-repeat; z-index: -2; } #lamtha2logo { height: 29px; width: 89px; background-repeat: no-repeat; z-index: 2; float: left; padding-left: 10px; margin-bottom: -35px; } Can anyone help me resolve why div #lamtha2logo is beneath div #footer thanks An old site, http://www.naausa.org, doesn't work properly in IE7 as the hover links don't go over the changing image. It seems to be because of the IE bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html The site and code is ugly (inline CSS, tables, etc.), but I don't want to reinvent the wheel; I just want to solve the problem and get it over with. I've tried several things with no luck. Can anyone take a gander at the source code and give me a hint? Thanks, Jeremy Does IE not support z-index attributes? I set some z-indexes and it seems to have fixed my issues in firefox, but not in IE. On a site I'm trying to setup I have a header arrangement with a centrally placed image/logo (it's a png8). 1. It looks a bit decimated in IE6. Anyone know why? 2. The image is supposed to be absolute and on top but in fact the menu bar stays on top. All a problem in IE but not firefox. I'm obviously missing something basic! Help appreciated. [sorry for any duplication... I just submitted this to the HTML list but suddenly realized it's really a CSS problem] I have a couple web pages that include relatively long pop-up "help" fields... implemented with the display and index style elements. With Netscape or Safari they look fine, but with IE or Opera, some underlying elements "bleed through"; that is, some elements from a div with a lower z-index, which should be behind, seem to float off the rear document and appear in front of the front document. All of the problem elements seem to be within forms and (probably more importantly) they all seem to be in a DIV other than the DIV containing the pop up. That is each structure looks something like: <div> <div> ... the pop up </div> <div> the rest of this section </div> </div> <div> ... some more stuff </div> the proplems are in the area in which the pop up overlaps later divisons. (not all items so conflict) ... any ideas? Hi everyone, I'm currently busy on a website which is viewable here The problem is the 'Top' image on the right side. It's supposed to be below the #shadow div (look at my source code) I tried changing the z-indexes to different levels but the top div keeps staying on top. If I turn it into a negative z-index, the mouseover doesn't work anymore.. Hope anyone can help Wouter I am making a list of arrangements, and want a div containing further info to pop up, when you click the arrangement. To make sure the info-box is on top of the other DIVs, i have set z-index to 1. But i have a couple of scripts on the page, and they are allways places on top. I there a way to go around this? + Is it possible with a few simple changes to this script: Code: <script type="text/javascript"><!--
function showHide(boxName) {
theBox = document.getElementById(boxName);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
<body>
<a href="news" onclick="showHide('news'); return false;">News</a>
</body>
So the target changes back, when the link is inactive. I've tried this: Code: <body> <a href="news" onmouseover="showHide('news'); return false;">News</a> </body>
But then i have to pass the link again, to close the window again. I'm wanting to put three items together with different z-indexes. The first div contains another div and a paragraph, all are positioned absolutely. I want the 2nd div to be higher than the p. The html is as follows: Code: <div id="sticker"> <div></div> <p>Text</p> The css is as follows: Code:
div#sticker {width:146px; height:140px; background:url("stickerbase.png") no-repeat top left; position:absolute; top:20px; left:20px; z-index:10;}
div#sticker div {width:115px; height:67px; background:url("stickerflap.png") no-repeat top left; z-index:20;}
div#sticker p {position:absolute; top:40px; left:20px; z-index:15; background-color:#06c;}
An example is at www.wattersisere.co.uk/devshed I want the text with the blue background to be behind the flap of the sticker! I even tried it out with an online z-index checker and couldn't get their code to do it. Thanks, Watters I worked it out, I had missed the position:absolute off the 2nd div. hi, i've been reading extensively about the z-index issue that IE 7 suffers from (when using the "position" property) but i cannot for the life of me fix my problem. Basically i have a #menu that is positioned relative to a #wrapper. The dropdown menu works fine in all browsers except that in IE 7, the grey shadow that should appear behind the dropdown menu itself appears on top of the actual dropdown menu. If you view the same page using Firefox, the dropdown menu appears above the grey shadow as it should do. This is the EXACT behaviour i need. I need the dropdown menu and its shadow to appear above the "#content .box" below it, but i also need the shadow to appear behind the dropdown menu. I just need to replicate this exact behaviour you see in Firefox in IE 7. I need to keep the IE7 compatibility mode and the DOCTYPE as they are otherwise the other styles on my site will be affected. Please find the attached folder with all necessary code contained in it. Ignore the jquery.js file as its merely used for effects and is not causing the issue. BTW: its essential that the #menu is positioned relative to the #wrapper as i want it to appear further down in the HTML code for SEO purposes. Thanks in advance I am using an image in the FOREground as a border and I can't get the DIV boxes to drop behind the image. Here's the CSS Code: body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
}
#maincontainer {
position:absolute;
top:0px;
left:0px;
z-index:200;
color:#f00;
background:transparent;
}
#header {
position:absolute;
top:22px;
left:22px;
color:#000;
border:1px
solid #000;
padding-top:5px;
padding-left:5px;
padding-right:5px;
width:745px;
height:73px;
background:#FFFFCC;
overflow: hidden;
}
#leftcontent {
}
#rightcontent {
}
#centercontent {
Here's the HTML Code: <html> <head> <link rel="stylesheet" type="text/css" href="newstyles.css" > </head> <body> <div id="maincontainer"> <img src="mainborder.gif" height="600" width="800" alt=""></img> <div id="header"> eat at joes </div> <div id="leftcontent"> eat at joes </div> <div id="rightcontent"> eat at joes </div> <div id="centercontent"> eat at joes </div> </div> </body> <html> Hi There - Most of my CSS has been pretty pedestrian. Now I've been assigned a layout that is a bit more adventurous and I'd really like to try it. You can see it at leevodra.com slash layout7.gif . (Forum rules prohibit me from posting a URL or inserting an image or attaching an image. Not sure what best to do here.) Briefly, there's a vertical nav that is semi-transparent and sits above the other divs. It needs to be a fixed width, but with the option of having it be flexible width. The main content container sits behind the nav and has a left margin of a percentage. (The same percentage as the right nav div.) It lives underneath the nav div and goes all the way over to the right. It's better to look at the picture. How do I approach this? Instead of a header and footer that go all the way across, there's a big vertical stripe that cuts off everything else. How do I make the text in the main content container be sensitive to the vertical nav? If the vertical nav's flexible, (doubt I can get away with that since it needs to be fixed) then I can have a percentage from the edge. But what if it's fixed width? Do I need a separate text div on the same z-index as the nav? Is there a way to add pixels to a percentage? Do I just cheat and give it a max-width? Any help getting started or with the finer points of this layout will be greatly appreciated. |
|||||||