nicht angemeldet
Hallo zusammen,
ich habe folgendes Problem und hoffe, dass mir hier jemand helfen kann:
Ich möchte eine Seite erstellen welche 720 px breit und zentriert ist. Die Seite soll links eine 180px breite Navigation enthalten. Der Rest der verfügbaren Breite wird für den Content genutzt.
Damit das Zentrieren in IE und NS funktioniert gebe ich dem <body> ein text-align: center und dem darauffolgenden <div> margin:auto; (rechts und links).
Der gesamte Inhalt befindet sich in einem <div> mit der ID="body".
Dieses <div> hat ein border-left von 180px, auf den dann die Navigation plaziert werden soll.
Die Navigation befindet sich in einem <div> mit der ID="navi", welches sich wiederum innerhalb vom <div id="body"> befindet.
Da ich dem <body> Tag ein text-align:center gegeben habe muss ich die Navigation nun an die richtige Stelle positionieren. Das geht leider nicht über position:absolute; da ich hier eine zentrierte Seite habe.
Daher verwende ich position:relative; und das Ergebnis schaut hervorragend aus.
Wenn ich nun in den <div id="body"> Content einfügen will wird er vertikal natürlich erst nach der Navigation angezeigt da "position:relative" natürlich den Platz drumherum nicht freigibt;-(
Meine Frage an Euch:
- gibt es da eine andere Möglichkeit außer Tabellen dieses Problem zu lösen?
- habe ich vielleicht Fehler bei der Aufteilung der Seite in <div>s gemacht? (die Breiten sowie die Anordnung der Navigation und sonstigen Site-Elementen ist vorgegeben. Ich kann also am Design selbst nichts ändern)
Anbei noch der Quellcode in vereinfachter Form:
*****************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head>
<style type="text/css">
body {text-align: center;}
#body {
text-align: left;
width: 540px;
margin: 0 auto;
border: 1px solid red;
border-left: 180px solid black;
}
#navi {
width: 180px;
background-color: green;
position: relative;
left: -180px;
}
</style></head>
<body>
<div id="body">
<div id="navi">
Navigation<br><br>
punkt1<br>
punkt2<br>
punkt3<br>
</div>
<h1>headline</h1>
</div>
</body>
</html>
*************************
Ich bedanke mich schon mal im Voraus für Eure Hilfe.
Gruss
Nina