Creating a CSS layout from scratch

7. Additional Structure

Now that we have the base layout divs in place, we can add the rest of the structure that will make up the bare bones of this website.

The main things we still need to add are:

Navigation Links
Headings (Site Headings and Content Headings)
Content
Footer Information (copyright info, credits, and alternative navigation)

In order to start implementing these things without breaking the page layout, we will create a helpful little class called “hidden”.

Add this near the top of your stylesheet, after the body tag definition:

.hidden {
	display: none;
}

What this means is now we can set any element in the site to have the class “hidden”, and it won’t show on the page at all. This will come in handy later. You can forget about it for now.

Lets talk about headings.

Headings in an HTML document are defined by the tags <h1> through to <h6> in order of importance to the document. For example, <h1> for the website name, <h2> for the primary headings (ie page name), <h3> for secondary headings, etc…

We’ll add an <h1> inside our Header div, and set it to the name of the company, Enlighten Designs in this case.

<div id="header">
	<h1>Enlighten Designs</h1>
</div>

If you refresh your page you will notice that Enlighten Designs has come up in big letters inside the header, but there is also now a lot of white space around the heading. This is caused by the default margins on <h1> tags. So we need to strip the margins and padding by doing this:

h1 {
	margin: 0;
	padding: 0;
}

Now we’ll add the navigation. The ins and outs of how the navigation will work can be rather complicated, and will be addressed fully in its own section later on.

Hindsight Note: Using Definition Lists as navigation is terrible practice. I’m not going to be revisionist and rewrite the tutorial, but just be aware that in production sites you should always use unordered lists for navigation. Using dl’s in the first place was just a lazy way of getting around some IE bugs that only effected unordered lists.

The navigation will be structured as a definition list (<dl>) with individual id’s relevant to each navigation item on each definition term (<dt>). These Definition terms will have links to our major sections inside them. If that sounds confusing, just add this code to your main-nav div:

<div id="main-nav">
	<dl>
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</dl>
</div>

In easy to understand terms, the <dl> acts as a container, the <dt>‘s are unique identifiers for each navigation item, and the links are…links.

We use the unique id’s later when we come to make this navigation look like it should, with its sexy image rollovers. But more on that later.

If you refresh, you’ll notice it looks a bit ugly, so for now, we’ll just hide the navigation we added, with the “hidden” class we made earlier.

<div id="main-nav">
	<dl class="hidden">
		<dt id="about"><a href="#">About</a></dt>
		<dt id="services"><a href="#">Services</a></dt>
		<dt id="portfolio"><a href="#">Portfolio</a></dt>
		<dt id="contact"><a href="#">Contact Us</a></dt>
	</dl>
</div>

“And like *that*, it was gone…”

Now we’ll jump down to the footer ‘cause its relitively easy. There are 2 parts to the footer, the copyright info and credits on the left, and the alternative site nav on the right.

We want the alternate navigation to float right, like we did with the sidebar and the content, so we’ll put that in the div first. In theory you should be able to float divs regardless of where they are in the source, but bugs in IE make this difficult, so for now, any floated items should come first in the source order.

Place it in a div with a unique id like so:

<div id="footer">
	<div id="altnav">
		<a href="#">About</a> - 
		<a href="#">Services</a> - 
		<a href="#">Portfolio</a> - 
		<a href="#">Contact Us</a> - 
		<a href="#">Terms of Trade</a>
	</div>
</div>

Underneath that div, we will add the copyright and credits text.

<div id="footer">
	<div id="altnav">
		<a href="#">About</a> - 
		<a href="#">Services</a> - 
		<a href="#">Portfolio</a> - 
		<a href="#">Contact Us</a> - 
		<a href="#">Terms of Trade</a>
	</div>
	Copyright © Enlighten Designs

	Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
	<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

And thats the footer done for now. Just to make sure you’re doing fine, this is what your site should look like:

Moving onto the main content area, lets add the content. I’m ripping this content directly off the design in step 2. Use <h2> tags for the headings “About” and “Contact Us”. Enclose the paragraphs in <p></p> tags, and use <br /> for line breaks.

<div id="content">
	<h2>About</h2>
	<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p>
	<p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p>
	
	<h2>Contact Us</h2>
	<p>Phone:   (07) 853 6060<br />
	Fax:     (07) 853 6060<br />
	Email:   <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a><br />
	P.O Box: 14159, Hamilton, New Zealand</p>
	<p><a href="#">More contact information…</a></p>
</div>

Refresh your page you’ll notice there is more of that white space popping up around the content div. This is because of the default margins on the <h2> tags and the <p> tags.

We need to strip their margins and padding. However, we don’t want to do this to every single paragraph tag or secondary heading that’s going to be on the website. To do this we need to use ‘child’ CSS selectors.

All elements in HTML have a ‘parent, child’ relationship to one another. If ‘tag a’ is inside ‘tag b’, then tag b is the parent of tag a. In the code above, our <h2> tags and our <p> tags are both children of the #content div.

If we want to select the child elements of a specific parent, we separate them with a space, like the example below:

#content h2 {
	margin: 0;
	padding: 0;
}

#content p {
	margin: 0;
	padding: 0;
}

So the above rules tell the browser to apply these styles ONLY to <h2>‘s and <p>‘s that are child elements of the #content div.

Next we make the text look a bit better.

« Previous 1 2 3 4 5 6 7 8 9 10 11 12 Next »

70 Comments

Chris says:

Hey Steve - old article or not this is a nice & simple explanation of how ‘float’ works. I’ve always battled to get my head around those ... cheers!
Arizona Web Design says:

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.
Jason says:

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!
didik edhi says:

It’s very usefull for me as newbie.good site..all the best.
NeoCaster says:

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 !!
Preston Racette says:

Thanks so much for sharing all the information
Mike says:

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/
Mike says:

Thanks a lot for the response Steve, I very much appreciate it!
adam says:

thanks a lot for this great tutorial..
easy to understanding ;)
Harjit says:

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.
nayon says:

very helpful post..
Clear instruction , After completing your tutorial i get clear idea about css.
thanks..
Erik says:

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 :)
Martin says:

quite good basic tutorial

www.idcreate.net
php tutorial says:

Nice article. Even if it is old, but it contains useful information.
Andy says:

Great tutorial mate, have been looking for something like this for so long; a guide which actually breaks down each component and shows the effect of each parameter change.

Thanks a lot
Bashar says:

Really looking forward to the updated version. It’s the best CSS layout tutorial I found honestly
Hassan Naqvi says:

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.
Medyum Hoca says:

Really looking forward to the updated version. It’s the best CSS layout tutorial I found honestly
Mike Shved says:

Thanks, dude!
From Ukraine with llove :)
icon creation says:

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
Arch-Area says:

Without this article, my game would never exist :) Cheers!
Airstream says:

This is amazing. Great teaching source
JayAche says:

Can’t get the navigation-menu to work.

I’m using .png and different sized pictures.
Does this make any difference?
Reviewpsdtohtml says:

HI

Good one. Liked and so added to our blog.
Steve Dennis says:

Thanks for the link :)
sunny says:

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 should add those to this site though *blush*...
sunny says:

Hi!! Steve,

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.

Please help….

Thanx!!

Sunny
web designer india says:

wow good tutorial its very use full
Dusty Rose Graphix says:

This is pretty good!!!! I offer layouts, pro pics, scroll boxes and more and people always ask me how do you make layouts. I could never explain so now I can just send them your link!!!
stendmaster says:

Если бы я все это знал до того, как слизал сайт по шаблону.
afsar khan says:

hi
Good very good tut boss i was looking for the kind of tutorial for finishing the job of my own website www.merehumraaz.com. Keep it on and thank a lot.
nzyme says:

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!
ENGLISH34Valerie says:

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.
Pranav says:

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)

body.about #header {
height: 150px;
background: #db6d16
url(images/about.jpg);
}
body.services #header {
height: 150px;
background: #db6d16
url(images/services.jpg);
}

Hope you can help! Thanks again.
Praca says:

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.
Jason W says:

This is by far the best CSS tutorial I have gone through. Thanks so much for this, I know this is an old article but it’s relevant and very useful even today.
iFranzi says:

nice tut.
ud says:

nice very nice tut
hm says:

great tutorial! helped me a lot!!
Derek says:

a great one for a beginner like me who wants to jump into CSS. I like how you color coded everything at first to establish the basic layout. Brilliant.
Nirupam Burman says:

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.
Nirupam Burman says:

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?
LearnWebsiteDesign.com says:

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

Thanks
Jose
Venky says:

Thanks

Articles & Tutorials

Creating a CSS layout from scratch

7. Additional Structure

70 Comments