nicht angemeldet
Mittig ausgerichtetes Layout ohne Tabellen? Probs mit CSS.
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
-
Hi Nina,
verwende doch float, dann brauchst Du keine position-Angabe.
Gruss
Danny-
verwende doch float, dann brauchst Du keine position-Angabe.
Hallo Danny,
habe ich gemacht.Es ergibt sich nun folgendes Problem:
Der gelbe Balken unter der Navigation muss auch vorhanden sein. Allerdings entsteht zwischen Navigation und Contentbereich eine 3px breite Lücke. Das liegt an der Höhe, die ich dem content-div gegeben habe und tritt nur im IE auf.Kannst Du mir da weiterhelfen? wie kann ich erreichen, dass die Fläche unter der Navigation gelb ist?
Ich könnte ins body-div auch ein Hintergrundbild einfügen, vielleicht gibt es aber eine elegantere Lösung?Der Quellcode hat sich geändert und schaut nun folgendermassen aus:
<!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 {
background-color: yellow;
text-align: left;
width: 720px;
margin: 0 auto 0 auto;
border: 1px solid red;
height: 500px;
}
#navi {
width: 180px;
background-color: green;
float: left;
}
#content {
height:100%;
background-color: white;
border:1px solid blue;
margin-left:180px;
}</style></head>
<body>
<div id="body">
<div id="navi">
Navigation<br><br>
punkt1<br>
punkt2<br>
punkt3<br>
</div>
<div id="content">
<h1>headline</h1>
<br><br><br><br><br><br><br><br><br><br><br>
sdkfskdfslkdf
</div>
</div>
</body>
</html>-
Habe den Code lokal gespeichert und damit rumgespielt. Leider kann ich mir die Lücke auch nicht erklären, sorry. Vielleicht ist es wirklich ein Bug des IE.
-
Hi,
es ist wohl wie Danny schon sagte, ein Bug.
Helfen wird Dir hier:
#content { width:538px; float:right; margin-left:0; }freundliche Grüße
Ingo
-
-