SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I must be getting old and forgetful, z-index problem

    Well that and I honestly haven't used z-index in at least 6 or 7 years.

    Anyway, my problem. I have a layout I am coding and the designer got a touch crazy with borders and gradient backgrounds but the customer loves it so I'm stuck with it.

    The top of the wrapper div has a gradient and borders on the two sides, so I chopped that part out and dropped into the div as an image. I then took a slice of the non gradient part of the background and set it as the background of the div.

    I did a position: absolute on the gradient image to take it out of the flow and then a z-index: -1 on it but the image is dropping behind the main body background, essentially disappearing. I wont bore you with all the code, just this particular section:

    Code HTML4Strict:
    <div id='wrapper'>
      <img src='/images/top_inner_bg.jpg' width='982' height='191' alt='' style='position: absolute; z-index: -1;' />
      <div id='main_content'>
     
        <div id='top_blocks'>
          <div id='f_train'></div>
          <div id='p_train'></div>
          <div id='d_prod'></div>
        </div>
     
        <div id='intro'>	</div>
     
        <div id='bot_text'></div>
     
      </div>
    </div>

    As I said the stuff in the main content falls behind the image without the z-index set but with the z-index set (as shown) the image then drops below the body's image

    Anyone care to kick this old man in the brain and refresh my memory?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    No promises, but try putting position:relative on the #wrapper. Then the absolute positioning of the gradient will be in relation to the wrapper rather than the viewport.

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just as a reminder: negative z-indexes are treated differently by various browsers so it's best not to use them.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No promises, but try putting position:relative on the #wrapper. Then the absolute positioning of the gradient will be in relation to the wrapper rather than the viewport.
    Nope, still a no go.

    Tried everything here ... even went as far as to set the z-index on everything from the body up ... nada.

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I through a copy of it up on my server so you can look at the code:

    http://davidcdalton.com/layout.html

    css: http://davidcdalton.com/styles/pds.css

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I feel you! I had a tough run at the same a while back. Is it the flag/gun area that your refering to? Negative z won't work. As you found, it will put it behind it. Two other things I would try if you can't work out the z index thing. A img will always go on top of a background. So maybe make them both an img (not a background). Or, why splice them?can you just splice the whole header and make it one image?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dc dalton View Post
    Nope, still a no go.
    Huh, it works in IE7. O well, as Luki and Eric said, negative z index is no go overall.

    My suggestion is this: why use a background image on the #wrapper when it is just white? (At least, it seems to be.)

    I would put the gradient as the background image on the wrapper and let the background color be white (or whatever shade you want). Rather than have the side borders as part of the image, just put them as borders on the wrapper itself, rather than using images.

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I feel you! I had a tough run at the same a while back. Is it the flag/gun area that your refering to? Negative z won't work. As you found, it will put it behind it. Two other things I would try if you can't work out the z index thing. A img will always go on top of a background. So maybe make them both an img (not a background). Or, why splice them?can you just splice the whole header and make it one image?

    Quote Originally Posted by ralph.m View Post
    Huh, it works in IE7. O well, as Luki and Eric said, negative z index is no go overall.

    My suggestion is this: why use a background image on the #wrapper when it is just white? (At least, it seems to be.)

    I would put the gradient as the background image on the wrapper and let the background color be white (or whatever shade you want). Rather than have the side borders as part of the image, just put them as borders on the wrapper itself, rather than using images.
    The area in question is right below the menu ... here's a 2nd copy with the image's z-index removed so you can see it for yourselves.

    http://davidcdalton.com/layout2.html

    The problem is the background has a border on both sides and a gradient at the top (and bottom) that fades to white in the middle. Obviously you can't tile something like that and once I get into the product listings in the site that pages are going to get long.

    Also the border that is on the wrap is a multi pixel / multi color border, tough to do with CSS without more 'divitis' than I already have.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    O well, just put z-index: 1; (not -1) back on the image and add this to your styles:

    #main_content, #sidebar {position:relative; z-index:10}

  10. #10
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    O well, just put z-index: 1; (not -1) back on the image and add this to your styles:

    #main_content, #sidebar {position:relative; z-index:10}
    Ya know, I tried that exact same thing a few hours ago and it didn't work but now it does ..... methinks my FF is screwing with my head.

    thanks

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dc dalton View Post
    Ya know, I tried that exact same thing a few hours ago and it didn't work but now it does ..... methinks my FF is screwing with my head.
    You obviously got caught by one of those mischievous sprites that love to torment poor web developers.

  12. #12
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You obviously got caught by one of those mischievous sprites that love to torment poor web developers.
    Nah just how my week has been going .... yesh

    thanks again


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
  •