Selectors in action - step by step tutorial

Step 1 - the html code

The first step is to create <div> elements for each of the main content areas - "banner", "nav", "more", "content" and "footer". Each <div> will be styled with an ID, as they are each single instances on the page. The names of the ID's are based on function rather than appearance.

There will also be three non-content <div> elements which will be used to add images and force the page to behave in a particular way.

The containers will look like this:


HTML CODE

<body>
<div id="banner"></div>
<div id="container">
	<div id="container2">
		<div id="navigation"></div>
		<div id="more"></div>
		<div id="content"></div>
		<div id="cleardiv"></div>
	</div>
</div>
<div id="footer"></div>
</body>

Go to Step 2 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org