About Web Design Book Chapter 9 - Example 9-5
The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dogs and Their Toys - Buy Dog Toys and Get Dog Info at Dogs and Their Toys</title>
<meta name="keywords" content="dog toys, dog information, help with dogs, dog collars, dog equipment" />
<meta name="description" content="Find the best dog toys and dog information at Dogs and Their Toys" />
<link type="text/css" href="zexample9-5.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<h1>Dogs and Their Toys</h1>
<ul id="navigation">
<li><a href="/" class="here">Home</a></li>
<li><a href="/products/">Dog Toys for Sale</a></li>
<li><a href="/articles/">Dog Information</a></li>
<li><a href="/about/">About This Site</a></li>
</ul>
</div>
<div id="container">
<div id="main-holder">
<div id="main">
<h3>Headline Here</h3>
<a href=""><img src="http://z.about.com/d/webdesign/1/0/O/5/1/dogcollar2.gif" width="193" height="82" alt="Buy this collar" /></a>
<h4>Sub-head Here</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque libero nulla, tristique non, posuere nec, semper vitae, metus. Vivamus ipsum. Maecenas justo est, hendrerit ut, dapibus in, mattis tristique, lorem. Mauris in odio. Integer tortor tellus, pretium vel, fermentum a, gravida id, tellus. Aliquam vitae lorem. </p>
<h4>Sub Head Here</h4>
<p>Integer scelerisque nulla ut dolor. Integer id ligula et nibh adipiscing rutrum. Nulla rhoncus convallis arcu. Donec libero felis, pharetra eget, vestibulum eget, imperdiet sit amet, risus. Nunc quis orci. Aliquam justo nunc, congue vel, dapibus a, tincidunt ac, tortor. Proin sit amet quam. Mauris laoreet mollis dui. </p>
<p>Quisque erat magna, venenatis in, molestie aliquam, euismod ut, metus. Ut dolor mauris, iaculis non, fermentum at, semper sit amet, lacus. Sed aliquam ullamcorper eros. Aenean at urna. Nulla iaculis semper ipsum. Donec purus. In hac habitasse platea dictumst. Donec egestas. Aliquam varius, pede ac feugiat hendrerit, dolor quam tincidunt sapien, quis aliquet orci eros sed mauris. Vivamus pellentesque. Nullam consequat lacus vel metus.</p>
</div>
<div id="subnav">
<h3>Headline Here</h3>
<ul class="sidenav">
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
</ul>
<h3>Headline Here</h3>
<ul class="sidenav">
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
</ul>
</div>
</div>
<div id="extra">
<h3>Headline Here</h3>
<ul class="sidenav">
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
<li><a href="">Link to content</a></li>
</ul>
<h3>Ads Can Go Here Too</h3>
<p class="sidenav">This could be an ad or anything else you might want to put in the extra column.</p>
</div>
</div>
<div id="footer">
<h3>Copyright © 2006 Dogs and Their Toys</h3>
</div>
</body>
</html>
The Style Sheet
body { margin: 0; padding: 0; background: url(http://z.about.com/d/webdesign/1/0/Q/5/1/bg2.gif) repeat-y 0 0; }
#header {
float: left;
width: 800px;
height: 125px;
background: #fff url(http://z.about.com/d/webdesign/1/0/S/5/1/logo2.jpg) no-repeat 0 0;
border-bottom: 3px solid #183;
}
#header h1 {
font: bold 3em Georgia, "Times New Roman", serif;
color: #183;
width: 700px;
float: right;
margin: 0;
}
#header #navigation {
float: left;
background: transparent url(http://z.about.com/d/webdesign/1/0/P/5/1/paws.gif) no-repeat 150px;
color: #fff;
width: 800px;
font-size: 0.75em;
/* for IE 6 and 5 */
margin: 48px 0 0 180px;
}
/* IE 6 and 5 can't read this property */
#header > #navigation {
padding: 0 0 0 350px;
margin: 48px 0 0 0px;
}
#header ul#navigation li {
display: inline;
}
#header ul#navigation li a {
padding: .25em 1em;
margin: 0 1em 0 .25em;
background-color: #183;
color: #fff;
text-decoration: none;
float: left;
}
#header ul#navigation li a:link, #header ul#navigation li a:visited { color: #fff; }
#header ul#navigation li a:hover {
color: #000;
background-color: #eef;
}
#header ul#navigation li a.here, #header ul#navigation li a.here:hover {
background-color: #183;
color: #fff;
}
#container { width: 800px; }
#main-holder {
float: left;
width: 600px;
}
#extra {
float: right;
width: 160px;
}
#extra h3 {
width: 130px;
background-color: #ccc;
color: #000;
font-size: .8em;
margin: 10px 10px 0px 10px;
padding: 2px 2px;
}
#extra ul.sidenav, #extra p.sidenav {
width: 115px;
background-color: #ddd;
color: #000;
font-size: .8em;
margin: 0 0 0 10px;
padding: 5px 5px 15px 15px;
}
#main {
float: right;
width: 410px;
}
#subnav {
float: left;
width: 150px;
}
#subnav h3 {
width: 140px;
background-color: #183;
color: #fff;
font-size: .8em;
margin: 10px 10px 0px 10px;
padding: 2px 2px;
}
#subnav ul.sidenav {
width: 130px;
background-color: #ddd;
color: #000;
font-size: .8em;
margin: 0 0 0 10px;
padding: 5px 0 15px 15px;
}
#footer {
position: absolute;
bottom: 0px;
width: 800px;
background: #183;
height: 50px;
}
#footer h3 {
font-size: .65em;
color: #fff;
margin: 25px 15px;
}
img {
float: left;
margin-right: 15px;
border: none;
}
Here's what the page looks like.
Jennifer Kyrnin