Um mal auf den Punkt zu bringen was an deinem bisherigen Ansatz nicht so gut ist und ich zur Zeit sehr viel Freizeit habe und mich infolge dessen auch entsprechend langweile, habe ich mir mal die Mühe gemacht dir ein fertiges HTML als Antwort zu schreiben, in dem auch die Bemerkungen meiner Vorredner miteingeflossen sind:
<!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" xml:lang="de" lang="de"><head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
[code lang=css]* {margin:0;padding:0;}
body { font-family:verdana,arial,sans-serif; }
#wrapper { width:100%; background:#999; }
#navigation { width:100%; list-style:none; }
#navigation li { float:left; border:1px dotted #f00; }
#navigation li a { color:#fff; background:#66f; text-decoration:none; padding:.5em 1em; display:block; }
#navigation li a:hover { background:#000; }
#navigation li a.active,
#navigation li a.active:hover { background:#ec6e13; }
#navigation:after { content:"."; display:block; width:100%; clear:both; height:0; visibility:hidden; }
</style>
</head>
<body>
<div id="wrapper">
<!-- hier kannst du alles oben hinmachen... -->
<p>oben</p>
<ul id="navigation">
<li><a href="">Äpfel</a></li>
<li><a href="">Birnen</a></li>
<li><a href="">Erdbeeren</a></li>
<li><a href="" class="active">Bananen</a></li>
<li><a href="">Kirschen</a></li>
</ul>
<!-- hier kann dann alles unten hin -->
<p>unten</p>
</div>
</body>
</html>[/code]
mfG Felix Nehrke
P.S.: Besuche unseren Blog: http://www.pommes-blog.de
Manchmal gibs was neues :)
fo:| ch:| rl:( br:> n4:? ie:( va:) de:> zu:) fl:( ss:| ls:[ js:)