Two-Sided Expanding Headers
This week I was working on coding the home page of a new project. The first thing I noticed upon reviewing the psd (designed by the fabulous Hong Vo of Namaste Interactive) was that the header graphic was to extend in both directions indefinitely … but that it was different on the right and left sides. Huh … how to handle this? I couldn’t simply repeat one strip at the top of the page. I didn’t want to make one huge graphic with one pattern on the left side and one on the right and then center the image … that would work, but it would require a huge graphic! Any other solutions I initially thought of would create a horizontal scroll bar to be ever present. What to do?
Position Is Everything
I turned to absolulte positioning for help. The great thing about objects that are absolutely positioned is that they don’t actually take up any space, and so other objects can sit on top of them and, most importantly in this case, they don’t cause scroll bars.
:x:
Simple as can be … I set up two spans that will contain the repeating header elements I need.
<body>
</body>
:c:
First we’re going to set the spans to display as block (I didn’t use div’s because I don’t want them affecting the spacing of unstyled pages). Then I give them each a position of absolute and place them at the top right and top left. We give them each a width of 50%, so that together they take up the entire width of the page. Finally we simply set their heights and background images.
#header_left {
display:block;
position:absolute;
top:0;
left:0;
width:50%;
height:171px;
background:url(../_images/header_left.gif) repeat-x top;
}
#header_right {
display:block;
position:absolute;
top:0;
right:0;
width:50%;
height:171px;
background:url(../_images/header_right.gif) repeat-x top;
}
So far this is what we have.
The Rest Is Business As Usual
Now we simply create the rest of our page as we would normally do. Because our spans are positioned absolutely they don’t interfere with the rest of our elements at all. I’ll show you the rest of my code for the header, just for fun. ;o)
:x:
<body>
<div id="container">
<div id="header">
<h1>Natural High Lifestyle</h1>
<ul id="tnav">
<li>home</li>
<li>shop</li>
<li>about</li>
<li>wholesale</li>
<li>media</li>
<li>help</li>
<li>contact</li>
</ul>
<ul id="bnav">
<li>Men's Clothing</li>
<li>Women's Clothing</li>
<li>Home</li>
<li>Boutique</li>
<li>Retreat</li>
<li>Music</li>
<li>Accessories</li>
</ul>
</div>
</div>
</body>
:c:
* {
margin:0;
padding:0;
}
html {
min-height:100%;
margin-bottom:1px;
}
body {
background:#eeede4;
position:relative;
}
#header_left {
display:block;
position:absolute;
top:0;
left:0;
width:50%;
height:171px;
background:url(../_images/header_left.gif) repeat-x top;
}
#header_right {
display:block;
position:absolute;
top:0;
right:0;
width:50%;
height:171px;
background:url(../_images/header_right.gif) repeat-x top;
}
#container {
position:relative;
width:980px;
margin:0 auto;
z-index:100;
}
#header {
position:relative;
width:980px;
height:170px;
background:url(../_images/header.jpg);
}
#header h1 a {
position:absolute;
display:block;
width:264px;
height:77px;
top:67px;
left:130px;
}
#header h1 a span {
position:absolute;
width:100px;
margin-left:-5000px;
}
#header ul#tnav {
list-style-type:none;
position:absolute;
top:0;
left:130px;
}
#header ul#tnav li {
display:inline;
}
#header ul#tnav a {
display:block;
float:left;
font:bold 12px/33px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#4d2311;
text-decoration:none;
line-height:33px;
padding:0 12px;
}
#header ul#tnav a:hover {
background:url(../_images/tnav_rollover.jpg) repeat-x top;
}
#header ul#bnav {
list-style-type:none;
position:absolute;
top:55px;
left:471px;
height:72px;
}
#header ul#bnav li {
display:inline;
}
#header ul#bnav a {
display:block;
float:left;
text-decoration:none;
height:72px;
}
#header ul#bnav a#bnav_men {
width:65px;
}
#header ul#bnav a#bnav_women {
width:62px;
}
#header ul#bnav a#bnav_home {
width:62px;
}
#header ul#bnav a#bnav_boutique {
width:57px;
}
#header ul#bnav a#bnav_retreat {
width:60px;
}
#header ul#bnav a#bnav_music {
width:60px;
}
#header ul#bnav a#bnav_accessories {
width:47px;
}
#header ul#bnav a span {
position:absolute;
width:100px;
margin-left:-5000px;
}
That’s A Wrap!
Check out the final results and watch that header expand, Baby!
May 14th, 2006 at 3:27 pm
I learn more and more each time I read you site! Thank you so much for sharing!
I have a question:
The * { margin:0; padding:0; } code, does this change the defaults for the paragraph tag? I used the 0 margin and padding to get rid of extra space at the top of some browsers like you suggested on an earlier article, but it seemed to effect the line spacing or something of the paragraph tag. After I took it off, the tag went back to normal. Is something else effecting that or is there a way to get it back to normal? Curious on your thoughts on that.
May 14th, 2006 at 7:42 pm
The *{margin:0;pading:0;} resets the margin and padding for ALL elements. I do this because different browsers have various default margin and padding for elements, which can cause layout discrepencies. If the margin and padding of all elements is reset to 0 then you will have the opportunity to set them all to whatever you like and be sure that the results will be the same among all browsers.
So, if you use this method, you will have to reset the margins for paragraphs, as well as for all other elements.
Hope this helps!
May 15th, 2006 at 1:01 pm
Expand – yes. Shrink – no. I’d expect a large number of visitors still experience a horizontal scroll. Could you make the minimum width smaller?
Did you try PNG instead of JPG for the original wide image?
A heads up – the secondary links don’t show with images disabled, or on text browsers. They show up fine in small screen mode, though.
Cordially, David.
May 15th, 2006 at 2:23 pm
David: The page is designed (not by me, by the way) for a 1024px width browser (the most common these days), with all the main central content viewable within an 800px wide browser. That’s why the scroll is there if your browswer is smaller, and there is nothing to do about that. However, I believe that this method would shrink just fine if the content didn’t force the width (see example 1, which shows the technique without added content).
As for the nav images not being visible with images turned off, you’re right. But I’m willing to live with that as they are visible as text when css is disabled, and I think it is a rare thing for folks to be on a browser with images disabled and css enabled. Especially for this client’s target audience (young and hip).
May 16th, 2006 at 10:59 am
Mani: You say:
The page is designed … for a 1024px width browser
A 1024px screen does not equate to a “1024px width browser”. Consider these cases:
- Browser is not maximized
- Windows taskbar is to the side
- Browser sidebar is open
- A browser toolbar is on one side
“Young and hip” may prefer handheld devices to PCs anyway, if trends in Japan and Europe are an indication.
May 16th, 2006 at 11:06 am
David: Ah … you’re such a ball buster! (And I say that with love) ;o)
Let me say again: I did not design this site. I am simply coding it. I have no control over the choice to design for a 1024px window. But, having said that, many sites are going that way now and I expect more will follow. I have yet to design one optimized for that width, however.
Yes, “young and hip” may indeed browse with handheld devices, and sites I code are always done with that in mind, as will this one be. Just because it’s graphical presentation will be wide, that has absolutely no effect on the unstyled document.
May 17th, 2006 at 2:42 pm
Nice solution to this one.
Is there a reason you use spans instead of divs for the two repeater areas? Seems to me that a div already has the block level setting, and would thus remove one line of css code from each definition.
May 17th, 2006 at 2:46 pm
Andy: I used spans because I don’t want these containers to interfere with spacing if the site were viewed unstyled (like on a handheld device).
Empty spans take up no space at all, whereas empty divs will cause line breaks.
May 17th, 2006 at 4:16 pm
Of course! I didn’t consider the unstyled display.
September 26th, 2006 at 10:54 am
This was really helpful to me, I have been struggling with a similar issue for a while now!
Also, any tips for bottom borders? As in, the same as this but running across the bottom of the page. Mine always jumps up and never stays put!
February 16th, 2007 at 5:47 am
Working with your expanding header was exactly what I was looking for, except for one thing: I am using Project Seven’s CSS Express menus (url:http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm) combined with their 3-column fluid body content, and the tags prevent the menu from displaying at all. I’ve tried various configurations for placement, but nothing has worked yet. The usual result is that the graphics display behind the 3-columns, and the navbar disappears. If the navbar is visible, it does not function.
Suggestions?
Best regards,
Ed