...

View Full Version : Z-index and CSS formatting Issue



Bobafart
05-27-2010, 08:23 PM
Hi, I am trying to make a horizontal bar display across the browser when the user hovers over a menu element.



<div id="monthleft">
<ul>
<li>Month</li>
<li><a href="#">jan</a></li>
<li><a href="#">feb</a></li>
<li><a href="#">mar</a></li>
<li><a href="#">apr</a></li>
<li><a href="#">may</a></li>
</ul>
</div>



The CSS:



#monthleft {
display: block;
z-index: 4;
position: absolute;
left: 15px;
right: 0;
top: 160px;
bottom: 0;
width: 50px;
border: 1px solid blue;
}
#monthleft ul {
padding-left:5px;
left: 0;
margin-left: 0;
}

#monthleft ul li{
height: 30px;
list-style: none;
}
#monthleft ul li a{
z-index: 4;
}
#monthleft ul li a:hover {
color: #000;
background: #EBBD2B;
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}



Right now you can see it in action here:

http://www.gabbr.com/js/viewer/cmedata/index.html

If you hover over the "Year" menu at the top of the page you will see the orange vertical bar display. I am trying to do the same thing with the two menus on the left expect when hovering the orange bar is horizontal.

As you can see it isn't working.

Can someone suggest what I am doing wrong?

dougnbr
05-27-2010, 09:47 PM
Hello,

I added the a width and display:block to the following, and I think it's doing what you want...


#monthleft ul li a:hover {
color: #000;
background: #EBBD2B;
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

width: 500px;
display: block;
}

Bobafart
05-28-2010, 04:17 PM
Thanks for the tip. I appreciate it.

Updated link:

http://www.gabbr.com/js/viewer/cmedata/index.html

I am trying to format it so that the orange bar when hovering over Month extends to the far left and the far right of the screen. I tried a width:-15px to extend the hover bar to the far left edge of the screen but that does nothing. I also tried a width:100% to make it extend to the right edge of the screen but that also doesn't work.

The other disturbing thing is that the hover orange horizontal month bar doesnt show up in Chrome. But it works in Firefox. Which CSS tags are invalid for Chrome?

bluecube
05-28-2010, 07:30 PM
Heya

You're having an issue making the hover block 100% because you have a set width of 50px for the #monthleft div and it's positioned absolute. So when you give the "a" tag a width of 100% , it will inherit the 50px of the #monthleft div. So you set it like this.

#monthleft {
display: block;
margin-left: 15px;
border: 1px solid blue;
}


That automatically gives the month div a width of 100%.

By the way, It's considered good practice to use z-index with positioning. For it not showing up in Chrome, FF, add the code below. This will make the hover consistent across all browsers:

#monthleft ul li a{
display:block;
}

Since the month div has no float or positioning, the "dayleft" and "rightcontent" will flow below the month div, so you have to position them. So I came up with this finally:


<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
font-size: 64px;
}

#yearmenu {
display: block;
z-index: 5;
position: absolute;
top: 0;
bottom: 0;
left: 200px;
}
#yearmenu ul li {
float: left;
width: 58px;
list-style: none;
padding: 20px 0;
}
#yearmenu ul li a{
display: block;
position: absolute;
top: 0;
z-index: 5;
bottom: 0;
padding: 10px;
}
#yearmenu ul li a:hover {
color: #000;
background: #EBBD2B;
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}

#monthleft {
display: block;
margin-left: 15px;
border: 1px solid blue;
}
#monthleft ul {
display: block;
padding-left:5px;
margin-left: 0;
}

#monthleft ul li{
height: 30px;
list-style: none;
}
#monthleft ul li a{
display:block;
}
#monthleft ul li a:hover {
display: block;
color: #000;
background: #EBBD2B;
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
left: 0;
right: 0;
height: 30px;
}

#dayleft {
position: absolute;
top: 160px;
left: 80px;
width: 50px;
bottom: 0;
border: 1px solid red;
}
#dayleft ul {
padding-left:5px;
left: 0;
margin-left:0;
}

#dayleft ul li {
height: 30px;
list-style: none;
}
#dayleft ul li a{
z-index: 3;
}
#dayleft ul li a:hover {
color: #000;
background: #EBBD2B;
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}

#rightcontent {
position:absolute;
top: 160px;
left: 145px;
}
</style>

Bobafart
05-29-2010, 10:48 AM
Thanks Bluecube. That was awesome. I made some changes to #dayleft as well to give the same effect to it.

Updated changes are here:
http://www.gabbr.com/js/viewer/cmedata/index1.html

The only problem I am having now is that I cannot get the orange hover bar to extend off the left of the screen for either #dayleft or for #monthleft. It extends all the way to the right margin of the screen but not the left. The problem is the margin-left: 15px; in #monthleft and margin-left: 80px; in #dayleft. But I cannot get rid of these since I require them for the letter spacing.

Any advice?

bluecube
06-01-2010, 06:44 PM
Give the selector #monthleft ul li a:hover a left margin.


#monthleft ul li a:hover {
position: absolute;
padding-left: 21px;
left: -80px;
display: block;
color: #000;
z-index: 3;
background: #EBBD2B;
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
left: 0;
right: 0;
height: 30px;
margin-left:15px; /* Whatever width you want it to be */
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum