www.webdeveloper.com
Results 1 to 3 of 3

Thread: Z-index issues

  1. #1
    Join Date
    Jan 2008
    Posts
    123

    Z-index issues

    Hey all,

    I'm having a bit of issue with the z-index and it's making me crazy.

    http://www.wildearthride.com/wildMar...build/nav.html

    I'd like the tabs on the left to overlap when the tab is selected to hovered over.

    Here's my CSS:

    Code:
    #main-nav { list-style:none; height:770px; float:left; z-index:-1; }
    	#main-nav div { margin: -6px 0px 0px 14px; z-index:1;}
    	#main-nav #tab-home { margin-top:0px;  }
    	#main-nav #tab-info {   }
    	#main-nav #tab-photo {   }
    	#main-nav #tab-species {  }
    	#main-nav #tab-games {  }
    	#main-nav .selected-tab { margin-left:0px; z-index:25; }
    	
    #content-contain { background-color:#83a4a9; float:left; width:800px; height:751px; z-index:2; overflow:hidden; margin:0px 0px 0px -14px;}
    and my HTML:

    Code:
    <div id="nav-contain">
            
            <ul id="main-nav">
            	
                <li><div id="tab-home" class="first-tab"><img src="tab-home.png"/></div></li>
                <li><div id="tab-info" class="selected-tab"><img src="tab-info.png"/></div></li>
                <li><div id="tab-photo"><img src="tab-photo.png"/></div></li>
                <li><div id="tab-species"><img src="tab-species.png"/></div></li>
                <li><div id="tab-games"><img src="tab-games.png"/></div></li>
                
            </ul>
            
    	</div>
    	
           
        <div id="content-contain">
    Also, (in case you need it) my jQuery:

    Code:
    $('#main-nav #tab-home').hover(function() {
    			$(this).css("margin-left","0px");
    		}, function() {
    			$(this).css("margin-left","14px");			
    		});
    
    ...etc...etc
    Anyone know what I'm doing wrong?

  2. #2
    Join Date
    Oct 2009
    Posts
    4
    for z-index to work you have to specify the elements position.

    add position: relative; to all the elements you want to have a z-index.

  3. #3
    Join Date
    Jan 2008
    Posts
    123
    Worked like a charm.

    Thanks for the info

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles