Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    z-index image on top of css menu a:hovers not working

    Hi,

    I've pasted in a css flyout menu and then stacked a png image over the top of it so that the image looks a bit like a border around the menu. You can go here to see the result. The image/menu in question is down at the bottom left of the big rounded rectangle.

    I did this using z-index.

    The image is in a containing div and the menu elements are inside that div.

    The container for the content of the page has a z-index of -500. The menu container has a z-index of -20 and the sub container to set the image on the menu has no z-index. This set-up shows the elements in the way I described above, with the menu stacked between the background of the main content div and the smaller container holding the image that I want placed over the menu.

    However, with this set up the a:hovers on the menu are not working. I also noticed that the menus on other parts of the page are not working either, because I put a -500 index on the content container, so that the a:hovers are behind that image now, even though the images are still visible. The links are not only not clickable, but they don't even register at all. Unfortunately I could not find a way to stack the image on the menu withuot giving the main bckground image a - z-index. Perhaps there is a way around that, too?

    I'll post the relevant code below.


    Code:
    /*this is the big rounded rectangle which everything fits on to.*/
    #containerINDEX {
    	position:relative;
    	width:882px;
    	height:1617px;
    	margin-right:auto;
    	margin-left:auto;
    	background-image:url(plainINDEXj.jpg);
    	background-repeat:no-repeat;
    	border:1px solid transparent;
    	z-index:-500;
    	}	
    
    /*this is the div holding the image which I want to put on top of the menu*/
    #flycontainer {
    	position:absolute;
    	height:335px;
    	width:420px;
    	margin-top:70px;
    	padding-right:100px;
    	background-image:url(flyoutart1.png);
    	background-repeat:no-repeat;
        }
    
    /*this is the menu code which I want to place between the main background image and the #flycontainer image.*/
    
    .menu {font-family: arial, sans-serif; width:106px; height:150px; position:absolute; margin-left:40px;top:180px; font-size:11px;z-index:-20}
    
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:114px; height:20px; padding-right:10px; text-align:right; border:1px solid black; background:#c9c9a7; line-height:19px; font-size:11px;}
    
    .menu ul {padding:0; margin:0;list-style-type: none; }
    
    .menu ul li {float:left; margin-right:1px; position:relative;}
    
    .menu ul li ul {display: none;}
    
    /* specific to non IE browsers */
    .menu ul li:hover a {color:red; background:#b3ab79;}
    
    .menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
    
    .menu ul li:hover ul li ul {display: none;}
    
    .menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px; height:110px; margin-top:10px; margin-left:10px;padding:10px;}
    
    .menu ul li:hover ul li a:hover {background:#dfc184; color:#000; height:110px;}
    
    <!--HTML-->
    <div id="flycontainer">
    <div class="menu">
    
    <ul>
    <li><a href="#1">Link1</a>
    
    <ul>
    <li><a href="#1" title="title">explanation</a></li>
    
    </ul>
    
    </li>
    
    <li><a href="#2">Link2</a>
    
    <ul>
    <li><a href="#2" title="title">explanation</a></li>
    
    </ul>
    
    </li>
    
    <li><a href="#3">Link3</a>
    
    <ul>
    <li><a href="#3" title="Title">explanation</a></li>
    
    </ul>
    
    </li>
    
    <li><a href="#">Link4</a>
    
    <ul>
    <li><a href="#4" title="title">explanation</a></li>
    
    </ul>
    
    </li>
    
    <li><a href="#5">Link5</a>
    
    <ul>
    <li><a href="Link5" title="title">explanation</a></li>
    
    
    </ul>
    </li>
    </ul>
    </div>
    </div>
    Last edited by daring_du; 12-08-2009 at 10:37 AM. Reason: clarification

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Z-indeces are all relative to their parent elements so unfortunately you can't do what you are trying to do. You have basically placed the menu "under glass" and now, though you can still see it, you can't get to it.

    There isn't really any direct solution for this problem. You can try to make your <ul> background use that same image and position it accordingly.

    Maybe something like this:
    Code:
    .menu {font-family: arial, sans-serif; width:106px; height:150px; position:absolute; margin-left:40px;top:180px; font-size:11px;/*z-index:-20*/}
    
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:114px; height:20px; padding-right:10px; text-align:right; border:1px solid black; /*background:#c9c9a7;*/ line-height:19px; font-size:11px;}
    
    .menu ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    
    
    .menu>ul {
    background-color:#C9C9A7;
    background-image:url(/images/flyoutart1.png);
    background-position:-40px -180px;
    height:110px;
    list-style-type:none;
    margin:0;
    padding:0;
    width:126px;
    }
    Otherwise just set the <ul>'s background to transparent. In either case you'll just have to live with the borders not being behind the image.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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