Ein häufiges Problem, wonach man immer wieder sucht, ist, wie man den Inhalt einer Webseite mit CSS valide zentriert. Hierbei gibt es verschiedene Lösungsansätze:

#zentiert{
	width:960px;
	left:50%;
	margin-left:-480px;
	position:absolute;
}

Hier wird ein Bereich mit einer festen Breite zunächst um die halbe Seitenbreite nach rechts verschoben und dann um die halbe Breite des Bereichs mit einem negativen Margin wieder zurückgeschoben. Den Nachteil dieser Lösung sieht man, wenn man das Browserfenster verkleinert. Hier wird man feststellen, dass mit dem unteren Scroll-Balken nicht mehr alle Bereiche der Webseite angezeigt werden können. Dadurch wird eine Darstellung der Seite mit einer geringen Auflösung (Handy, Subnotebook, etc.) unmöglich, weshalb diese Lösung nicht zu empfehlen ist. Außerdem sind negative Werte bei Margin nicht unbedingt zu empfehlen.

#zentriert{
	width:934px;
	margin:0 auto;
}

Hier wird der Bereich auch zentriert, allerdings geschieht dies hier über margin: 0 auto; . Bei dieser Lösung tritt das oben erwähnte Problem nicht auf, so dass die Webseite auch mit einer geringen Auflösung benutzbar bleibt.

Keine ähnlichen Beiträge.