PDA

View Full Version : CSS Z-Index issue?



sundevil67
Dec 13th, 2008, 06:56 PM
I need to have my content scrolling behind the header/footer...I've tried clip, z-index, overflow, etc...nothing seems to work. The content shows through when you scroll, and I need it to behave like an actual frame. Any ideas or advice would be very much appreciated!

here is the example I am working with (http://www.adamfialkov.com/css)

oesxyl
Dec 13th, 2008, 11:39 PM
I need to have my content scrolling behind the header/footer...I've tried clip, z-index, overflow, etc...nothing seems to work. The content shows through when you scroll, and I need it to behave like an actual frame. Any ideas or advice would be very much appreciated!

here is the example I am working with (http://www.adamfialkov.com/css)
in global-styles.css missing a f from 'font'


h1,
h2 {
font:normal 1.5em/1.1 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
letter-spacing:1px;
}

I guess you know this, place for this is inside the page in header not in css file:


<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->

see:
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.adamfialkov.com%2Fcss%2F
try to fix this,check if work and post result please.

regards

sundevil67
Dec 13th, 2008, 11:54 PM
I fixed what the validator was complaining about, but it didn't affect my problem....what is weird is that it seems to work sort of OK against the footer; the content when I scroll down is hidden behind the footer, but it bleeds right through the header. Arg!

oesxyl
Dec 14th, 2008, 12:08 AM
I fixed what the validator was complaining about, but it didn't affect my problem....what is weird is that it seems to work sort of OK against the footer; the content when I scroll down is hidden behind the footer, but it bleeds right through the header. Arg!
you have overflow: hidden in #content, probably to hide the scroll bar but this means also that will not scroll. Make it auto.

after some experiments with your layout, I guess is better to make #content-wrap position: fixed and the only problem will remain with footer.
regards

sundevil67
Dec 14th, 2008, 12:27 AM
After making those two changs....I can work with the header and footer like that...but the dealbreaker is that I *NEED* the scrollbar to remain in its default position, scrolling the content that is centered in the browser window - so there should be padding on the left and the right of the white area; in other words, the way it looks on the left should be the way it looks on the right...with the scrolling behavior remaining how it is now. Does that make sense? Thanks so much for looking!

sundevil67
Dec 14th, 2008, 12:34 AM
If I put a 'max-width: 975' on content-wrap, it brings the scrollbar in...everything plays nice, but if I could just have this width and stick the scrollbar back on the right-side of the browser....

oesxyl
Dec 14th, 2008, 12:37 AM
After making those two changs....I can work with the header and footer like that...but the dealbreaker is that I *NEED* the scrollbar to remain in its default position, scrolling the content that is centered in the browser window - so there should be padding on the left and the right of the white area; in other words, the way it looks on the left should be the way it looks on the right...with the scrolling behavior remaining how it is now. Does that make sense? Thanks so much for looking!
I guess I understand what you want and must be a way to achive this but I can't say that I know how. I don't have much experience with position fixed, and I don't see a way to get rid of it. I will try to find a solution, :)

best regards

Excavator
Dec 14th, 2008, 12:49 AM
Hello sundevil67,
From your linked example...
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
background-image: url(images/keyboard_bg.jpg);
background-repeat: repeat;
font:100%/1.5 Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
}

h1,
h2 {
font:normal 1.5em/1.1 Verdana, Arial, Helvetica, sans-serif;
text-align:center;
letter-spacing:1px;
}

#wrap {
width:975px;
margin:0 auto;
height: 100%;
}

#header {
width:975px;
height:62px;
background-image: url(images/top_bg.gif);
background-position: 0 bottom;
background-repeat: no-repeat;
margin: 0;
/*background-color: #327195;*/
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}

#content-wrap {
padding-top: 62px;
height:100%;
position: fixed;
max-width: 975px;
}

#content {
padding:0;
background-color: #fff;
height:80%;
overflow: auto;
} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */

#footer {
width:975px;
height:76px;
position:fixed;
bottom:10px;/*move footer around with this*/
z-index:10; /* Prevent certain problems with form controls */
text-align:center;
background-image: url(images/bottom_bg2.gif);
background-position: 0 bottom;
background-repeat: no-repeat;
}
#footer a {
color:#111;
}




Does that help? It works here in FF3...

sundevil67
Dec 14th, 2008, 12:54 AM
This is the example I am trying to emulate: http://www.456bereastreet.com/lab/cssframes/

sundevil67
Dec 14th, 2008, 12:56 AM
I've gotten the header/footer positioned in the right place....now if I could just get that scrollbar in the right place, I'll be good to go! You guys have been great with the responses....much appreciated again!

Excavator
Dec 14th, 2008, 03:30 AM
You just need to look closer how the example your trying follow works.
Your page is all contained in #wrap, like this:

wrap

header
content-wrap
footerend wrap

The example that scrolls the way you want is set up like this:

header

content
stuff in content
end contentfooter

sundevil67
Dec 14th, 2008, 06:47 PM
After going back to the example, using their code and simply plugging in my background images for the header and footer...it has become clear that my document needs to be set up differently. I haven't found the right way yet! But it seems like these other examples I have been looking at just hide the scrolling content behind the top and bottom frames by using a background color. I can't do that because half of my header/footer background is transparent AND I need padding at the top and bottom.

I posted the result here (http://www.adamfialkov.com/css/example2.html)

Excavator
Dec 14th, 2008, 07:23 PM
Well, good job on restructuring the DOM and the valid code!

Your transparent image is obviously doing what it's supposed to do. How to fix it so scrolling content will disapear under the transparent part... I don't know.

oesxyl
Dec 15th, 2008, 01:53 AM
After going back to the example, using their code and simply plugging in my background images for the header and footer...it has become clear that my document needs to be set up differently. I haven't found the right way yet! But it seems like these other examples I have been looking at just hide the scrolling content behind the top and bottom frames by using a background color. I can't do that because half of my header/footer background is transparent AND I need padding at the top and bottom.

I posted the result here (http://www.adamfialkov.com/css/example2.html)
I guess you can solve it if you replace 'images/top_bg.gif' in div#header, div#footer with a sliced combination of it with 'images/keyboard_bg.jpg". Seems to work in ffox 2, I don't in other browser/versions.

best regards