Forum Moderators: not2easy
Yes, I could create this feature in a page that keeps the page header outside of the 600px wrapper, but I'm hoping to avoid that.
I've tried using a div before the wrapper, as shown below. It works in IE6 and Opera7, but not in Netscape7. Is it possible to get this to work in Netscape7?
It validates for both xhtml and css in w3.org's validators.
It doesn't seem to matter whether there's content in the headerbg div.
The basic html:
<body>
<div id="headerbg"></div><div id="wrapper">
<div id="header"><p>Site name & tagline</p></div>
The relevant css:
body{
position: relative;
background: #ffd url(../images/bggrd.gif) bottom left fixed repeat-x;
color: #000;
margin: 0;
padding: 0;
border: 0;
text-align: center;
font-family: sans-serif;
padding-bottom: 25px;
}#headerbg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 150px;
color: #fff;
background: #666;
z-index: -10000;
}
#header{
background: #333 url(../images/my.jpg) top right no-repeat;
color: #fff;
height: 150px;
width: 600px;
border: 0;
margin: 0;
padding: 0;
font-family: serif;
font-size: 30px;
text-align: left;
z-index: 100;
}
z-index: -10000;
is sending it behind the <body> background color
your need to make this a positive number so it's higher than the background, 1 will do..
then your z-index on the #header is doing nothing as this div is not positioned a div will only accept an altered z-index if it is not position: static (which it is by default) so you can remove it....
... and the width because in this case I would suggest setting the #wrapper to contain these properties as then you will be able to position elements (e.g. the #header) within the #wrapper too.. you could put your width on the wrapper too and then you won't need to set width 600px on all the internal elements as they will be 100% by default
#wrapper {position: relative;
z-index: 20;
width: 600px;
margin: 0 auto; /* correct way to center */
text-align: left; /* override ie center */
}
Suzy
Thanks for the help.
I was wondering what the default z-index is for static items. I'm guessing that it's 0, because when I set the #headerbg's z-index: 1; the background is on top of the header. That kind of makes sense, because the usual thing is for absolutely positioned divs to lay on top of the default static content.
I've taken out the z-indexes for everything except the one positioned div. Values of -1 and 0 do the same thing. They work in Opera and IE, but not in Netscape.
Good point about not bothering to define the width of the elements that are just 100% of the wrapper.
Well, I'm back to almost the same place (although I've got cleaner css!). How do I get the background pushed behind the static content?
It strikes me that one solution would be to make the #wrapper absolutely positioned. Is there any cost or risk to doing that? That would make the whole page absolutely positioned, wouldn't it?
Thanks!
the second <p> will automatically have a higher stacking order / z-index than the first.
position: static, the default, will automatically give a higher stacking order to the next element in the HTML flow, it does not accept an specified/altered z-index as you can't "move" it from it's default co-ordinates anyway. (the top left settings)
position:relative; honours the "natural" stacking order, as above, only this time it can be given top/left cordinates to "move" it so it might also be useful to amend the z-index; so you can control which overlap has precendence. The second element will naturally stack higher than the first, but if for some reason you wanted to overlap the <p>'s you can make the first one appear higher.
position: absolute; removes the element from the HTML flow so it no longer has a natural "flow" stacking order, instead its stacking order is calculated from it's containing element + 1.
In this case your <html> might be 0, <body> might be 1.. this will depend on your doctype
so in order to have the #headerbg div (absolute pos) appear over the body element (therefore the body background) give it a higher z-index than 1 (just to be safe give it 5 or something.. I said 1 before but that's possibly not working because of the doctype?) - You can put this div at the end of the HTML, if you want, {outside the wrapper div) just before the </body> and it should still appear in the same place
Then relatively position the wrapper div, this will serve 2 x purposes:
1: the #wrapper div should now be first on the page (the #headerbg has been reoved from the flow) and to make sure it appears above everything else give it a high z-index, 20 or 200 as long as it's something well clear of your backgrounds..
2: You can now position elements inside this wrapper and they will take their starting point as the top/left of the wrapper as opposed to the viewport.
The header itself should then appear inside the wrapper and as long as it's 150px high too it should sit nicely with no positioning required and the wrapper contents will start stacking from z-index: 20 upwards...
html, body {padding: 0; margin: 0;}
body{
background: #ffd url(../images/bggrd.gif) bottom left fixed repeat-x;
color: #000;
border: 0;
text-align: center; /* ie center */
font-family: sans-serif;
padding-bottom: 25px;
}#headerbg{
position: absolute;
z-index: 5;
left: 0;
top: 0;
width: 100%;
height: 150px;
color: #fff;
background: #666;
}#wrapper {
position: relative;
z-index: 20;
width: 600px;
background: #fff;
margin: 0 auto;
text-align: left;
}#header{
background: #333 url(../images/my.jpg) top right no-repeat;
color: #fff;
height: 150px;
border: 0;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 30px;
}
<div id="wrapper">
<div id="header"><p>Site name & tagline</p></div>
<p>content text</p>
</div>
<div id="headerbg"></div>
Suzy
And that was exactly the explanation I was looking for in several of the books I have here...but couldn't find. Are you writing a book? You'd be good.
I'm going to print that post for future reference.
Thank you, thank you, Suzy!
