About Web Design Book Chapter 7 - Example 7-7
Here is the code for example 7-7 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-7.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">
<h2>Contact Information</h2>
<h3>Main Contacts</h3>
<p>Shasta and McKinley love to give advice to other dogs about how to use the toys they recommend. If you have any questions about the products or articles on this site, don't hesitate to let us know.</p>
<ul>
<li><a href="mailto:shasta@dogs and their toys .com">Shasta</a></li>
<li><a href="mailto:mckinley@dogs and their toys .com">McKinley</a></li>
<li><a href="mailto:webmaster@dogs and their toys .com">Webmaster</a></li>
</ul>
<h3>Mailing Information</h3>
<p>
Shasta and McKinley<br />
Dogs and Their Toys .com
1234 Dogs Street
Anytown, USA 12346
</p>
<h3>Call Shasta!</h3>
<p>1-800-Dogs and Toys</p>
</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;
border: solid 1px red;
}
#maincol {
float: right;
width: 610px;
border: dotted 1px red;
}
#innercol {
float: left;
width: 400px;
border: solid 1px blue;
}
#outercol {
float: right;
width: 200px;
border: dashed 1px blue;
}
Here's what the page looks like.
Jennifer Kyrnin