Sorry for the double post, the edit time expired.
This is where I'm at at the moment with my documents.
My xhtml probably could be cleared up a bit though.
<!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">
<head>
<title>JamminGames</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function show_alert()
{
alert("Please write a review, if you haven't already, at: www.jammingames.uk.to/scripts/reviews.php." + '\n' + "" + '\n' + "Also, add yourself to the site, if you haven't already, at: www.jammingames.uk.to/index.php#member");
}
</script>
</head>
<body>
<div id="container">
<div id="header_wrap">
<div id="menu_wrap">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Clans</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
</div>
</div>
<div id="header">
</div>
</div>
<div id="sidebar">
<div id="roster">
<div class="roster">
<h2><span>New</span> Games</h2>
<a href="http://modernwarfare2.net/">
<img src="http://www.jammingames.uk.to/menu/i/mw.jpg" alt="MW2" />
MW2
<img src="http://www.jammingames.uk.to/menu/i/am.gif" alt="America" />
</a>
</div>
<div class="roster">
<a href="http://halo.xbox.com/en-us/games/halo3/">
<img src="http://www.jammingames.uk.to/menu/i/h3.jpg" alt="Halo 3" />
Halo 3
<img src="http://www.jammingames.uk.to/menu/i/am.gif" alt="America" />
</a>
</div>
<div class="roster">
<a href="http://us.blizzard.com/en-us/games/wrath/">
<img src="http://www.jammingames.uk.to/menu/i/wow.jpg" alt="WoW" />
WoW
<img src="http://www.jammingames.uk.to/menu/i/am.gif" alt="America" />
</a>
</div>
<div class="roster">
<a href="http://us.blizzard.com/en-us/games/d2/">
<img src="http://www.jammingames.uk.to/menu/i/d2.jpg" alt="D2" />
Diablo 2
<img src="http://www.jammingames.uk.to/menu/i/am.gif" alt="America" />
</a>
</div>
<div class="roster">
<a href="http://us.blizzard.com/en-us/games/war3/">
<img src="http://www.jammingames.uk.to/menu/i/wc.jpg" alt="Wc3" />
Warcraft 3
<img src="http://www.jammingames.uk.to/menu/i/am.gif" alt="America" />
</a>
</div>
<div class="roster">
<a href="http://us.blizzard.com/en-us/games/sc/">
<img src="http://www.jammingames.uk.to/menu/i/sc.jpg" alt="Starcraft" />
Starcraft
<img src="http://www.jammingames.uk.to/menu/i/am.gif" alt="America" />
</a>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div id="validation">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</div>
<div id="alert_button">
<input type="button" onclick="show_alert()" value="Reminder" />
</div>
</div>
</div>
</body>
</html>
body {
background:url(images/Layer-1.png);
margin:0px;
padding:0px;
}
#container {
width:770;
height:auto;
margin:0 auto;
position:relative;
}
h2 span {
color: #3d3a33;
}
/****************************
Header_Wrap
****************************/
#header_wrap{
position: absolute;
left: 300px;
top: 61px;
background:url(images/Layer-4.png) no-repeat center;
margin:0 auto;
width:770px;
height:291px;
}
/****************************
Menu
****************************/
#menu_wrap {
position: absolute;
width:100%;
height:41px;
padding:2px;
}
#menu {
width:770px;
height:22px;
margin:0 auto;
}
#menu ul {
padding:0px;
list-style:none;
}
#menu li {
margin:0px;
padding:0px;
display:inline;
}
#menu a {
display:block;
height:22px;
width:85px;
padding:20px 0 0 0;
float:left;
background:url(menu.gif) bottom no-repeat;
text-align:center;
text-decoration:none;
color:#000000;
}
#menu a:hover {
color:#000000;
background:url(menu_hover.gif) bottom no-repeat;
}
/****************************
Header
****************************/
#header {
background:url(Header.jpg) no-repeat;
position: absolute;
left:300px;
top: 120px;
width:770px;
height:250px;
}
/****************************
Content
****************************/
#content {
position: absolute;
left: 250px;
top: 0px;
width:875px;
height:706px;
margin:0 auto;
background:url(images/Layer-2.png);
}
/****************************
Footer
****************************/
#footer {
position: absolute;
left: 160px;
top: -260px;
width:969px;
height:1164px;
background:url(images/Layer-3.png);
}
/****************************
Other
****************************/
#validation {
position:fixed;
bottom:0px;
right:0px;
}
#alert_button {
position:fixed;
bottom:28px;
right:0px;
}
/****************************
Header
****************************/
#sidebar {
position:absolute;
float: left;
left: 50px;
top:400px;
width: 220px;
background: #616161;
}
#sidebar h2 {
height: 26px;
line-height: 26px;
background: url('i/h2-sidebar.gif') no-repeat;
padding: 0 22px;
font-size: 1.2em;
color: #540000;
font-weight: bold;
clear: both;
}
#roster {
width: 219px;
height: 200px;
margin: 0 0 0 1px;
overflow: hidden;
background: url('i/roster.gif') no-repeat;
}
#roster .roster {
width: 73px;
float: left;
height: 85px;
padding: 10px 0 0 0;
text-align: center;
}
#roster a {
color: #fff;
text-decoration: none;
}
#sidebar img {
margin: 0 0 0 2px;
display: block;
}
#roster img {
margin: 0 auto;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li {
height: 22px;
line-height: 20px;
font-size: 0.9em;
color: #fff;
background: url('i/server-list.gif') no-repeat;
padding: 0 5px 0 7px;
}
#sidebar ul li span {
float: left;
display: block;
width: 50px;
}
