Verlauf
Alle Kapitel anzeigen
voriges Kapitel
Die einfachste Form eines Seitenlayouts ist eine zentrierte Webseite mit einer fixen Breite. Dabei gibt es zwei Ansätze, die technisch beide in allen graphischen Webbrowsern, die CSS unterstützen, funktionieren.
Beide Beispiele gehen dabei von einer xhtml-Datei mit dem folgenden einfachen Aufbau aus:
Relatives Positionieren und negative margins
Um Inhalt im Browserfenster zentrieren zu können, muss man diesen in ein div-Element packen. Diesem Container muss man eine bestimmte Breite zuweisen. Indem man die Position des Containers dann auf relativ und die linke Ausrichtung auf 50%, wird der Container vorerst genau mit seinem linken Ursprungspunkt bei 50% des übergeordneten Elementes (in diesem Fall das html-Element) gesetzt, das ist genau die Hälfte des zur verfügung stehenden horizontalen Bildschirmplatzes. Jetzt soll der Container aber zentriert dargestellt werden - und dazu muss man ihn noch um die Hälfte seiner Breite (und deswegen muss man die Breite vorher explizit angeben) von seiner momentanen Position nach links verschieben: Man weist ihm einen negativen Wert für die Eigenschaft margin-left zu, genau die Hälfte seiner Breite - und der Container mit jeglichem Inhalt ist exakt zentriert.
Zentrieren mit auto margins
Die zweite Möglichkeit Inhalte im Browserfenster horizontal zu zentrieren ist die Verwendung von auto margins. In der Theorie funktioniert das sehr einfach indem man wieder eine Breite für den Container vergibt und für die Margins in vertikaler Richtung den Wert 0 und in horizontaler Richtung den Wert auf auto setzt (im folgenden Beispiel mit Shorthand-Syntax, man könnte margin-left und margin-right jeweils auch einzeln setzen).
Für Netscape Navigator 6 und niedriger sollte man noch die Eigenschaft min-width für den body auf einen Wert größergleich der container-Breite setzen, falls das Browserfenster kleiner als die container-Breite wird - ansonsten "rutscht" der Inhalt des containers außerhalb des Browserfensters ohne die Möglichkeit, mittels Scrollleisten zu diesem zu scrollen.
Welche dieser beiden Lösungsmöglichkeiten verwendet wird, bleibt dem Webdesigner überlassen - technisch funktioniert beides; negative margins haben den kleinen Vorteil, dass man nur ein einziges Element stylen muss - also auch keinen Browserbug ausnutzen muss - und sind deshalb häufiger zu finden als auto margins.
Beispiel: Zentrieren mit negativen margins
Beispiel: Zentrieren mit auto margins
Beide Beispiele gehen dabei von einer xhtml-Datei mit dem folgenden einfachen Aufbau aus:
[...]
<body>
<div id="container">
[...]
</div>
</body>
Relatives Positionieren und negative margins
Um Inhalt im Browserfenster zentrieren zu können, muss man diesen in ein div-Element packen. Diesem Container muss man eine bestimmte Breite zuweisen. Indem man die Position des Containers dann auf relativ und die linke Ausrichtung auf 50%, wird der Container vorerst genau mit seinem linken Ursprungspunkt bei 50% des übergeordneten Elementes (in diesem Fall das html-Element) gesetzt, das ist genau die Hälfte des zur verfügung stehenden horizontalen Bildschirmplatzes. Jetzt soll der Container aber zentriert dargestellt werden - und dazu muss man ihn noch um die Hälfte seiner Breite (und deswegen muss man die Breite vorher explizit angeben) von seiner momentanen Position nach links verschieben: Man weist ihm einen negativen Wert für die Eigenschaft margin-left zu, genau die Hälfte seiner Breite - und der Container mit jeglichem Inhalt ist exakt zentriert.
#container {
width: 700px;
position: relative;
left: 50%;
margin-left: -350px; /* this has to be the exact half of the width */
}
Zentrieren mit auto margins
Die zweite Möglichkeit Inhalte im Browserfenster horizontal zu zentrieren ist die Verwendung von auto margins. In der Theorie funktioniert das sehr einfach indem man wieder eine Breite für den Container vergibt und für die Margins in vertikaler Richtung den Wert 0 und in horizontaler Richtung den Wert auf auto setzt (im folgenden Beispiel mit Shorthand-Syntax, man könnte margin-left und margin-right jeweils auch einzeln setzen).
#container {
width: 700px;
margin: 0 auto;
}
Für Netscape Navigator 6 und niedriger sollte man noch die Eigenschaft min-width für den body auf einen Wert größergleich der container-Breite setzen, falls das Browserfenster kleiner als die container-Breite wird - ansonsten "rutscht" der Inhalt des containers außerhalb des Browserfensters ohne die Möglichkeit, mittels Scrollleisten zu diesem zu scrollen.
body {
text-align: center; /* hack for IE 5.x and quirks mode */
min-width: 720px; /* needed for Netscape <= 6 with tiny screens */
}
#container {
width: 700px;
margin: 0 auto;
text-align: left; /* hack for IE 5.x and quirks mode */
}
Welche dieser beiden Lösungsmöglichkeiten verwendet wird, bleibt dem Webdesigner überlassen - technisch funktioniert beides; negative margins haben den kleinen Vorteil, dass man nur ein einziges Element stylen muss - also auch keinen Browserbug ausnutzen muss - und sind deshalb häufiger zu finden als auto margins.
Beispiel: Zentrieren mit negativen margins
Beispiel: Zentrieren mit auto margins
