About Web Design Book Chapter 9 - Example 9-1
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-1.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>
</div>
</body>
</html>
The Style Sheet
body { background-color: #183; }
#container {
background-color: #fff;
width: 780px;
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;
}
Here's what the page looks like.
Jennifer Kyrnin