Categories

Subscribe

Creating a CSS layout from scratch

9. The Header

To implement the header, we need to get the background image applied to the header div, replace the “Enlighten Designs” heading with a graphical logo, and position it in the correct place on the header (the dark grey bar to the right).

First create 2 images like the ones below (or just save these ones):

/images/general/logo_enlighten.gif

/images/headers/about.jpg

The first part is easy. Set a background image in the CSS using the format below:

The background property that we just used is actually a shorthand property which allows us to specify the background colour, image, image position, and how the image repeats, all in one property. We’ve set the background to the same shade of orange as the header uses just so that the page doesn’t look too bland if the user doesn’t have images enabled in their browser. Paths to images in your CSS file are relative to the CSS file, not the html page. This is why the ../ is required in the path above.

Now replace the “Enlighten Designs” text with the logo image. Again, remember to keep the <h1> and put a descriptive alt attribute.

Now we have to position it on the right where it should be. We’ll do this by floating the <h1> to the right, and then using “margin-top” and “padding-right” properties to get the position exact. Add the following to the <h1> rule in your stylesheet:

102 Comments

Thanks so much for sharing all the information, I wasn’t hoping to find such complete tutorials for free. It may be an old article but the basic principles of website building and web design have remained the same.

I just finished this tutorial, and although it was not current, it was very helpful. I have published my completed example (with a link to this page)at http://bit.ly/d9IEIb for anyone to check out. I will post links to the menu images and css file on my blog. Thank you for providing this resource. Can’t wait to see the update.

Casey says:

An amazing teaching source. Never found anything that present the material, and shows it’s simplicity such as this. I feel like I actually understand css now, whereas most any other place that tries to teach makes it far more complicated than it really is.

Steve Dennis says:

Thanks guys :) I really appreciate the kind words. Keep an eye out for more articles in the near future, and feel free to let me know if there’s anything you would like a good tutorial or article written on, that you’re having trouble finding good information on. Do that via the contact section though :) Cheers!

Thanks for teaching me CSS.
I’m about to move to the next page, b4 that i just felt can’t last bit of code for the css be as under? Rather replacing the h2 code u explained earlier. Lemme now if I’m correct. Cheers !!

#content p, h1, h2 {
margin: 0;
padding: 0;
}

Steve Dennis says:

@NeoCaster: I wanted to make sure people were understanding the basic concepts before bringing up things like grouping, but yes, the code you’ve written would be a more elegant solution.

Some people favour using a “CSS Reset” to zero out browser defaults like margins and padding, but I am heavily against that method, as I believe we should be leveraging default browser behaviour if possible.

NeoCaster says:

Aha !! Sorry about that, I’m here on this page (pg 9) now… i see ‘h1’ should be separate. Cheers !!

I have a question…I normally use tables to do my layouts, but now I’m using CSS but one thing I can’t quite figure out is how to use percentages correctly. With tables its quite easy, if you want the height the whole browser you use 100% and it’ll stretch whichever cell has a “*” in it. How would you accomplish this with css? I want to color the “sidebar” of this tutorial, but if you just add a background it only colors where the text is. I want it to span all the way from the bottom of the header image, to the footer. Does anyone have any information that could help me out or possibly a link to another article that covers this?

Steve Dennis says:

@Mike: That’s a question I get asked a lot. It requires a bit of a shift in mindset. Height=“100%” doesn’t work how you would expect, coming from a background in Table layouts. If you were trying to use this to achieve a page design where the footer is always at the bottom of the browser, I would steer you away from designing like that, as it offers no benefit for the user, and only serves to complicate your code.

It doesn’t seem like that’s your intention though. It sounds like you just want equal height columns, and adding a height would seem like the logical way to achieve this. Unfortunately it’s not that easy, but there is an excellent article over at A List Apart that covers exactly how to achieve what you want: http://www.alistapart.com/articles/fauxcolumns/

hey steve, this site tutorial is amazing, it actually proved to be very handy in understanding css and other functions of html. Though I’m getting stuck in one area, say if i create a button on the menus, how do i gett he onmouseover attribute to work? I have tried almost everything and for some reason I can’t get it to work? Can you help me…cheers.

Thank you for this. I’ve been hitting a wall, trying to grasp layout concepts and your tutorial was invaluable. I’m really looking forward to the updated version. Thanks again, Steve.

Oliver says:

Hiii Steve!
Great job! I know now why my “DIVs” didn’t work. You explain every parameter let us see the result and told us how to correct the bad things.
This way of doing things is more interesting than gave us a lot of code to copy/Paste wihtout a comprehension.

Thanks a lot, I’m waiting for the new one.

Nick says:

Thanks for this tutorial. I learned a lot, and it helped to clear up a lot of confusion about float based layouts. The only criticism I can give is that things got way too complicated at page 11. Everything up to that point was great, but the hacks and the advanced CSS just to do a menu, that stuff went over my head and I thought was not a good progression to the flow of the first 10 pages of your tutorial! Other than that, I found it very useful and look forward to visiting your site again.

Steve Dennis says:

Thanks everyone :) It’s great to still see this tutorial being helpful even 4 years after writing it.

@nick: I agree, it drops you in the deep end, however at the time of writing, LOTS of people were still using javascript based rollovers, and the methods described in the tutorial are far better to learn in the long run. Text based navs are sometimes simpler in terms of CSS, but at the end of the day, too many people were asking me how to do image based navs at the time, so I obliged :)

This article had been my doorway into the css world. Before this article I was designing websites the old-fashioned way using tables. This article is written in such a way that I still refer to it for inspiration and making my css simple.

Looking forward to the new one. Hope this one will still be available.

Many applications pack all their data files into a single file, using internal markers to discern the different types of information contained within. The data files used by games such as Doom and Quake

Thanx!! a lot Steve for such an easy and understandable tutorial. Specially the float & clear part is very clear and easy to understand.

Looking forward to see more such articles.

Thanx!! Buddy

witek says:

You should add semantic meaning to data in footer, using html5 rel attributes or new tags, or using microformats for this (http://microformats.org/wiki/adr , there is also other example and good simple microformats).

Steve Dennis says:

Woah man, did you just jump straight to page 7? Check the note on page 1 :) 4yr+ old tutorial bud! hehe

I have a problem, when I am publishing my file in Mozilla Firefox, margin: 0px, padding: 0px; for html, body selector is not supporting & it shows the default 8px margin from top. Main nav is also having some problem.

now this is something interesting.its an excellent tutorial !!! keep up the good work. I did mess up at some places, but it was really helpful :)

kumar says:

hi!

i tried your navigation css. But i don’t know how to write div tags in the body section. you only gave the css section. It would have been better if you gave body section code also.

Steve Dennis says:

Hi Kumar, follow the tutorial from the start. All the info you need is in there.

kumar says:

hi steve!

Thanks for responding! i am sorry, i have not seen from the beginning. Really it is nice and helpful. If you don’t mind, give me your mail id. So i will email you if i will need anything about css. Once again thank you!

Chris says:

Awesome tutorial. It’s the first one I actually understood in depth. I noticed that no position attributes were used. I always am getting confused by absolute vs. relative. Why would you use those if you can lay a page out like this? What are the benefits and differences between them? If anyone could answer this I would greatly appreciate it. Maybe even pointing me to another tutorial that is as clear as this one would be extremely helpful.

poolboy says:

This is the best CSS tutorial for beginners I’ve come across. The language is clear and pacing is perfect.
Finally, someone who explains it in plain english rather than unnecessarily complicated code-talk. Thanks, Steve!

Houses are quite expensive and not every person is able to buy it. Nevertheless, <a href=“http://bestfinance-blog.com/topics/mortgage-loans”>mortgage loans</a> was invented to help people in such kind of cases.

Hi Steve! Thanks for this awesome tutorial! I have been running websites (plain html/blogs/forums etc) since 2006 and have tried my luck at many CSS tutorials till now. This was the first time I was able to read and understand it fully… Thanks a lot!!

bee says:

Great tutorial until I got up to page 11! For the life of me I can not get the navigation to work. Ive been throught it a million times but the navigation is not showing up. The click throughs work so I know its there but I cant see anything! Can anyone help?! It would be a shame to give up now when Im so close.

Mark says:

Bee, It sounds like class=“hidden” might still be in use within your html source code. This might explain why you can’t currently see the navigation but the clicks do work.

Steve Dennis says:

Class=“hidden” sets the element to display: none; which would make it non-clickable. If you’re not seeing the nav items, it’s 99% likely a problem with your image. Check your image paths are correct and that the images are all in the right place.

Steve Dennis says:

Shit. I’m surprised anyone’s been able to complete this tutorial at all since I launched the new design. Page 11 is completely screwed in terms of images. Sorry guys I should have checked it in better detail (its hard porting this much content to an entirely new CMS by hand). Fixing now.

Steve Dennis says:

Should be all fixed now guys. Also the example on page 12 now works again. My apologies :)

Bee says:

Thanks Steve! I just overwrote some of my code with yours. Just a couple of things I noticed which is giving me a bit of headache.

Firstly the padding on the side bar doesnt seem to be working anymore?

#sidebar-a .padding {
padding: 25px;

}

I still cant get these clicked images to work. Please see below to see how I am doing it. I have done the ‘services’ class to show you what I did. (Just so you know, all my images are in one folder local to the css)

Great tutorial I was looking for sth like this long time, thanks a lot.

Swift says:

Great tutorial!

Though I would like to point out that the reason so many folks are having trouble with the roll over images is possibly due to the fact that you initially save the files as .GIF’s and link to them…only to link to them as .JPG’s on the last step of page 11.

;)

Steve Dennis says:

I see what you’re saying Swift, but if you have a closer look you’ll see that the last code block on page 11 is referring to the header images (which are jpg’s in a different sub-directory). I think the paragraph of text above it makes this fairly clear if someone is following the tutorial and reading it as they go.

4+ years on, with cross-browser positioning being a lot better than it was, there are much better ways of achieving a similar header effect now with a lot less images.

Swift says:

Doh!

yep…yep…I see what you’re saying. I should have noticed that!

That’s what happens when I let work distract me from playing with stuff ;)

Great job once again! Nice of you to put this up!

uggs sale says:

Bee, It sounds like class=“hidden” might still be in use within your html source code. This might explain why you can’t currently see the navigation but the clicks do work.

Hi Steve,
Awesome work by you,2 thums up.I always had/has/have problems using css with div..alignment and making sections etc..now i am bit confident..just if you could let us know a lot of generic hacking techniques to overcome browser problems it would be so useful because it adds up value to others experience.
Just like the way you have explained this tutorial it would be just great.
Eagerly,waiting for your reply.

Its awesome tutorial..2 THUMS UP.i think i am more confident now with div/css..alignment and positioning was the problem i was facing..anyways,it would be really helpful if you could teach css hacks and some of the generic hacks and best practises.
And also css alignment of div ..to design any type of site..

Marv says:

hi steve just wondering why does the navigation images doesn’t show up? but the header image is ok..what could be the problem?, is it the root folder?

This is one of the tutorials that first helped me to understand how to create css layouts.

Thanks
Jose

Venky says:

Thanks

Mac-xtian says:

Hey Steve you have save me from the fever i had from two sleepless night battling with CSS, both on online and with text book. All i had was just bits of bits and half baked explanation. Your practical explanation is a treatment to my CSS fever. thanks so much for the work made here so far with step by step approach and explicit explanation. I am in deed a debtor to you. Keep an update of this work you are in fact my CSS Guru, Tutor and Mentor.

Darlton says:

i am an African student residing in african.Because of poverty level here in western Africa, it is very difficult for us to learn anything like web designing and development. I was fortunate to have access for 800hrs as it was a promotion time given to me by an internet service provider.I had the desire to learn web designing and was looking for a place where i can learn css layout.It was like i found Gold. This site is so rich in information that i was able to start designing a site for my church.pls can you help me by using list{li} to design the same type of nav menu you used in you tutorials on css layout.I think i have a good grasp of list ..Thank you once again.

This tutorial is *so* freaking clear to me! The last part with those rollovers was a bit confusing (just need to get some rest) so I gave it up for a while, tho. Thank you so much!

dann_s says:

Hey Steve
Excellent tutorial well done—!. I recently started learning CSS and I have looked many other tutorials I never could understand.(positions attributes) but this way seems much better to do it, however, I have not tried yet just read the tutorial. Brilliant job

Raghav says:

Very meaningful tutorial, thank you for sharing…

tanzeem says:

Excellent tutorial well done

hyp3r says:

when will the new one be finished?

tori says:

Hi very helpful—really is the best one out there by far. Will you be posting the updated version soon? Or maybe just a simple explanation of how we can update it?

vijay says:

Steve can you make a downloadable copy of this useful tutorial for refering in .pdf format?
It would be very helpful.
Thanks for such a wonderful tutorial.

Paul says:

Steve,

Very nice tutorial, learned a lot from it.
When will we see an updated version?

Thanks

Someguy says:

Brilliant tutorial. So far easy to follow.

mikemil@hotmail.com says:

Excellent tutorial - just what I’ve been hoping for.

Alex says:

thank you very much for the tutorial steve all went well til i got to the nav can you please elaborate on the step below or update the nav code with current css?

“Now the problem we have, is that we also want the header image to change based on what section we are viewing. So we need to modify the #header rule like so:

body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
Now when you create pages for your other sections, you’d just change the class on the body from about, to say, contact, set up a css rule pointing to the correct header image, and you’re done.”

thanks again

kiwi92 says:

Hello,

I’m a beginner, and it is very good tut. Thanks a lot!!
Very clear, and it is very easy to understand flow on html page.

Thanks a lot!!

kigiin says:

It’s been 4+ years ... any plans to get something new and up to date posted? What you’ve done was fantastic and I’m waiting on an update to see what other great things you can teach us.

codyy says:

Hey Steve.

Just a quick question, if im not seeing any changes in my webpage, does this mean I wont until im finished, btw i’m using iE.

Awesome tutorial, am a complete newbie to all things HTML and CSS and even I can understand most of what’s going on. Am currently on p.11 and will definitely use this for the site I’m building.

Thanks!
Moritz

Abraham says:

I want to thank you for helping me understand CSS (with this tutorial) when I first started out about a year and a half ago. This article finally made CSS make sense to me. I had bought the books (a ton of them) and none helped to make sense of it all till I found your tutorial! Thanks again for giving us of your time and know-how. Thank You from Texas USA!

Everyone is absolutely right, this is old but when you have a snag these sections layout the process really well. I’ve bookmarked this as a CSS reference when I want a quick run through to reference. Kudos to the writer too!

Daniel Moses says:

Awesome! Great work. It has really helped me like it has helped many others. I am looking forward for the updated tutorial.

Nice tutorial. Just subscribed to the RSS feed - hope to see more like this!

Tiago says:

The best tutorial so far was your website! Was it coded using a tool or (as it seems) written by hand?

Congratulations,

I not even needed to go through the tutorial, your site is a blast!

Justin says:

Great tutorial, very detailed and easy to follow. Thanks for sharing!

niki says:

Thanks a lot. Such a great and well explained tutorial.

niki says:

thanks again, I just have a problem when I modify the header with the body.about class the main picture -with the feet- dissapears. do you have any idea what i’m doing wrong?

Jimmy says:

Fantastic tutorial, best I’ve found so far. Can’t wait to see the updated version. Just getting into HTML and CSS and didn’t realise just how hard it was going to be. Your tutorial is really clear and easy to follow. Excellent!