CSS - Do I want z-index?

Discussion in 'Web Design and Development' started by ChicoWeb, Jan 31, 2007.

  1. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #1
    Hi guys...

    I'm in need of some advanced CSS help here :) How can I get this damb background image to appear behind my layout? I've tried z-index, which I thought would do the trick, but to no avail. It should be fairly recognizable, but it's the gray bar that is going in front of my layout right now.

    Here is what I have so far.
    http://cwd.dyndns.org/wsg/index.html
    I don't believe it's valid as IE6 for PC doesn't like it.

    This is what it's supposed to look like.
    http://cwd.dyndns.org/layout2.jpg

    Thanks in advance!!
     
  2. janitorC7 macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #2
    I;m half asleep in saying this, but I think that you are looking at this the wrong way, rather that you have to worry about floating the top layer over the backround. Try a different wrapper mabye, if I can, tomorrow maby I'll try it
     
  3. iGav macrumors G3

    Joined:
    Mar 9, 2002
    #3
    After a quick scan through your code, you've only specified 1 z-index, and that's on the actual 'background' image, and that is why the image is appearing above everything else.

    I think (I've only had a quick scan through) that you've put your layout in a div called wrapper, as long as that div contains everything that you want to appear on top of that background image, assign a z-index to that div.

    #wrapper {
    margin: 0px auto;
    width: 750px;
    background-color: #505050;
    border-right: #494949 5px solid;
    border-left: #494949 5px solid;
    z-index: 2;
    }

    Should solve the problem.
     
  4. ChicoWeb thread starter macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #4
    Tried this, no luck.
     
  5. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
  6. iGav macrumors G3

    Joined:
    Mar 9, 2002
    #6
    I forgot to add (told you I scanned through the code), you need to specify positioning to apply the z-index. e.g. Absolute, relative etc.

    For example.

    #wrapper {
    position: absolute;
    margin: 0px auto;
    width: 750px;
    background-color: #505050;
    border-right: #494949 5px solid;
    border-left: #494949 5px solid;
    z-index: 2;
    }
     
  7. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #7
    Absolute positioning screws up the centering, of course. There really isn't a need to apply a z-index to that element, it has one (0) by default.
     
  8. iGav macrumors G3

    Joined:
    Mar 9, 2002
    #8
    Good point, I didn't bother resizing the browser window to realise it's a centering layout.
     
  9. ChicoWeb thread starter macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #9
    Right on. I used relative and had to define where to start it , left, as IE6 was fuxing it.

    http://cwd.dyndns.org/wsg/index2.html

    Thanks guys!
     

Share This Page