#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Posts
    3
    Rep Power
    0

    Layrering / z-index help needed


    Hi all,
    I am having a hard time getting a drop down menu to show up over an image. Could you help?
    Here is the link rlaa.sbachdev.com
    If you hover over the About page, the drop down is under the image. I can't figure out how to fix this...
    I actually find z-index very confusing. If you can point to a good explanation and/or tutorial about it, it would be great!
    Thanks!
    B.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    add to your stylesheet

    Code:
    #view-content{
      position:relative;
      z-index:-1;
    }
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, bastoubach.

    Negative z-indexes don't work right in some older browsers. I would recommend adding this rule instead:
    Code:
    #main-menu-wrapper {
      position: relative;
      z-index: 99;
    }
    These articles explain how z-index works:
    https://developer.mozilla.org/en/CSS...acking_context
    http://reference.sitepoint.com/css/stacking
    http://timkadlec.com/2008/01/detaile...acking-in-css/

    P.S. Is there an easy way to remove some of those <div>s? Drupal seems to have added a ridiculous number of them.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2012
    Posts
    3
    Rep Power
    0
    Thanks! I went for the second option, as recommended!
    Much appreciated.

IMN logo majestic logo threadwatch logo seochat tools logo