Gumbo
Erfahrenes Mitglied
Mein Vorschlag:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jans Website</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border-style: none;
}
html {
height: 100%;
}
body {
text-align: left;
font-size: 11px;
font-family: verdana, sans-serif;
background-color: #78b;
}
#wrapper {
position: relative;
width: 770px;
height: 100%;
margin: 0 auto;
border: solid #124;
border-width: 0 1px;
}
#header {
height: 100px;
background: #78b url(../bilder/hintergrund.png) repeat-y 50% 0;
border-bottom: 2px solid #124;
}
#nav-main {
list-style: none;
height: 20px;
border-bottom: 2px solid #124;
background-color: #89c;
}
#nav-main li {
float: left;
width: 110px;
height: 20px;
line-height: 20px;
text-align: center;
color: #cce;
background-image: url(../bilder/button_n.png);
}
#nav-main li a {
display: block;
}
#nav-main li a:link,
#nav-main li a:visited {
text-decoration: none;
color: #cce;
border: solid #124;
border-width: 0 1px;
}
#nav-main a:hover {
color: #248;
background-image: url(../bilder/button_h.png);
}
#nav-supplementary {
list-style: none;
position: absolute;
top: 2px;
}
#nav-supplementary li a {
display: block;
margin-bottom: 1px;
width: 80px;
height: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="http://people.freenet.de/jan-bracker/bilder/banner.png" alt="Jans Website – Banner">
</div>
<ul id="nav-main">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Links</a></li>
<li><a href="index.php">Webdesign</a></li>
<li><a href="index.php">Programmieren</a></li>
<li><a href="index.php">Witze</a></li>
<li><a href="index.php">Forum</a></li>
<li><a href="index.php">Mitglieder</a></li>
</ul>
<div id="content">
<p>Willkommen auf meiner Website</p>
</div>
<ul id="nav-supplementary">
<li><a href="#"><img src="bilder/valide_html.png" alt="HTML Valide"></a></li>
<li><a href="#"><img src="bilder/valide_css.png" alt="CSS Valide"></a></li>
<li><a href="#"><img src="bilder/valide_firefox.png" alt="Firefox"></a></li>
<li><a href="#"><img src="bilder/valide_mozilla.png" alt="Mozilla"></a></li>
<li><a href="#"><img src="bilder/valide_ie.png" alt="Internet Explorer"></a></li>
<li><a href="#"><img src="bilder/valide_opera.png" alt="Opera"></a></li>
</ul>
</div>
</body>
</html>
