nicht angemeldet
Lieber,
Deine Seite hat noch keinen anständigen Quelltext! Da fehlt ein DOCTYPE und semantisch ist das HTML auch (noch) nicht. Von dem Dreamweaver (oder womit Du diesen Quelltext erstellt hast) lassen wir zur Übung mal die Finger! Das erlaubt es uns auch sinnvollere Namen für die Klassen/IDs zu vergeben. Dann verschlanken wir das Ganze zu diesem hier:
<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Jörg Ludewig // Professional Cyclist</title>
<link rel="SHORTCUT ICON" href="ludewig.ico">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="scripts/lude_js.js"></script>
</head>
<body onload="init()">
<div id="nav-div">
<ul id="oben">
<li><a href="#">News</a></li>
<li><a href="#">Technik</a></li>
<li><a href="#">Links</a></li>
</ul>
<ul id="mitte">
<li><a href="#">Presse</a></li>
<li><a href="#">Gallerie</a></li>
<li><a href="#">Impressum</a></li>
</ul>
<ul id="unten">
<li><a href="#">Privat</a></li>
<li><a href="#">Sponsoren</a></li>
<li><a href="#">Gästebuch</a></li>
</ul>
<p><a href="javascript:slideUp()">up</a> | <a href="javascript:slideDown()">down</a></p>
</div>
<div id="contents-layer">
<h1>inhalt :-)</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html>
Du siehst, dass ich mich bemüht habe, die Elemente Deiner Seite in passende HTML-Elemente zu verpacken. Diese Layout-Tabelle für Deine Links habe ich durch eine ungeordnete Liste ersetzt, die man mit CSS ebenso darstellen kann, die aber ohne CSS/Javascript/Flash trotzdem für alle und jeden zugänglich ist.
In Deiner CSS-Datei stand ja heftig viel unbenutzter Code! Ich habe für mich das Wesentliche behalten. Dieses hier:
#nav-div {
position:absolute;
right:0px;
top:0px;
width:100%;
height:318px;
z-index:1;
background: url(../images/bg_basic.gif) repeat-x;
border-bottom: 5px solid #666666;
}
#nav-div ul {
display: block;
width: 300px;
position: relative;
left: 53%;
top: 163px;
margin: 0;
padding: 0;
}
#nav-div ul#mitte { top: 187px; }
#nav-div ul#unten { top: 211px; }
#nav-div ul li { list-style-type: none; float: left; width: 90px; }
#nav-div p {
width: 135px;
height: 28px;
margin: 0;
padding: 0;
text-align: center;
background: url(../images/bg_btn.gif) no-repeat 0px 0px;
position: absolute;
top: 318px;
right: 335px;
}
#contents-layer {
position: absolute;
top: 360px;
padding: 0 30px;
width: auto;
z-index:4;
}
Jetzt bist Du dran, eine fertige Version zu basteln, die mit Content und allem navigierbar ist. Wenn mal zwei Seiten stehen, dann kann man auch die Scripte zum Iframe-Nachladen ausprobieren.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
MudGuard