1. Tech

Your suggestion is on its way!

An email with a link to:

http://webdesign.about.com/od/awdchapter9/l/blex9_3_awd.htm

was emailed to:

Thanks for sharing About.com with others!

About Web Design Book Chapter 9 - Example 9-3

The Page | The HTML | The CSS

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-2.css" rel="stylesheet" />
</head>

<body>
<div id="container">
<div id="header">
<h1>Dogs and Their Toys</h1>
<h2>Find the best dog toys and dog information at Dogs and Their Toys.</h2>
</div>
<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 id="main">
<div id="primary">
<h3>Keep Your Dog Safe</h3>
<p>Many people walk their dogs off-leash without realizing the dangers inherent in doing so. If you have been walking your dog off leash, have you thought about these things?</p>
<ul>
<li>Cars are moving objects, and dogs are often attracted to them. But if your dog chases a car or one appears out of nowhere, your dog could be seriously injured or even killed before you could do anything.</li>
<li>Other dogs, especially those on leashes, may feel threatened by your dog. If your dog runs up to a strange dog he can be bitten or worse, bite the other dog or the dog's owner. If this happens your dog could be labeled dangerous by your local government.</li>
<li>Picking up after a loose dog is very difficult. Most cities in the United States have some sort of "pooper scooper" law, and if your dog is off-leash it's a lot harder to keep track of him so you know where you need to pick up after him.</li>
</ul>
<h4>Find Out More About Dog Safety</h4>
<p>Read our many <a href="/articles/">articles</a> here on Dogs and Their Toys. Keeping your dog safe and happy should be fun for you and for your dog.</p>
</div>
<div id="secondary">
<h3>Our Featured Product</h3>
<img src="http://0.tqn.com/d/webdesign/1/0/T/5/1/dogcollar.gif" alt="Dog Collar" />
<p>
If you're looking for a new dog collar, you can't go wrong with our new featured dog collar. This collar retails for over $30, but in a special offer from Dogs and Their Toys, you can have it for
</p>
<h4>Only $15.95</h4>
<h4><a href="">BUY NOW</a></h4>
<p>Find out more about our other <a href="/products/">dog toys for sale</a> here at Dogs and Their Toys.</p>
</div>

</div>
</div>

</body>
</html>

The Style Sheet

body { background-color: #183; }
#container {
  background-color: #fff;
  width: 780px;
  background-color: #fff;
  height: 200px;
}
#header {
  float: left;
  width: 100%;
  height: 200px;
  background: #fff url(http://z.about.com/d/webdesign/1/0/V/5/1/logo.jpg) no-repeat 0 0;
}
h1 {
  float: right;
  width: 670px;
  font: bold 3em Georgia, "Times New Roman", serif;
  color: #183;
  margin: 0;
}

h2 {
  float: right;
  width: 540px;
  border: 1px solid #ccc;
  padding: 15px;
  margin-right: 15px;
}
h3, h4, a { color: #138; }
ul#navigation {
  float: left;
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #fff;
  width: 780px;
  border-bottom: 3px solid #138;
}
ul#navigation li {
   display: inline;
}
ul#navigation li a {
  padding: .25em 1em;
  margin: 0 1em 0 .25em;
  background-color: #183;
  color: #fff;
  text-decoration: none;
  float: left;
}
ul#navigation li a:link, ul#navigation li a:visited { color: #fff; }
ul#navigation li a:hover {
  color: #000;
  background-color: #eef;
}
ul#navigation li a.here, ul#navigation li a.here:hover {
  background-color: #138;
  color: #fff;
}
#main {
  float: left;
  width: 780px;
  background: #fff url(http://z.about.com/d/webdesign/1/0/U/5/1/bg1.gif) repeat-y;
  margin-bottom: 1em;
}
#primary {
  float: left;
  width: 500px;
  padding: 0 15px 15px 15px;
}
#secondary {
  float: right;
  width: 190px;
  padding: 0 10px 0 0;
}

Here's what the page looks like.

Jennifer Kyrnin

©2014 About.com. All rights reserved.