SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-Index Issue When Using Nivo Slider

    LINK-
    http://www.tocdocs.com/index.041613.php

    The link above has a main menu navigation that includes sub menu items or dropdowns on some of the buttons. The dropdowns are covered up by the Nivo slider. Can someone tell me how to fix this? I have been toying around with z-index on what I think are the appropriate html items, but I cannot figure this one out.

    Thanks in advance to anyone who can help!

    Todd
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Try something like this:

    Code:
    #header-container {
    width: 100%;
    height: 148px;
    background: rgba(0, 0, 0, 0) url(../i/gfx_bkg_header.png) repeat-x top center;
    position: relative;
    z-index: 100;
    clear: both;
    }
    The z-index need to go on the outermost container of the menu to ensure it sits above elements below that section.

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. Your explanation helps me out. I was trying to apply the z-index to the header and the navigation items instead. Ugh. Thanks so much for continuing to show me where I have went wrong and teaching me the right way!
    Todd Temple > T2 Design

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It was more because of Internet Exploder, but I learned around here with z-index issues to head straight to the outermost element in these situations. If you have z-index: 2 on the #header-container, it seems to nullify higher z-indices on inner elements. (I'm hazy on this stuff, because I'm way too lazy to read the specs.)


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
  •