HTNASL Part III: The Header
October 7th, 2005
Well, so far I have shown how to skeletize, visualize, nakedize, cropize and stylize. Yeah, I agree, that is enough ‘izes’ for now. This next article in the series of How To Nail A Sexy Layout will cover the placement of background images in the header and navigation. I will be referencing the visualization of the layout quite often so go ahead and skim Part I if you haven’t read it in a while.
Once I get to this point in a layout, I break out a piece of paper and a pen. The majority of the work from here on out is simple mathematics to make all the background images line up with each other. I usually start styling the body and then work my way to the innards of the template. First up, the striping and gradient effects.
The Stripes and Gradient
The striping effect stretches the width of the browser’s viewing area, so I used the <body> tag to get things done. The beauty of repeating images is a tiny image (if you clicked on the link, yes it is actually there, it’s really small) can fill the entire viewable area with color and pattern.
body {background:transparent url(images/bg_body.gif) repeat 0 0;}
You’ll notice from the example that we now have stripes, but the dark gradient does not appear. To apply the gradient, I layer the gradient image on top of the body using the #outer div (the next element inside of the <body> tag.
#outer {background:transparent url(images/bg_outer.jpg) repeat-x 0 0;}
The layout now has nice stripes and a dark gradient. The next element to style is the #header.
The Header
I know that the image for the header is 760px wide and 293px high. I also know that the navigation image is 760px wide and 69px high and that the navigation is marked up inside the header. For this reason, I will give the header a height equal to the header image plus the navigation (362px). Now that the simple addition is done, the styling comes easy.
#header {width:760px; height:362px; background:transparent url(images/bg_header.jpg) no-repeat 0 0; position:relative;}
The reason I have given the #header a position is because, for this layout, I will be positioning the logo and navigation absolutely inside the #header. Absolutely positioned elements are taken out of the flow of the document and positioned relative to their containing block (read more about this here). By giving #header a position of relative, it becomes the containing block for anything marked up inside it (ie: the link home, tagline, and navigation). Hope that makes sense.
The Logo
After finishing the #header, I position the logo (#hrhome) absolutely inside of its containing box (#header). Again, all measurements come from the image.
#hrhome {width:412px; height:68px; position:absolute; top:212px; right:25px; background:transparent url(images/bg_logo.jpg) no-repeat 0 0;}
The header and logo look great, but before I start on the navigation, I hide the #hrhome link and #tagline text.
#hrhome span {display:none;}
#tagline {display:none;}
The reason I hide the #hrhome link and #tagline text is because I am replacing them with images. Rather than show plain text, I give the link a background image of the logo and hide the plain text. This means the plain text will be visible to devices that cannot understand the css and the aesthetic logo will be visible to the more intelligent devices. This is just one method of replacing text with images (more on image replacement methods).
(Example with stripes, gradient and nearly finished header)
The Navigation
The last item of the header that needs to be styled is the #nav. The #nav is a simple unordered list. I position it for placement, apply a background image, give it dimensions, and remove the bullets for the list items. Also, I remove any margin and padding that has been applied by my default styles.
#nav {position:absolute; top:293px; left:0; background:transparent url(images/bg_nav.jpg) no-repeat 0 0; width:760px; height:69px; margin:0; padding:0; list-style:none;}
Don’t worry about the fact that nothing is clickable or that the links all show up on the left side in blue text. What I will do next with the navigation items is position each of them where they should be based on the navigation image. I will then hide the text for these items so that the original navigation background image appears clickable. In reality, the links are just layered over the background image.
#nav li {display:inline; margin:0; padding:0;}
#nav a {position:absolute; top:5px; display:block; text-indent:-9000px; overflow:hidden; height:58px;}
#bi a {left:80px; width:93px;}
#re a {left:205px; width:68px;}
#po a {left:304px; width:80px;}
#pp a {left:417px; width:84px;}
#co a {left:533px; width:73px;}
#li a {left:634px; width:47px;}
(Example with nav items positioned)
The #header and #nav are now complete and the layout is beginning to take shape. I debated on whether or not to finish all the background images in this article, but decided in the end that this was enough to chew on. Tip: Open up all the examples in new tabs (if you have a tab capable browser) and then start at the beginning and close each tab. It’s kind of neat to see the progression of the site with just a few styles. The next article in this series will cover the placement of background images in the #content and #footer. I may also wrap up the series. We’ll see…
The How To Nail A Sexy Layout Series
If you enjoyed this post, get free updates by email or RSS.
Subscribe
anyone know what font that is for the links in the nav bar?
I’m confused… it would be a lot faster, easier, and more maintainable to just use a flow layout with table tags and let the browser position the images. I really dont see why using all this absolute positioning with pixel coordinates is somehow better?
I also don’t see why using hidden text links and then superimposing images over them is somehow better than just simply using img tags inside an href. I would dread trying to maintain a site that someone else wrote by layering images over hidden link tags.
Basically, you have just proven to me that positioning with tables and using straight HTML for (gasp) presentation is far superior than using CSS.
@Nameless One - First off, the reason you don’t understand why it is important is because you aren’t looking at the big picture. The web does not just appear in a browser anymore. It is spreading to all different kinds of devices–pocket pc’s and phones just to name a few. Tables don’t work so well on smaller screens.
Secondly, I started my web workings using tables. I then switched to standards about a year later and I haven’t looked back. I can promise you that maintaining a standards based layout is multiple times easier than a table based.
Thirdly, it sounds like you had your mind made up before you read this article, but if you are still willing to give it a chance, read DWWS. I haven’t met a person yet who has read this book and not switched over to web standards.
I absolutely love this series of articles. Thank you so much. I’ve been following along and applying the principles to a site of my own. Please continue, and thank you again!
Enjoying the series. Keep up the good work.
Chris.
Very good series of articles!
I’m a web designer for more than 3 years, but from a year ago I started to make CSS designs. Although it’s a longer process than table positioning, other pros totally wipe of old type of designing. Now I recommend this type of doing things to everyone that starts making websites.
Love this series. I’ve been using your tips for some design work and it’s been a great help for transitioning away from table-based layout to CSS. I’ve been eagerly awaiting round 3… now for round 4! Keep up the great work.
- J
nice article but confusing to some designers
@louis - how was it confusing? I’d be happy to explain anything I was not clear on.
I was wondering why exactly the logo was separated from the header image. Would separating the 2 make that much of a difference in the size of the graphics? It seems like double redundancy to me.
@James - In Part I I explained this. I have included the excerpt below.
Great job again John on the article it is starting to come together now. For anyone that is not getting what John is doing in these articles read Designing with Web Standards by Jeffrey Zeldman. Zeldman helps old school designers see the light about web standards and why they are important.
Keep up the great work John!
David Bax
Glad to see Part III has finally arrived.
Great job. Both with developing your series, and with maintaining a great deal of patience with those who refuse to step into the light of tableless design and insist on remaining in the shadows of building with tables. I just have to say that if you can’t understand how tableless design makes your site more maintainable, just go look at CSS Zen Garden. Hundreds of different designs with just one HTML file. Now that’s maintainable code. Try that with a table-based design.
Keep up the good work John.
Thanks,
Jaime
John, perhaps you can explain this quote from an earlier post, ” … I started my web workings using tables. I then switched to standards about a year later and I haven’t looked back.” What exactly is non-standard about tables? As far as I know, tables are part of all of the W3C “recommensations” for HTML and XHTML.
On another note, this is a great set of articles. Is there a book in your future?
@newbie - There is nothing inherently wrong with tables. Tables are great for tabular data. Using tables for layout, however, is non-standard. Hope this differentiation makes sense.
No book in the future. These articles would need some serious polishing. I have been toying with an idea of organizing them into a pdf. Depends on if there is a demand. In other words, if a more polished pdf version of the entire series would be appreciated, let me know.
John - I guess I am still a bit confused. The “layout” in your sample website seems to be tabular. Why wouldn’t you simply use a table and apply “styles” to the various rows, colums or cells?
As for the PDF, I would definetly read it.
@newbie - My best recommendation to you would be to pick up a copy of Designing With Web Standards by Jeffrey Zeldman. This book covers the theories behind web standards.
In the previouse article you explained croping based on your guides. How is establish, what program etc., the guides?
@busychild - I design and crop in Macromedia Fireworks. The cropping is established based on the visualization of the design, which I discussed in Part I of the series.
I am so excited about your series and willing to see next one. It is only two months that I have started blogging and by your series I found out that I have been totally wrong. I have used pictures and background wrongly.I have used a lot of tables and until now I didn’t know that there are other standard ways!!! my question: John, I use Blogger as my service provider. please give me some advice or direct me towards some references about storing my external CSS file. is it reliable to save it on file storage hosts in the web? (you know that Blogger only let us to store images and it is very important for me to have external CSS as I have several weblogs and each time I should manipulate templates indivitually).
I appreciate your help
@Koorosh - I am not very familiar with Blogger, but I believe you can put your css right in the template file. You don’t have to store it. If you want to store it, I would recommend just getting a host online and storing all your files and images there.k
I just love the series, I just recomneded it to a couple of fledgeling designers. I just wish you had been around when I started, but hey you gotta learn how to use google somehow right? :) Looking forward to the Grand Finale!
John, loved the articles and am eagerly awaiting round IV. I am a big fan of table-less design and the seperation of content and display, however I find myself agreeing with the one who shall remain nameless on one thing; It seems counterproductive to me when you create visual links by layering the text links over your nav image. Is this really the only/best way for sexy links? If so, it seems to me this would have a number of flaws, both conceptually and in practice. For instance, how would this affect translation to other languages/browser fonts..you could end up with links which no longer fit you images.
Thanks and keep up the good work.
@eelsup - I don’t really see a problem with different languages as the styles can be disabled. With the styles disabled the text can be translated to the language preference of the user. I design for my primary audience. If someone comes here and finds my design unsatisfactory (be it language or font sizes) they can disable the styles, modify it however they like and still enjoy the content. Hope this answers your questions.
Thanks alot for this article series. Its really done a difference for me, as im slowly (very slowly) learning the inner working of CSS.
If you’ve set the default margin and padding to 0 in your general redeclarations, why is it necessary to do it again in the nav and nav list styles?
And what about screenreaders with display:none? Fugedaboudit?
@Nikc - I strip the browser default margins and paddings. Then I add in my own defaults. The reason it is necessary in the nav and list styles is to override my defaults.
Great Series, John! And I’m letting you know a PDF version of the series would be greatly appreciated.
My question:
Is there a way, using Web Standards, to create a layout that always vertically fills the screen. I find that I can hack it using:
but that’s a hack. I can’t find a solution to this problem.
I would love a PDF version of this series. Keep up the good work.
@5Alive - I’m not sure what hack you were using as it did not appear in the comment. The most popular method that I have found is footer stick alt. I personally have not tried it, but the man in blue is a pretty solid coder.
John:
I’m loving the series. I’ve been wanting one of these for a long time. You can find all sorts of how-to’s on the different pieces of putting a site together, but I’ve never come across one that starts at the VERY beginning, and goes all the way through.
Well done.
And by the way, a compiled version of the series in a PDF would be great. ;)
Very nice set of articles, very practical and usefull, thanks. How do you approch the issue of layering multiple images to generate a finished look and then having that print correctly?
@Thelatecomer - I believe the next article will answer your questions (coming in the next few weeks).
Fantastic work with the article. I was googling for a while now, on finding exactly what you are trying to establish with your lessons. I have just began web-site buliding and decided to start out the right way right away.
I’m wondering if you could cover how to integrate word press into a new site design, or at least point me in the right direction. I’m new at this, and have been following your articles to build my site, which is coming along nicely, but I’d love to use word press. Is there a decent article on how to do this somewhere? I’ve been looking around the wordpress.org site, but haven’t really had any luck.
Thanks
@gadget - There are several good articles on how to create themes and the wordpress codex is a wonderful source of information.
Try searching wordpress themes on google. Look through a few pages of the results and check out the articles. I probably won’t write on this issue because I really believe it has been covered well on the web already.
Ohhhh, thanx, thanx, thanx -
I am stumbling into CSS since over a year and more than often paying my insights with hours of surfing and trying afterwards offline. CSS the painful way …
Now you bring along this little workshop & I see, learn, act and - it works. In minutes, instead of hours.
Great job!
Please carry on, I´ll be the first reader of your new chapter.
I have been designing with tables for 5 years now and I”m slowly looking to make the transition to css.
I have to say that it is very frustrating getting the same look in multiple browsers. I’m on the brink of giving up and sticking with tables.
It seems that whatever I do it looks great in firefox, but ie will always do something a bit different especially with relative positioning.
I know there are plenty of resources out there, but I’m very frustrated at this point.
@bigjoe - Don’t give up. You may be frustrated now, but when it all finally clicks you’ll find yourself frustrated trying to do it the old way. Also, remember that now and even more in the future, the web is moving to different devices. I guarantee you will find yourself more frustrated in 5 or 10 years trying to get a cell phone to display your table correctly.
Not to be pushy, because this series is fantastic, and I love it, but when it part IV coming out? :)
@gadget - It’s ok to be pushy once in a while. I’m glad you have enjoyed the series thus far. I will do my best to have it out in the next two weeks (I’m swamped at work and home). Hope you can stand the wait.
I’ll manage :) Actually, it’s not really a bad thing that I have to wait, because it forces me learn the next steps on my own. I’ve made progress. I’m having some trouble getting outside shadows to look good (like on humanradiator.com). What’s the best way to crop for shadows? With a plain (non-gradient) background? No background?
Great series John. Thanks for helping us maintain some sort of standards and esthetic quality! :-)
It helps a lot, really!
@gadget - What kind of problems are you having? Have you tried flattening the graphics file before you crop? That seems to help me.
THis stuff is great. Thank you so much. When will I be getting the rest of the deal? Love it. Thank you for laying it out man making it so simple. Positioning is the hardest part of CSS.
John, I cannot tell you enough how much your short tutorials helped me. I’ve got approximately 50 CSS type bookmarks and have scoured each one trying to teach myself CSS. Yours was the first one that made things “click” and that’s not an easy thing to do.
I too am looking forward to the next tutorial and yes a pdf file would be sweet! I’d be willing to help you pdf the text if you’d like. You have my email attached to this post.
Thank you, thank you, thank you for taking the time to put your expertise into words and present them to me in a format that was both readable and straightforward.
HTNASL Tutorium
Auf das How To Nail A Sexy Layout Tutorium hab ich ja schonmal hingewiesen. Inzwischen gibt es dazu auch den 3. Teil:
How To Nail A Sexy Layout Part One, Skeletize, Visualize, and Nakedize
How To Nail A Sexy Layout Part Two: Crop and Style
How To…
Good part III as I expected. And yes the best way to control header is using absolute and relative positioning. I am doing it very simmilar way as you described.
pharmacy…
disproved.alienate amicable adipex online [url=http://www.lexapro-online-pharmacy.info/]adipex online[/url] http://www.lexapro-online-pharmacy.info/ …
what are the odds of conception after giving birth…
Sherrill ships noun….