About Web Design Book Chapter 7 - Example 7-6
Here is the code for example 7-6 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>Contact Dogs and Their Toys</title>
<meta name="description" content="Send your question to the Dogs and Their Toys team." />
<meta name="keywords" content="dogs, dog toys, canines, information about dogs, dog help, contact us" />
<link type="text/css" href="zexample7-6.css" rel="stylesheet" />
</head>
<body>
<div id="whole">
<div id="subcol">
<img src="http://z.about.com/d/webdesign/1/0/S/2/1/dogs_and_toys_logo.jpg" alt="The Dogs" width="178" height="200" />
<h2>About This Site</h2>
<p>
The Dogs and Their Toys Web site was created in honor of Shasta and McKinley. While the two dogs may find each other more exciting than most toys, there are certain toys that they especially love. DaTT was founded in 2006, blah blah blah blah blah.
</p>
</div>
<div id="maincol">
<div id="innercol">
<h1>Dogs and Their Toys</h1>
<h2>Contact Us</h2>
<form action="mailto:webdesign.guide@about.com" method="get" enctype="text/plain">
<label accesskey="n" for="name">Name:
<input type="text" name="name" id="name" value="" size="40" /></label><br />
<label accesskey="e" for="email">Email:
<input type="text" name="email" id="email" value="" size="40" /></label><br />
Do you want a reply?
<label accesskey="y"><input type="radio" name="reply" id="reply" value="yes" /> Yes</label>
<label accesskey="n"><input type="radio" name="reply" id="reply" value="no" /> No</label><br />
What is your message?<br />
<textarea name="message" id="message" rows="10" cols="35"></textarea><br />
<input type="submit" value="Send Message" />
<input type="reset" value="Clear Form" />
</form>
</div>
<div id="outercol"></div>
</div>
</div>
</body>
</html>
Replace the title and meta tags with your own site content.
The Stylesheet (CSS)
html, body { margin: 0px; }
html { background-color : #fff; }
body { font: normal 1em Geneva, Arial, Helvetica; }
#whole { width: 800px; }
#subcol {
float: left;
width: 180px;
}
#maincol {
float: right;
width: 610px;
}
Here's what the page looks like.
Jennifer Kyrnin