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