<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example HTML/CSS Layout for brian by Dan Schulz</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="Keywords go here" />
<meta name="description" content="A description of this page goes here." />
<link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen,projection" />
<style type="text/css">
* { /* sets the margins and padding on everything to zero - these are the ONLY things that should be ever set with this "universal" selector */
margin:0;
padding:0;
}
html, body {
height: 100%; /* LEAVE THIS ALONE */
}
body {
background: #EEE;
color: #000;
font: normal 14px/18px tahoma, verdana, arial, helvetica, sans-serif;
}
img {
border: 0; /* squashes a Firefox bug - yes even Firefox has bugs */
vertical-align: bottom; /* squashes an IE 5/6 bug */
}
#container {
min-height:100%;
}
* html #container {
height:100%; /* IE 5.x and 6 treat height as min-height */
}
#header {
background: #FCF;
color: inherit;
height: 80px;
overflow: hidden; /* this forces IE 5.x and 6 to treat height as HEIGHT */
}
#wrapper { /* this is technically a "clearer-div" but I used it as a wrapper to allow for extra styling */
float: left;
padding-bottom: 32px; /* set to height and margin on footer */
width: 100%; /* DO NOT TOUCH THIS - EVER */
}
#menu {
background: #FCC;
color: inherit;
float: right;
list-style: none; /* removes the bullets from the list items */
width: 150px;
}
#menu li {
float: left;
padding-bottom: 1px;
}
#menu a {
background: #FCC;
color: inherit;
display: block; /* lets you click anywhere on the link */
padding: 4px 8px;
text-decoration: none; /* removes the underline from the links */
width: 134px; /* IE will mouseover highlight but not let you click link in 'non-text' area unless you set width */
}
* html #menu a { /* Simplified Box Model Hack for IE 5/5.5 */
width: 144px; /* special value for IE 5/5.5 */
w\idth: 134px /* correct value for IE 6 and 7 */
}
#menu a:active, /* sets background color for active, focus and hover states */
#menu a:focus,
#menu a:hover {
background: #FF0;
color: #000;
}
h1 {
background: #FFF;
clear: both;
color: inherit;
font-size: 1.75em;
line-height: 1.8em;
padding: 0 8px;
}
h2 {font-size: 1.5em;}
h3 {font-size: 1.05em;}
h4 {font-size: 0.95em;}
h5 {font-size: 0.85em;}
h6 {font-size: 0.75em;}
#content {
margin-right: 158px;
}
#content .section {
background: #BCF;
color: inherit;
margin-bottom: 8px;
padding: 0 8px; /* sets left and right padding to 8px each */
}
#content p {
padding-bottom: 8px;
}
#content h2 {
border-bottom: 1px solid #000;
margin-bottom: 8px;
padding: 8px 0;
}
#footer {
background: #8EF;
color: inherit;
float: left; /* LEAVE THIS ALONE */
font: normal 12px/16px tahoma, verdana, arial, helvetica, sans-serif;
margin-top: -32px; /* pushes footer over the bottom padding on #container */
padding: 8px 0;
text-align: center;
width: 100%; /* LEAVE THIS ALONE */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="/images/logo.png" width="300" height="80" alt="Web Site Logo" title="" />
</div>
<div id="wrapper">
<h1>Web Page Title</h1>
<ul id="menu">
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul>
<div id="content">
<div class="section">
<h2>Section Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
vel, commodo bibendum, est.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
vel, commodo bibendum, est.
</p>
</div>
<div class="section">
<h2>Section Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
vel, commodo bibendum, est.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
vel, commodo bibendum, est.
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>
Copyright ยฉ 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting
Children Reserved.
</p>
</div>
</body>
</html>
