About Web Design Book Chapter 8 - Example 8-3
Here is the code for example 8-3 in the About Web Design book.
The Page | The HTML | The Stylesheet
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 Navigation</title>
<link type="text/css" href="zexample8-3.css" rel="stylesheet" />
</head>
<body>
<ul id="navigation">
<li><a href="/index.html">Home</a></li>
<li><a href="/products/index.html">Dog Toys for Sale</a></li>
<li><a href="/articles/index.html">Dog Information</a></li>
<li><a href="/about/index.html">About this Site</a></li>
</ul>
</body>
</html>
If you notice, the HTML hasn't changed from the first example.
The Stylesheet (CSS)
ul#navigation {
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
margin: .1em 0;
}
ul#navigation li a {
display: block;
width: 175px;
height: 20px;
text-decoration: none;
color: #000;
font-weight: bold;
text-align: center;
background: #6c9;
}
ul#navigation li a:hover {
background: #99f;
color: #000;
}
Here's what the page looks like.
Jennifer Kyrnin