spotlight: Grundgerüst meiner seite

Beitrag lesen

Was könnte ich besser/anders machen. Bin um jeden vorschlag dankbar.

der HTML code:

<!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>Home</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
</head>
<body>
<div id="header">
<table cellpadding="0" cellspacing="0">
 <tr>
  <td class="headleft"><a href="http://bnrails.com" title="BN Rails"><img src="images/bnrails_logo.png" alt="BN RAILS.com" /></a></td>
  <td class="headright"><img src="images/bn_logo.png" alt="BN Logo" /></td>
 </tr>
</table>
</div>
<table class="header2table" cellpadding="0" cellspacing="0">
 <tr>
  <td class="header2left">This web site is dedicated to my H0 scale modelrailroad based on Burlington Northern prototype.</td>
 </tr>
</table>
<div id="main">
<table cellpadding="0" cellspacing="0">
 <tr>
  <td class="navi">
<div id="navcontainer">
<!-- Start Navigation -->
<ul>
<li><a href="" rel="self" id="current">Home</a></li>
<li><a href="news/" rel="self">News</a></li>
<li><a href="layout/" rel="self">Layout</a></li>
<li><a href="roster/" rel="self">Roster</a></li>
<li><a href="links/" rel="self">Links</a></li>
<li><a href="contact/" rel="self">Contact Me</a></li>
</ul>
</div>
<!-- End navigation -->
</td>
  <td class="content">CONTENT</td>
 </tr>
</table>
</div>
<table class="footertable" cellpadding="0" cellspacing="0">
 <tr>
  <td class="footerleft">FOOTERLEFT</td>
  <td class="footerright"><a href="http://store.apple.com" title="Apple Store"><img src="images/madeonamac.gif" alt="Made on a Mac" /></a></td>
 </tr>
</table>
</body>
</html>

der CSS code.

body {
 margin: 0px;
 padding: 0px;
}

img {
 text-align: center;
 vertical-align: middle;
 border: 0px;
 border-style: none;
}

#header {
 background: #ffffff;
 height: 50px;
 border-right: solid #aaaaaa 0px;
}

.headleft {
 height: 50px;
 width: 600px;
 text-align: left;
}

.headright {
 width: 200px;
 text-align: right;
}

.header2table {
 background: #eeeeee;
 height: 20px;
 border-right: solid #aaaaaa 1px;
}

.header2left {
 background: #eeeeee;
 color: #444444;
 height: 20px;
 width: 789px;
 font-size: small;
 text-align: right;
 padding-right: 10px;
}

#main {
}

/*   - - - - - - -   NAVI GROUP   - - - - - - -   */

.navi {
 background: #eeeeee;
 color: #000000;
 font-size: normal;
 width: 120px;
 vertical-align: top;
 border-right: solid #aaaaaa 1px;
 border-top: solid #aaaaaa 1px;
}

#navcontainer #current {
 text-decoration: none;
 background: url(images/button_over.png) repeat-x;
 color: #a90700;
 font-weight: bold;
 width: 120px;
}

#navcontainer ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}

#navcontainer a {
 display: block;
 text-decoration: none;
 background: url(images/button_normal.png) repeat-x;
 color: #21536a;
 font-weight: bold;
 padding: 4px;
 border-bottom: solid #aaaaaa 1px;
}

#navcontainer a:hover {
 background: url(images/button_over.png) repeat-x;
}

.content {
 background: #ffffff;
 width: 660px;
 height: 500px;
 border-right: solid #aaaaaa 1px;
 border-top: solid #aaaaaa 1px;
 padding-left: 10px;
}

.content_car {
 background: #ffffff;
 width: 671px;
 border-right: solid #aaaaaa 1px;
 border-top: solid #aaaaaa 1px;
 padding-left: 10px;
}

.content_contact {
 background: #ffffff;
 width: 650px;
 height: 500px;
 border-right: solid #aaaaaa 1px;
 border-top: solid #aaaaaa 1px;
 padding-left: 10px;
 padding-right: 10px;
}

.footertable {
 background: #eeeeee;
 height: 50px;
 border-right: solid #aaaaaa 1px;
 border-top: solid #aaaaaa 1px;
}

.footerleft {
 height: 50px;
 width: 688px;
 text-align: left;
}

.footerright {
 height: 50px;
 width: 110px;
 text-align: center;
 border-left: solid #aaaaaa 1px;
}

vielen dank im voraus.

mfg kon