This is not the prettiest page; nor is it the best designed. What it shows, however, is a very simple pure-CSS design. Some key features include:
Source code for this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centered Layout with CSS Template</title>
<style type="text/css" media="screen">
<!--
body { /* this is the entire page */
font-family: Arial, Helvetica, sans-serif;
}
#container { /* this is the holder for the page content */
width: 748px;
border: 2px solid #ffcc66;
background-color: #fffff0;
padding: 3px; /* pad the content a little */
margin: 0px auto; /* this centers the container */
}
#header { /* this affects the whole header */
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
background-color: #ffe6ab;
}
#header h1 { /* this only affects any h1 tags within the header */
margin: 0; /* remove extra margin from h1 */
padding: 0; /* remove extra padding from h1 */
border-bottom: 1px dotted #ffcc66; /* bottom border of header */
font-weight: normal; /* remove bold from h1 tag */
text-align: center; /* center the text */
}
#footer {
border-top: 1px dotted #ffcc66; /* top border of footer */
font-size: 60%; /* make the text smaller than body */
color: #999999; /* set the text color to gray */
text-align: right; /* right justify the text */
}
#footer a {
text-decoration: none;
border-bottom: 1px dotted #999; /* shorthand for #999999 */
color: #999;
}
#footer a:hover { border-bottom-style: solid; }
-->
</style>
<style type="text/css" media="print">
<!--
footer { display: none; }
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Centered Layout with CSS Template </h1>
</div>
<div id="contents">
<p>This is not the prettiest page; nor is it the best designed. What it shows, however, is a very simple pure-CSS design. Some key features include:</p>
<ul>
<li>Container holding header/content/footer.</li>
<li>Font and flow adjustments within specific regions.</li>
<li>Footer doesn't print when the page is printed and none of the other formatting is applied to the printed page.</li>
</ul>
<p><strong>Source code for this page:</strong></p>
<?php show_source(basename($_SERVER['PHP_SELF'])); ?>
</div>
<div id="footer"><a href="http://www.miraclesalad.com/">miraclesalad.com</a>, Last Updated: <?php echo date('F j, Y',filemtime(basename($_SERVER['PHP_SELF']))); ?></div>
</div>
</body>
</html>