how about something like this (as a start):
<!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" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Language" content="en-uk" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css">
<!--
body {
background: #fff url('http://jomho.com/GRAPHICS/BG.gif');
font-size: 0.9em;
font-family: verdana, helvetica, helv, arial, sans-serif;
margin:0;
padding: 0;
}
div#wrap {
border: 1px solid #606060;
margin: auto;
width: 750px;
background-color: #fefefe;
}
div#header {
padding: 0;
margin: 0;
background: #606060;
}
h1#logo {
width: 100%;
height: 100px;
background: #606060 url('http://jomho.com/GRAPHICS/Banner.gif') top left no-repeat;
padding: 0;
margin: 0;
padding-bottom: 10px;
}
h1#logo a{
width: 300px;
height: 100px;
display:block;
}
div#nav-container{
width: 100%;
margin:0;
padding: 10px 0;
background: #707070;
border-top: 1px solid #f0f0f0;
}
ul#nav{
list-style-type: none;
margin:0 60px 0 60px;
padding: 0;
background-color: #707070;
float:left;
}
ul#nav li {
padding: 0;
margin: 0;
float:left;
}
ul#nav li a {
color: #fff;
text-decoration:none;
font-weight: bold;
padding: 5px 10px;
margin: 0;
}
ul#nav li a:hover {
color: #ea5e00;
background-color: #fff;
padding: 5px 10px;
margin: 0;
}
ul#nav li#nav-selected a{
color: #ea5e00;
background-color: #f4f4f4;
border: 1px solid #555;
}
div#content {
clear:both;
}
div #footer {
clear:both;
background-color:#999999;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 0.9em;
padding: 5px;
}
a {
}
.access-text {
display:none;
}
.left {
float:left;
}
div#content {
padding: 10px;
}
div#content div.box {
border: 1px solid #606060;
background: #f4f4f4;
margin: 25px 50px;
}
div#content div.box div.box-content{
padding: 5px;
margin: 0;
}
div#content div.box h3 {
color: #fff;
background-color: #ea5e00;
border-bottom: 1px solid #000;
margin: 0;
padding: 5px 10px;
}
span.clearing {
clear:both;
display:block;
}
ul#screenshot-list {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#screenshot-list li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#screenshot-list li ul li {
float:left;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo"><a href="http://jomho.com"><span class="access-text">Jomho Software Development</span></a></h1>
<div id="nav-container">
<ul id="nav">
<li id="nav-selected"><a href="#">Home</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Links</a></li>
</ul>
<span class="clearing"></span>
</div>
</div>
<div id="content">
<div class="box">
<h3>Welcome!</h3>
<div class="box-content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur a lacus eget est sodales condimentum.
Sed vel arcu egestas nunc sagittis feugiat. Nulla malesuada nonummy dui. Nunc augue sapien, pulvinar vel,
lacinia vel, tincidunt eget, nunc. Aenean dignissim lectus vitae leo consequat fringilla. Quisque eget elit
id est aliquam hendrerit. Phasellus dictum aliquet elit. Sed vulputate, pede at ullamcorper interdum, eros
lectus aliquam nisl, non feugiat diam enim et orci. Phasellus nec turpis. Nunc imperdiet quam vitae augue.
Sed et nisi at lectus varius commodo.
</p>
</div>
</div>
<div class="box">
<h3>News</h3>
<div class="box-content">
<p>
Proin at sapien. Maecenas eu nisi id lacus vestibulum mollis. Proin euismod fringilla felis. Nullam eget lorem.
Praesent pulvinar, velit et semper auctor, mauris ligula mattis augue, ac pulvinar elit diam vitae lectus.
Praesent sed ante in lectus pellentesque porta. Vestibulum orci arcu, luctus sed, sodales in, mollis a, augue.
Etiam egestas cursus ipsum. Ut eleifend. Morbi ac metus id diam dignissim porttitor. Etiam laoreet interdum metus.
In sodales. Vestibulum gravida. Quisque eget justo. Mauris faucibus justo sit amet urna. Ut nisi risus, dictum non,
mattis in, eleifend ut, lorem. Quisque tempus nisi eget risus.
</p>
</div>
</div>
<div class="box">
<h3>Screenshots</h3>
<div class="box-content">
<p>
Vestibulum at urna in risus consequat gravida. Donec hendrerit, risus ut euismod porta, odio tortor mollis mi,
ac malesuada nisl felis eget nisi. Maecenas ipsum. Sed libero tortor, ullamcorper non, interdum a, imperdiet non,
neque. Nunc lacus libero, hendrerit vitae, blandit sit amet, viverra sit amet, magna. Praesent faucibus tempus tortor.
Etiam dui. Mauris dapibus, nisl ut fermentum fringilla, arcu leo luctus lorem, ut pulvinar arcu enim quis sapien.
In feugiat lacinia ante. Nullam placerat purus at elit. Phasellus aliquet. Nullam sagittis nunc vel neque.
</p>
</div>
<ul id="screenshot-list">
<li>
<ul>
<li><a href="#"><img src="http://jomho.com/GRAPHICS/Screenshots/Screenshot_003_L.gif" width="50" height="50" border="0" alt="Screenshot of my game" /></a></li>
<li><a href="#"><img src="http://jomho.com/GRAPHICS/Screenshots/Screenshot_003_L.gif" width="50" height="50" border="0" alt="Screenshot of my game" /></a></li>
</ul>
</li>
</ul>
<span class="clearing"></span>
</div>
</div>
<div id="footer">
© 2006 Jomho Software Development - All Rights Reserved
</div>
</div>
</body>
</html>
I would switch the stylesheet from inline to external (use
<link rel="stylesheet" href="css/your-stylesheet.css" />
)
I think the orange is a little dark on that grey, but it would probably look good at about #eaab00
You should ideally use all lowercase for filenames as well (case issues have already hit you (with the background)).