SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-index has no effect

    Hi there,

    I've adapted the horizontal menu found out http://www.alistapart.com/articles/horizdropdowns/ to display a paragraph when you hover above a menu item.

    My problem is the paragraph is displaying beneath the menu items. I've tried using z-index but this has no effect.

    Please take a look at this code to see what I mean:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" >
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    
    </script>
    <style type="text/css">
    
    body {
    	font: normal 11px verdana;
    }
    
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 150px; /* Width of Menu Items */
    	border-bottom: 1px solid #ccc;
    }
    
    ul li {
    	position: relative;
    }
    	
    /* Styles for Menu Items */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    }
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    li:hover ul, li.over ul { display: block; } /* The magic */
    
    li p {
    	position: absolute;
    	left: 129px;
    	top: 0;
    	display: none;
    	width: 100px;
    	background-color: white;
    }
    
    li p {
    	border: 1px solid #ccc;
    	padding: 5px;
    }
    
    li:hover p, li.over p { display: block; }
    
    </style>
    </head>
    <body>
    
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    
    <ul id="nav" style="float: left;"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a> 
        <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
      </li> 
      <li><a href="#">Services</a> 
        <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
      </li> 
      <li><a href="#">Contact Us</a> 
        <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
      </li>
    </ul>
    
    <div id="rightpanel" style="float: left; margin-left: 1em;">
    	<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    </div>
    
    
    </body>
    </html>
    Thanks for any help,
    Nick.

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Your li is positioned relatively (your ul li {position:relative;} rule) and then you have that your ul element is 150px wide because you tell it to. But you position your p element absolutely only 129px (this will be absolutely from the li, because it is the first ascendant positioned element).

    So, although this is not exact, your p element will show at ul-left-border + ul-left-padding + li-left-border px + 129 px (absolute position) + p-left-border (1px) + p-left-padding (2.5px) = 135px (approx).

    135px is lower than 150px width you gave to your ul element, and each p is a child of an li element, so it will show underneath of the next li because the p comes first in the code, and where there is no z-index order, whatever comes first in the code, shows on top.

    The z-index will not work anyway because the p is a child of the li, and for the z-index to work, they would need to be siblings.

    So your best solution is changing the left position in your li p rule and make it something like 155px or whatever distance you think convenient (always over 150px)

    Does this make any sense to you? I am reading and I think I am making it sound too complicated, really....

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks molona.

    I've read your post and it makes sense. I now understand why z-index does not work.

    The solution you offer, although it works, is not the intended design. My client wants the hovers over the li elements unfortunately. Can you think of any other solution?

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Do I need to think that the current position of the p is the correct one? (I mean the left margin, of course )

  5. #5
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the current position of the p is correct. Somehow, I need to get the p to the top.

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Sorry, I haven't ignored you... although I forgot about this thread completely (I didn't have much time and I have spent all of my time in the General Chat forum instead).

    Right now, I can think of two possible solutions, but I would need to try them first as I am not sure which one will fit your needs best.

    The first one is to make the p sibling of the li. In this way you can position both and, which is more important, use the z-index.

    The second option is to change the p to div, completely independent of the li, probably they will come after in the code (so that you will not have to use z-index at all, they will show on top anyway). They would need to be absolutely positioned, but if you give a fixed height to the li, it may be a solution.

    I will try them tomorrow and let you know.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •