About Web Design Book Chapter 8 - Example 8-4
Here is the code for example 8-4 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-4.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: #63c;
font-weight: bold;
text-align: center;
background: #fff url(http://z.about.com/d/webdesign/1/0/a/3/1/navbg.gif);
}
ul#navigation li a:hover {
background: #fff url(http://z.about.com/d/webdesign/1/0/_/3/1/navbg_over.gif);
color: #000;
}
Here's what the page looks like.
Jennifer Kyrnin