Simple Organism
Containing the Elements and Content
We're going to move pretty quickly through this section since it's almost identical to how we wrapped the page. First, we need to wrap <div></div> tags around each of the elements on this page: title, menu, content and footer.
<div><h1>Website Title</h1>
</div>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Recent News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div>
<h2>Topic Five</h2>
<p>Lorem ipsum dolor sit amet, consectetuer... Donec at nulla.</p>
</div>
<div><p>Copyright 2005 Website Title. All Rights Reserved.</p>
</div>
Same as before, we need to create selectors in our stylesheet for each one of the <div> tags we added as well as add the selector id to each <div>. Don't be too fancy with the names you come up with. It's much easier to use simple names so the next time you come back to the document or if you need to pass it to another developer to work on, it's easily understood.
<style type="text/css>
body {text-align: center}
#container {width: 760px; text-align: left;margin: auto;border: 1px #000000 solid}
#masthead { }
#main-menu { }
#page-contents { }
#footer { }
</style>
And for the divisions...
<div
id="masthead"><h1>Website Title</h1></div>
<div
id="main-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Recent News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div
id="page-contents">
<h2>Topic Five</h2>
<p>Lorem ipsum dolor sit amet, consectetuer... Donec at nulla.</p>
</div>
<div
id="footer"><p>Copyright 2005 Website Title. All Rights Reserved.</p></div>
Cool, let's see what it looks like. Not much different right? Wrong, we succeeded in separating each element of the page in order to get ready to add some design treatments to each of them individually. Feel free to download this sample.