Webmaster-Crashkurs

Layout mittig

Bei vielen Websites sieht man ein mittiges Layout. Dabei ist in der Regel die Breite festgezurrt, was natürlich dem Designer entgegenkommt.

Schauen wir uns an, wie ein mittiges Layout über CSS realisiert wird. Dabei ist der erste Schritt eine Breite festzulegen. In unserem Beispiel legen wir für das mittige Layout die Breite von 500 Pixeln fest. In der Praxis wird das breiter sein – Achten Sie aber darauf, dass es nicht zu breit gewählt wird. Nicht jeder einen großen Monitor mit einer Auflösung von 1650 Pixel in der Horizontalen.

In CSS also:

width: 500px;

Wie legen uns einen Container an, der eine Breite von 500 Pixel hat uns im zweiten Schritt mittig ausgerichtet wird. Den Container nennen wir layout_mittig und nutzen dazu das Block-Element <div>.

<div id="layoutmittig">
	<p>Hier kommt später der Inhalt für unser Layout mittig.</p>
	<p>Hier kommt der Inhalt, alle Bilder etc.</p>
</div>

Damit wir sehen, wo wir arbeiten, legen wir als erstes in CSS die Hintergrundfarbe fest.

#layout_mittig {
	background-color: orange;
}

Wenn wir das bisherige Ergebnis uns im Browser ansehen, belegt das Element „layout_mittig“ die komplette Breite, die zur Verfügung steht. Also legen wir eine Breite fest

#layout_mittig {
	background-color: orange;
	width: 500px;
}

Schauen wir uns wieder das Ergebnis im Browser an und nun sehen wir, dass nur noch eine Breite von 500px genutzt wird. Jetzt müssen wir das Element „layout_mittig“ noch zentrieren, damit der Name auch passt.

Dazu wird über CSS dem Typ-Selektor body die Zentrierung mitgegeben.

body {
	text-align: center; 
}

#layout_mittig {
	background-color: orange;
	width: 500px;
}

Und wieder schauen wir unser Ergebnis an. Unser Element „layout_mittig“ ist nun zentriert. Schauen wir es in verschiedenen Browsern an, werden wir schnell feststellen, dass nicht alle Browser das Layout zentriert darstellen. Also ergänzen wir die CSS-Anweisung noch, damit sowohl für die einen wie die anderen Browser es einheitlich zentriert angezeigt wird mit der Anweisung margin: 0 auto;

Im Klartext bedeutet „margin: 0 auto;“ – halte Abstand von oben und unten von 0 Pixel und Abstand von rechts und links automatisch, wie viel Platz da ist.

body {
	text-align: center; 
}

#layout_mittig {
	background-color: orange;
	width: 500px;
	margin: 0 auto;
}

Allerdings auch alle darin enthaltenen Elemente, wie unser Beispieltext. Also müssen wir noch diesen mitgeben, dass diese wie gewohnt links ausgerichtet bleiben. Der CSS-Bereich für #layout_mittig wird ergänzt.

body {
	text-align: center; 
}

#layout_mittig {
	background-color: orange;
	width: 500px;
	margin: 0 auto;
	text-align: left;
}

Schauen Sie sich das Ergebnis an. Jetzt haben Sie den Aufbau von einem zentrierten Webdesign. Spielen Sie herum und probieren Sie.

Probleme von zentrierten Webdesign

Wenn Sie 2 Seiten haben, bei denen der Inhalt einmal auf eine Browserseite passt und bei der zweiten Seite mehr Inhalt vorhanden ist, dass im Browser gescrollt werden muss, kommt ein unschöner Effekt (zumindest beim Firefox). Das Design springt sportiv und agil hin und her. Die Breite bleibt zwar exakt bestehen, aber die Position ändert sich. Das liegt bei verschiedenen Versionen vom Firefox daran, dass dieser den vertikalen Scrollbalken nur dann einblendet, wenn er gebraucht wird. Allerdings benötigt dieser Platz und die Mitte verschiebt sich. Und schon haben wir diesen unschönen Effekt. Dagegen wird gesteuert, indem man dem Browser prinzipiell sagt, dass man mehr als die 100 Prozent Höhe benötigt. Man gibt ihm also über den Type-Selektor body 101% an Höhe mit. Probieren Sie es einmal aus.

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos • Impressum • Datenschutzerklärung
weitere eigene Projekte: