Hier schau mal das hab ich mal auf die schnelle gemacht:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Choast-kun</title>
<link href="http://darkchaos.ath.cx/glados/themes/choast/main.css" rel="stylesheet" type="text/css" />
<script src="http://darkchaos.ath.cx/glados/core/lib/jquery/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://darkchaos.ath.cx/glados/core/lib/jqueryui/jqueryui.js" type="text/javascript"></script>
<link href="http://darkchaos.ath.cx/glados/core/lib/jqueryui/ui.css" type="text/css" rel="stylesheet" />
<script src="http://darkchaos.ath.cx/glados/core/lib/shadowbox/shadowbox.js" type="text/javascript"></script>
<link href="http://darkchaos.ath.cx/glados/core/lib/shadowbox/shadowbox.css" type="text/css" rel="stylesheet" />
<link href="http://darkchaos.ath.cx/glados/themes/choast/blog.css" rel="stylesheet" type="text/css" />
<link href="http://darkchaos.ath.cx/glados/themes/choast/class.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
// Das #menu clonen und in den BODY TAg an letzter stelle rein CLONEN =)
// Wenn jetzt JS aus ist erscheint nur das #menu wenns an ist erscheint auch die #navigation
$('#menu').clone().appendTo('body').attr({'id':'navigation'});
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({ 'margin-left':'-85px' },d+=150);
});
$('#navigation > li').hover( function () {
$('a',$(this)).stop().animate({ 'margin-left':'0px' },200);
}, function () {
$('a',$(this)).stop().animate({ 'margin-left':'-85px' },200);
}
);
});
});
</script>
<style type="text/css">
/* start: NAVI -------------------------------------------------- */
/*
Wenn die Navigation Seitlich zentriert sein soll!
top: 50%;
margin:-280px 0 0 0;
Wenn Sie nur oben stehen soll einfach das hier verwenden:
top: 10px;
margin:0;
*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
left: 0px;
top: 50%;
margin:-280px 0 0 0;
list-style: none;
z-index:999999;
width:auto;
}
ul#navigation li {margin-bottom:5px;}
ul#navigation li a {
display: block;
color:#000000;
margin-top: 0px;
height: 25px;
width:100px;
background-repeat:no-repeat;
background-position:50% 10px;
background-color:#e7f2f9;
border:1 solid #bddcef;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:85px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{background-color:#cae3f2;}
ul#navigation .home a{background-image: url(http://darkchaos.ath.cx/glados/themes/choast/images/logos/settings.png);}
ul#navigation .about a{background-image: url(http://darkchaos.ath.cx/glados/themes/choast/images/logos/notes.png);}
ul#navigation .search a{background-image: url(http://darkchaos.ath.cx/glados/themes/choast/images/logos/notes.png);}
ul#navigation .podcasts a{background-image: url(http://darkchaos.ath.cx/glados/themes/choast/images/logos/ipod.png);}
ul#navigation .rssfeed a{background-image: url(http://darkchaos.ath.cx/glados/themes/choast/images/logos/weather.png);}
ul#navigation .photos a{ background-image: url(http://darkchaos.ath.cx/glados/themes/choast/images/logos/maps.png);}
ul#navigation .contact a{background-image: url(http://darkchaos.ath.cx/glados/themes/choast/images/logos/chat.png);}
/* ende: NAVI --------------------------------------------------- */
/* start: MENU -------------------------------------------------- */
#menu {
position:absolute;
top:45px;
left:-20px;
text-align:left;
}
#menu ul {
list-style:none;
padding:0;
margin:0;
}
#menu li {
list-style:none;
display:inline-block;
border-right: 1px solid #2C080D;
padding:0 5px 0 0;
margin:0 2px 0 0;
line-height:14px;
}
#menu li.last {border-right: none;}
/* ende: MENU --------------------------------------------------- */
</style>
</head>
<body>
<div id="wrapper">
<div id="head_left">
<ul id="menu">
<li class="home"><a href="#">News</a></li>
<li class="about"><a href="#">Blog</a></li>
<li class="search"><a href="#">Gästebuch</a></li>
<li class="photos"><a href="#">Über mich</a></li>
<li class="contact last"><a href="#">Impressum</a></li>
</ul>
</div>
<div id="head_right"></div>
<div id="content">
<p>
Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur,<br />
weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und<br />
Schmerz ihm große Freude bereiten können.<br />
Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender<br />
körperlicher Betätigung, außer um Vorteile daraus zu ziehen?<br />
Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft,<br />
eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz<br />
vermeidet, welcher keine daraus resultierende Freude nach sich zieht?<br />
Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur,<br />
weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen<br />
und Schmerz ihm große Freude bereiten können.<br />
Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender<br />
körperlicher Betätigung, außer um Vorteile daraus zu ziehen?<br />
Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft,<br />
eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz<br />
vermeidet, welcher keine daraus resultierende Freude nach sich zieht?<br />
Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur,<br />
weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen<br />
Mühen und Schmerz ihm große Freude bereiten können.
</p>
</div>
<div id="sidebar"></div>
<div id="render"><img src="http://darkchaos.ath.cx/glados/themes/choast/images/render/maka_01.png" alt="render" /></div>
</div>
</body>
</html>
Ich würde ja die ganze Navigation mit jQuery erzeugen. Den sonst hast du zweimal die gleiche Navigation im Quellcode. Ich hab’s mal für dich eingebunden 
Ach übrigens wenn du in CSS einen PX Wert angibst, brauchst du bei 0 keine Maßeinheit anhängen. Wenn aber (-)1 oder größer enthalten sind musst du eine Maßeinheit anhängen (px, em, % uws.)
Mir ist aufgefallen das du das einige male ausgelassen hast.
lg,
codebox
.
scheinbar geht da was verloren bei Copy&Paste ôO.
