z-index...

[EvenAngels]

Hi. ^_^

I'm currently trying to get the website section of my forum working for everyone, and to do that I need to work with the z-index in CSS so that 2 bits go behind the rest on lower resolution screens. A friend of mine with a 1024x768 resolution got this when viewing the site:

http://i128.photobucket.com/albums/p182 ... /Scree.jpg (over 700px wide so linked to)

Now, the circles are actually supposed to be "holes" going over an image which you can see behind it. Both the "holes" and the image are supposed to be on the left of the site, but on lower resolutions they move closer to it. The problem is, they need to go below it.

Now, I have both the div for the holes and the image set to z-index:0; and the rest of the divs are set between 1 and 9. However, as you can see, its not working.

Any ideas what I'm doing wrong? I'm still new at CSS. ^_^;;

 

[Nexus]

Pretty much, you need to either write down or visualize which <div> you want to be the very top layer, which ones you want in the middle and the bottom. Starting with the bottom-most image, give it a z-index of 1. Work your way up the divs by giving it a larger number in the z-index:

Top layer: z-index: 4;
Middle-Top layer: z-index: 3;
Middle-Bottom layer: z-index: 2;
Bottom layer: z-index: 1;

-Rich

 

[EvenAngels]

I currently have 3 divs on the top layer. Should I change it so they're on different ones?

 

[Nexus]

Definitely. Each z-index represents a layer 😉

-Rich

 

[EvenAngels]

I think that's fixed most of it. 🙂 Thank you. Now I just need to get a div that refuses to do as I say to listen to commands. 😛

EDIT: I've currently got an error with the following div class/style that I can't fix;

.whiteSpace {
top:700px;
margin: 0 auto;
background-color: #000;
position:fixed;
z-index: 4;
height: 1000px;
width: 890px;
}

Basically, it seems to be ignoring the margin and z-index properties. Any idea why?

EDIT2: Never mind. Fixed it! 😀 Thank you very much for your help!