@Pertubatio: Well, I'm not fluent enough in other methods, so I'll stick to tables for now. If you have a link for some tutorial on another method, please post! And thanks for the preloader, I'll add that over the weekend.
Here's a start (I'd obviously seperate the js and css into external files):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-uk" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="author" content="" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>frecle</title>
<style type="text/css" media="screen">
<!--
body {
background: #ababab url('http://www.frecle.net/skins/better/bg.gif') top left repeat-x;
font-family: verdana, arial, helvetica, helv, sans-serif;
color: #000;
margin: 0;
padding: 0;
font-size: 0.7em;
}
a {
color:#888888;
text-decoration: none;
}
div#wrap {
margin: 0 auto;
width: 704px;
background-color: #fff;
}
div#header{
background: #fff url('http://www.frecle.net/images/frecle.png') 24px 20px no-repeat;
height: 73px;
position: relative;
border-bottom: 1px solid #dedede;
}
div#header a#logo-link {
width: 82px;
height:32px;
display: block;
top: 20px;
left: 22px;
position: absolute;
}
ul#nav {
margin: 0 0 0 24px;
padding:0;
list-style-type: none;
font-size: 1.1em;
}
ul#nav li {
float:left;
margin: 0;
padding: 9px 0 9px 50px;
/*width: 97px;*/
text-align: left;
width: inherit !important;
width: 2%;
/*border-left: 1px solid red;*/
}
ul#nav li.leftmost-nav {
padding-left: 0px;
}
ul#nav li a {
width: 100%;
height: 100%;
display: block;
}
div#main-image {
clear:both;
width: 704px;
height: 267px;
display: block;
padding: 0;
margin: 0;
background: #7089A7 url('http://www.frecle.net/images/front00.jpg') top left no-repeat;
}
div#content {
margin: 0;
padding: 20px 80px;
background: #fff url('http://www.frecle.net/skins/better/gradient.png') top left repeat-x;
}
div#content h1 {
font-size: 1.6em;
font-weight:normal;
}
ul#news-list {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#news-list li.list-item dl {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#news-list li.list-item dl dt {
width: 13%;
clear:both;
}
ul#news-list li.list-item dl dd {
width: 84%;
margin: 0;
padding-left: 4px;
border-left: 1px solid #DEDEDE;
}
ul#news-list li.list-item dl dt,
ul#news-list li.list-item dl dd {
float: left;
}
div#footer {
clear:both;
text-align: center;
padding: 60px 20px;
}
.clearing {
clear:both;
}
.access {
text-indent: -9999px;
display: block;
}
.toggle {
display: block;
}
-->
</style>
<script type="text/javascript">
<!--
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
function collapse(){
var toggleDivs = getElementsByClassName("toggle", "div", this.parentNode);
for (e in toggleDivs){
if (toggleDivs[e].style.display == "none"){
toggleDivs[e].style.display = "block";
} else {
toggleDivs[e].style.display = "none";
}
}
}
function collapseAll(){
var elements = getElementsByClassName("toggle", "div");
for(e in elements){
elements[e].style.display = "none";
}
var elements = getElementsByClassName("toggle-link", "a");
for(e in elements){
elements[e].onclick = collapse;
}
}
function init(){
collapseAll();
}
if (window.addEventListener){
window.addEventListener("load", init, false);
} else if(window.attachEvent){
window.attachEvent("onload", init);
} else {
window.onload = init;
}
//-->
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<a href="/" id="logo-link" class="access">home</a>
</div>
<ul id="nav">
<li class="leftmost-nav"><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">showcase</a></li>
<li><a href="#">community</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">about</a></li>
<li><a href="#">shop</a></li>
</ul>
<div id="main-image">
</div>
<div id="content">
<h1>news</h1>
<ul id="news-list">
<li class="list-item">
<dl>
<dt>2007.06.12</dt>
<dd><a href="#" class="toggle-link">new website!</a>
<div class="toggle">
<p>
At long last we've had the time to sit down and update our website. There are still some
things to add, such as a lot of newer projects, but we hope you like it! If you find a bug,
let us know!
</p>
</div>
</dd>
<dt>2007.05.17</dt>
<dd><a href="#" class="toggle-link">frecle does fashion with Radarstation!</a>
<div class="toggle">
<p>
Once again frecle and Radarstation join forces to create the realtime 3D show graphics
for the RCA Graduation Show! Pictures soon...
</p>
</div>
</dd>
</dl>
</li>
</ul>
</div>
<div id="footer"><a href="index.php?show=privacy">privacy policy</a> |
™ & © 2002-2007 | frecle I/S | all rights reserved</div>
</div>
</body>
</html>