Z-Indexing

[Trevvvor]

Someone link me to a guide to explain it? No matter what values I use, it has no effect on sections with :hover on it. I need each section to be on top, only when you hover it.

[Brink Kale]

Not very much can be said about Z-Index. This page explains it all.

[Trevvvor]

It still doesn't work. gonk
Does it only work in FF or what?

[Brink Kale]

Maybe it isn't possible then. I can't exactly figure out what effect you are going for, so I can't really help much on the topic.

[Trevvvor]

It works. I just have to work it into my profile. Look at my profile. Each of the small square are section. I want it where when you hover over them, they are the top layer. Instead of you moving your mouse on say the stretched out about me to click one of my links and out pops another section. O:

[Brink Kale]

Have you tried putting all your buttons on a single layer and have the hovers for all the content on a layer higher than that?

I just had an idea. Instead of using the images for the buttons, make the h2 sections of the sections you want as the buttons. That way when you hover on them ( and set the content itself to come up) it would be forced to treat it as a hover and since it would be the topmost layer it would be material and kick the other layers from showing. Hope that makes sense

[Trevvvor]

Brink Kale

Have you tried putting all your buttons on a single layer and have the hovers for all the content on a layer higher than that?

I just had an idea. Instead of using the images for the buttons, make the h2 sections of the sections you want as the buttons. That way when you hover on them ( and set the content itself to come up) it would be forced to treat it as a hover and since it would be the topmost layer it would be material and kick the other layers from showing. Hope that makes sense

I am using the entire section as the button. It's only hidden in FF at the moment so if you are using FF, view it in IE. I tried this (simplified of course):

#about{z-index: 1;}
#details{z-index: 1;}
#journal{z-index: 1;}
#comments{z-index: 1;}
#friends{z-index: 1;}
#wishlist{z-index: 1;}
#signature{z-index: 1;}
#about:hover{z-index: 2;}
#details:hover{z-index: 2;}
#journal:hover{z-index: 2;}
#comments:hover{z-index: 2;}
#friends:hover{z-index: 2;}
#wishlist:hover{z-index: 2;}
#signature:hover{z-index: 2;}

But when you hover over the About section, every other section is STILL on top of it. Some of the sections show up on some of the others. The comments, journal wishlist and I think signature sections are the onlyones that actually come out on top.

[Brink Kale]

Well, with the entire section as the button, means that it is still open to be viewable while hovering over other sections. What my suggestion was is.

Take all the buttons and make them the background of the h2 section. Remove the text via the text-indent, then position it. All the while, set the actual content to display none but force display: block to the h2.

It should look something like this codewise. Give it a try and tell me how it looks.

Code

#about
{ display: none;}

#about h2
{ display: block !important; background: url('buttonurlhere'); position: absolute; top: 100px; left: 100px; z-index: 100;}

#about:hover
{ display: block !important; position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; z-index: 1000;}

[Trevvvor]

It's not working. :/

[Trevvvor]

I played around with it. But I can't get what you were talking about.
EDIT:: If you tell it not to display the about, it won't show just the header even with the display: block !important; code.

[Brink Kale]

Ah, right. Sorry, I meant visibility: hidden and visibility: visible !important;} xD

[trezoid]

Maximum possible z-index value is 999.

that said, I have not been able to make z-index work on gaia.

something about the Jquery used to generate the pages...

what you could try though is have the h1 being the size of the image, and then have 0 opacity normally, but 100 when hovered...

[Brink Kale]

Are you sure? Is that Gaia Specific? As far as I have read, Z-index can go up to 2,147,483,647 in both positive and negative. As for not being able to get it to work, I have been able to get it to work. As a matter of fact, the top header bar uses the z-index property. Am I mistaken?

[trezoid]

Brink Kale

Are you sure? Is that Gaia Specific? As far as I have read, Z-index can go up to 2,147,483,647 in both positive and negative. As for not being able to get it to work, I have been able to get it to work. As a matter of fact, the top header bar uses the z-index property. Am I mistaken?

I have never seen higher then 999

apparently it does use short int though, so yes, 2147483647 is theoretically possible, yes.

you would be stupid to use it though :B

[Trevvvor]

Brink Kale

Ah, right. Sorry, I meant visibility: hidden and visibility: visible !important;} xD

visibility: hidden is treadted as display: none in IE. :/