nicht angemeldet
zentrieren von Boxen
Hallo liebe Forumsleser,
Ich teste zur Zeit eine Designumsetzung von Tabellen in css.
Meine Vorgaben nur für mich: Die fixe Breite in px soll erhalten bleiben, es soll die klassische Führung durchlaufendes Menue unabhängig vom Inhalt auf der linken Seite ebenfalls erhalten bleiben. Und der ganze Schmus soll in der Mitte vom Browserfenster stehen.
Hierzu folgender Quelltext
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--Kopfbereich-->
<html>
<head>
<title>Test</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="st.css" type="text/css">
</head>
<body>
<div class="haupt">
<div class="menue">Menue<br><br>Menue<br><br>Menue<br><br></div>
<div class="inhalt">Inhalt<br><br>Inhalt<br>
<br>Inhalt<br><br>Inhalt<br><br>Inhalt<br><br>Inhalt<br><br>Inhalt<br><br>Inhalt<br><br>Inhalt<br><br>
</div>
</div>
</body>
Mit folgendem css.
body,pre{font-family : Arial,Helvetica,sans-serif;color : #000000;background-color: #fffae6;text-decoration : none;font-size : 12px; text-align:center;}
img { border:none }
.haupt{background-color:#CC0000; width:800px;margin-left:1%; margin-right:5%; text-align:center; }
.menue { background-color:#6666FF; position:absolute; width:100px;}
.inhalt { background-color:#FFFFFF; position:relative; left:100px; top:0px; width:700px}
Welche Möglichkeiten gibt es den gesamten .haupt Bereich in der Mitte zu zentrieren.
Vielleicht noch ein paar Anmerkungen:
Das ganze dient für mich als Versuch mal zu gucken ob so etwas überhaupt machbar ist und wenn ja wie.
Wenn ich das ganze ohne feste Breite bauen soll, dann wüßte ich wie ich es Mittig zentriere. Darum geht es mir prinzipiell nicht.
Auch die Diskussion über liquid Design Sinn und und Unsinn finde ich zu Hauf im Archiv. Darum geht es also nicht.
Sondern mir geht es darum solche strarren Desings halbwegs valide und css basiert ohne Tabellen zu testen also eher um des lernens Willen.
Olli
-
Hallo Olli,
Vielleicht hilft dir dieser Artikel weiter:
http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm"Boxen" zentriert man am besten mit "margin: auto;":
http://de.selfhtml.org/css/eigenschaften/randabstand.htmMffG
EisFuX -
Hi,
.haupt{background-color:#CC0000; width:800px;margin-left:1%; margin-right:5%; text-align:center; }
hiermit zentrierst Du nur den inline-Inhalt und die Angabe des rechten margins ist ziemlich unsinnig. Wieso überhaupt Klassen? Deine drei Elemente dürften InDividuell sein.
.menue { background-color:#6666FF; position:absolute; width:100px;}
wozu absolute Positionierung - zumal Du sie ncht nutzt.
.inhalt { background-color:#FFFFFF; position:relative; left:100px; top:0px; width:700px}
wozu relative Positionierung? margin tut's auch.
Am besten schaust Du Dir mal das Beispiel http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htm an.
freundliche Grüße
Ingo