rendered paste body--style.css--
/* Format for the main layout */
body {
margin: 0px 0px 0px 0px;
padding-top: 0px;
padding-left: 0px;
font-family: bitstream vera sans,ariel,sans-serif;
color: #000000;
background-color: #808080;
font-size: medium;
text-align: left;
}
.container {
position: absolute;
margin: 5px 0px 5px 0px;
height: 100%;
padding: 10px 10px 10px 10px;
background-color: #808080;
color: #000000;
}
.body {
min-height: 450px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
font-family: bitstream vera sans,ariel,sans-serif;
color: #000000;
background-color: #feffee;
border-left: 1px solid black;
border-right: 1px solid black;
}
.header {
margin: 0px 0px 0px 0px;
top: 0;
left: 0;
padding-left: 10px;
padding-right: 10px;
border: 1px solid black;
border-bottom: 2px solid black;
font-family: monospace;
color: #414141;
font-size: 36px;
height: 1.5em;
background-color: #c7c7c8;
}
.clock {
float: right; padding-top: 10px;
padding-right: 10px;
font-family: bitstream vera sans,ariel,sans-serif;
text-align: right;
font-size: 12px;
}
.footer {
margin: 0;
bottom: 0;
left: 0;
padding: 10px;
border: 1px solid black;
border-top: 2px solid black;
font-style: italic;
text-align: left;
color: #414141;
background-color: #c7c7c8;
}
.footer img {
border: 0px;
}
.validator {
float: left;
}
.copyright {
text-align: right;
font-style: italic;
color: #414141;
position: relative;
}
/* Menu stuff */
.menu_spacer {
visibility: hidden;
margin: 0px 10px 0px 10px;
width: 100em;
}
.menu {
float: left;
background-color: #c7c7c7;
left: 0;
margin: 10px 10px 0px 10px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
border: 1px solid black;
font-family: monospace;
text-align: center;
font-size: 14px;
width: 9em;
padding-left: 0;
padding-right: 0;
}
.menu a:link, a:visited {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: green;
}
.menu_title {
width: 100%;
height: 1.2em;
border-top: 1px solid black;
border-bottom: 2px solid black;
background-color: #909090;
color: #000000;
font-weight: bold;
font-size: 14px;
}
------------
--index.html--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>grayserv.com - KahdgarXI's little hole on the Internet</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="clock">
Thu, Jan 20, 2005</div>
<div class="header">
grayserv.com
</div>
<div class="menu">
<div class='menu_title'>Navigation</div>
<a href="index.php?page=main">Home</a><br />
<a href="index.php?page=me">About Me</a><br />
<a href="index.php?page=shots">Screenshots</a><br />
<a href="http://mail.grayserv.com">Mail Login</a><br />
<div class='menu_title'>Resources</div>
<a href="http://www.gentoo.org">gentoo</a><br />
<a href="http://www.w3c.org">W3C</a><br />
<div class='menu_title'>Friends</div>
<a href="http://fla-hosting.net">sthauck</a><br />
</div>
<div class="body">
This page will have screenshots.
</div>
<div class="footer">
<div class="validator">
<a href="http://validator.w3.org/check?uri=referer">
<img class='valid' src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" />
</a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.grayserv.com/index.php">
<img class='valid' src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</div>
<div class="copyright">
Designed and coded by JD Gray (KahdgarXI)<br />
(C) 2004
</div>
</div>
</div>
</body>
</html>