Homepages in der Bildschirmmitte zentrieren
Eine in der Bildschirmmitte zentrierte Homepage sieht einfach gut aus und stellt sicher, dass der Besucher die Seite intuitiv im Blickfeld hat. Seit aber Designs, welche auf Tabellen basieren, (zu Recht) out sind, ist dieser Webdesignkniff gar nicht so einfach zu realisieren.
Bisher war es einfach: Haupttabelle, welche die gesamte Seite beinhaltet, einfach mit dem Attribut align=center versehen und gut ist. Einem div - Block dagegen kann man kein align - Attribut mehr verpassen. Nur mit Stylesheets lassen sich dem Block Eigenschaften geben, welche den Browser zur Zentrierung bewegen. Das Team von css4you.de hat sich damit bereits intensiv befasst: Bei margin:0px auto; passt der Browser den Horizontalabstand zum Rand dynamisch an. Das funktioniert mit dem IE6 und Firefox 1.X wunderbar, solange keine XML - Deklaration vorhanden ist.
HTML - Dokumente basieren heute in der Regel auf dem XHTML 1.0 Standard. Bei der Erstellung dieser Dokumente empfiehlt u.a. selfhtml.org das Einfügen einer XML - Deklaration, um die Zeichenkodierung für den Parser eindeutig festzulegen. Baut man aber so eine Deklaration an den Beginn des Dokuments, funktioniert auf einmal die Zentrierung im Internet Explorer nicht mehr. Der div - Block ist nun linksbündig und lässt sich nicht mehr zur Mitte bewegen. Firefox stört sich mal wieder nicht daran.
Ich vermute, dass die Deklaration irgend ein anderes Verhalten der Rendering - Engine im Internet Explorer provoziert. Der einzige Workaround, der mir bisher dafür eingefallen ist, ist wieder eine Basistabelle mit nur einer großen Zelle zu verwenden. Bessere Lösungen bzw. Erfahrungen mit dem Problem sind willkommen.
Geschrieben am 24.05.2006 von Stefan Schlichthärle | Kommentar hinzufügen | Tags: Webdesign Browser CSS