...

View Full Version : Possible z-index problem.



Jack.
09-19-2011, 01:38 PM
I've been working on this design for about maybe 3-6 hours in total (PSD and HTML/CSS). For some reason the product sider isn't working (a live demo of that can be found at http://vortexservers.com)

The website design, hosted is located at http://vortexservers.com/bin/site

Help to why this could be occurring would be greatly appreciated.

SB65
09-19-2011, 02:13 PM
div#graphics {
background-image: url("./images/graphics2.png");
background-repeat: repeat-x;
height: 516px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}

There's your problem. Get rid of this and the slider works - although you'll need to rework your logo graphics.

Jack.
09-19-2011, 02:15 PM
That z-index is there to make the graphics.png below the main top.png (grey bar, and the logo bg).
Is there a possibility to avoid taking out the z-index?

SB65
09-19-2011, 02:28 PM
It's the negative z-index that's the problem. Try:


div#graphics {
background-image: url("./images/graphics2.png");
background-repeat: repeat-x;
height: 516px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}

div#inner {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
width: 923px;
z-index: 2;
}

Jack.
09-19-2011, 02:37 PM
Alright, thanks for that, lesson learned. The top area has gone walk abouts now due to the z-index for graphics being above it. I have tried setting the z-indexes for the affected areas go a positive integer but no luck.

SB65
09-19-2011, 03:01 PM
That's because the graphic is coming from the background image on #header, which contains #graphics and #inner - so you can't make this appear on top of them.

I'd suggest creating a further div to hold the background image and placing that absolutely within #header, with a z-index higher than that of #graphics and lower than that of #inner - I think that should do the trick.


EDIT: Actually, this should do it,plus remove the css from #header.


#new_element{
background-image: url("./images/top-bg.png");
background-repeat: repeat-x;
height: 119px;
position: absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum