Website-Zentrierung im Browser

Websites mit fester (Pixel-)Größe

Der ursprungliche Layout-Gedanke hinter HTML sieht Container vor, deren Größe sich an den vorhandenen Platz im Browserfenster anpasst, und einen Textfluss darin, der ebenfalls die Breite ausnutzt und so lang wird, wie der Inhalt zur kompletten Darstellung benötigt. Noch heute betragen die Default-Werte für Containergrößen in CSS meist 100% oder "auto". Bei den heutigen großen Monitoren würde dies jedoch mitunter zu sehr breiten Textzeilen führen, die zum Lesen ungeeignet sind (Stichwort: Zeitungsspalten), und einen optischen Eindruck von "Buchstabenbrei" erzeugen. Ferner bestehen Grafiker auf bestimmte Größenverhältnissen von Textbereichen zu Bildern, wobei letzteres eine feste Größe in Pixel besitzen – und folglich dann der Platz für Text ebenso. Aus diesen Gründen wird generell mindestens die Breite des Platzes für Text unabhängig von der Größe des Fensters festgelegt, meist auch die Gesamtbreite (und oft auch die Höhe) der "Website", damit von Seite zu Seite eine angenehme Ruhe bei den Größenverhältnissen aller Elemente einkehrt. Damit diese "Website" eine ruhige und angenehme Position im Browserfenster erhält – wie groß auch immer dieser sein mag – wird eine Zentrierung des Inhaltsbereichs im Browserfenster benötigt.

Was das W3C in CSS (nicht) vorsieht

Seit 1998 gibt es von der W3C die CSS-Definition Version 2. Abgesehen davon, dass die gängigen Browser bis heute nicht alle Vorgaben von CSS2 korrekt oder vollständig umsetzen, kann man mit dieser Formatierungssprache die Anzeige einer HTML- oder XML-Seite im Browser doch auf vielfältige und pixelgenau Weise steuern.

In Bezug auf die Zentrierung von Elementen gibt es jedoch eine bedauerliche Diskrepanz zwischen den Möglichkeiten für horizontale und vertikale Zentrierung:

Elemente werden horizontal mittig ausgerichtet, in dem man ihren linken und rechten Rändern (margins) den Wert "auto" zuweist – der Browser muss dann die vorhandene horizontale "Luft" zum Elternelement gleichmäßig links und rechts verteilen, also effektiv mittig positionieren.
Sehr zum Leidweisen unzähliger Programmierer fehlt diese Art von Vorgabe für die vertikale Ausrichtung von Elementen. Das Einzige, wofür eine Ersatz-Möglichkeit besteht, ist die Tabellenzelle – hier kann man die vertikale Ausrichtung 'mittig' für den Zellinhalt vorgeben.

Das Skrollbalken-Problem bei 100% Höhe

Zu obiger Einschränkung kommt ein weiteres, fieses Problem hinzu: Legen wir fest, das ein <div> oder <table> 100% der Breite oder Höhe seines Elternelements besitzt, so beziehen sich diese 100% auf die volle Größe des Elternelements (sozusagen "Bruttogröße"); hat dieses jedoch selbst einen Skrollbalken, dann stehen für die Anzeige von Kindelementen nicht mehr die 100% Bruttogröße zur Verfügung, sondern nur 100% minus ca. 17 Pixel (sozusagen "Nettogröße"). Man kann aber in CSS2 weder rechnen, noch abfragen ob ein Skrollbalken gerade angezeigt wird. Bleiben wir daher dabei, dass z.B. eine Tabelle 100% Höhe des Sichtfensters besitzt, dann bekommen wir folgendes Problem: Ist das Browser-Fenster hoch genug für den Inhalt (kein vertikaler Skrollbalken nötig) aber nicht breit genug, dann muss der Browser einen horizontalen Skrollbalken einblenden. Jetzt ist aber plötzlich die Netto-Höhe nicht mehr ausreichend für die darin darzustellenden Tabelle, die ja 100% der Brutto-Höhe besitzt – der Browser blendet einen vertikalen Skrollbalken ein (für die 17 Pixel des horizontalen Skrollbalkens). Das sieht häßlich aus und kann einen Besucher sehr irritieren.

Cross-Browser Probleme

Generell ist die Umsetzung von CSS in den gängigen Browsern mit Einschränkungen und Fehlern verbunden, wobei jeder Browser eigene Schwächen besitzt. Eine Website mit halbwegs anspruchvoller Gestaltung so zu programmieren, dass sie in allen wichtigen Browsern korrekt angezeigt wird, ist meistens keine geringe Herausforderung. Dabei gibt es zwei Hauptlager: Die "W3C-Konformen Browser" (Firefox, Safari, Opera, & Co.) – die sich schon immer an die Spezifikation des W3C orienterten – und das andere Lager heißt einfach Internet Explorer, der früher immer ein eigenes Suppchen kochen wollte. Inzwischen hat Microsoft mit IE7 eingelenkt und versucht, bzgl. Konformität wieder Grund gut zu machen (aber mit Händen, die durch die nötige Kompatibilität mit der eigenen Vergangenheit gebunden sind). Daher entwickeln die meisten Webtechniker zunächst in Firefox (wegen der hervorragenden Erweiterungen für Entwickler), um anschließend zu prüfen, was man noch drehen muss, damit die Seite auch in Internet Excplorer richtig angezeigt wird.

Für der horizontalen Zentrierung benötigt Internet Explorer keine Sonderbehandlung; bei der vertikalen Zentrierung hingegen habe ich ein Zusatz-Feature von IE eingesetzt, das besser zu funktionieren scheint als der "reguläre" Weg, den alle anderen Browser nehmen. Und damit tauchen wir ganz konkret in die Lösungen ein.

Skrollbalken für die ganze Website

Ob komplette oder nur horizontale Zentrierung, habe ich aufgrund meiner Erfahrung einen allgemeinen Lösungsansatz entwickelt, der einen eigenen <div> über die ganze verfügbare Fenstergröße legt, der ggf. auch die Skrollbalken für die "eigentliche" Website erhält. Diese Vorgehensweise wird auch von älteren Browsern (insb. IE5) korrekt interpretiert, da früher Uneinigkeit über die Behandlung von <html> und <body> bzgl. ihrer Größe und Skrollbalken bestand.

Websites (nur) horizontal ausrichten

Die Container-Verschachtelung in HTML fängt an mit <html> · <body> · <div class="alles"> · <div class="main">, wobei die ersten drei alle Breite und Höhe 100% (des Browserfensters) erhalten, und nur der <div class="alles"> darf Skrollbalken erhalten. Der <div class="main">, mit CSS wie folgt, enthält den horizontal zentrierten Bereich, der nach Ihrem Belieben unterteilt werden kann.

div.main {
  position: relative;
  top: 20px;
  width: 960px;
  height: 580px;
  margin: 0px auto;  /* auto = ZENTRIERUNG */
  text-align: left;
  overflow: hidden;
  background-image: url(../images/hintergrund.gif); }

Horizontal und Vertikal mittig

Die Container-Verschachtelung in HTML fängt an mit <html> · <body> · <div class="alles"> · <table class="mitte"> · <div class="main"> · <div class="ns67">, wobei die ersten drei alle Breite und Höhe 100% (des Browserfensters) erhalten, und nur der <div class="alles"> darf Skrollbalken erhalten – genau wie bei der horizontalen Zentrierung. Die Tabelle <table class="mitte"> hat nur eine Zelle, die so groß ist wie das Browserfenster, mit seinem Inhalt – <div class="main"> – horizontal und vertikal zentriert. Die nachfolgende <div class="ns67"> dient der Umgehung eines Fehlers in Netscape 6 und 7, und enthält den vollständig zentrierten Bereich, der nach Ihrem Belieben unterteilt werden kann.

Zur Vermeidung eines unnötigen vertikalen Skrollbalkens wird das "100% Höhe" Problem mit JavaScript umgangen: Zu Anfang sowie bei jeder Änderung der Größe des Browserfensters wird die Höhe der Tabelle auf die effektive Höhe (clientHeight) des Containers <div class="alles"> eingestellt, der ja die Skrollbalken ggf. erhält. Dieser Kniff wird in Internet Explorer statt via Onresize-Event über einen Ausdruck im CSS abgewickelt – das ist eine proprietäre Erweiterung von Microsoft, die auch in IE7 enthalten ist und recht gute Ergebnisse liefert.

CSS – das Wesentliche

html {
 height: 100%;
 width: 100%;
 margin: 0px;
 padding: 0px;
 overflow: hidden; }

body {
 height: 100%;
 width: 100%;
 margin: 0px;
 padding: 0px;
 overflow: hidden; }

/* To make things "pixelgenau" */
img, table, table td, form, div, div div, div div div, div div div div, pre {
 margin: 0px;
 padding: 0px;
 border-style: none;
 border-width: 0px;
 text-align: left;
 overflow: hidden; }

table {
 border-collapse: collapse;  /* Eliminiert IE Borders */
 border-spacing: 0px;   /* Eliminiert Firefox Borders */
}

div.alles {
 position: absolute; /* Opera mag "relative" hier nicht */
 top: 0px;
 left: 0px;
 height: 100%;
 width: 100%;
 overflow: auto; }

table.mitte {
 width: 100%;
 height: 100%; }

table.mitte td {
 vertical-align: middle; /* Vertical centering here */
 text-align: center; /* MSIE 5.x missachtet margin:auto */
 width: 100%;
 height: 100%; }

/* Vererbung unterbinden */
table.mitte table {
 width: auto;
 height: auto; }

table.mitte table td {
 vertical-align: top;
 text-align: left;
 width: auto;
 height: auto; }

div.main {
 position: relative;
 top: 0px;
 left: 0px;
 width: 894px;
 height: 590px;
 margin: 0px auto;  /* auto = ZENTRIERUNG */
 overflow: hidden; }

div.ns67 {
 position: relative;
 top: 0px;
 left: 0px;
 width: 894px;
 height: 590px; }

JavaScript – das Wesentliche

var nutzHoehe = 0;

function getClientHeight() {
 var curHeight = 0;
 var myDiv=getElemId('alles');
 if (myDiv != null) {
  if (typeof myDiv.clientHeight == 'number') {
   curHeight = myDiv.clientHeight;
   }
  }
 return curHeight; }

function neuAufbau() {
 var tHoehe = getClientHeight();
 if (nutzHoehe != tHoehe) {
  nutzHoehe = tHoehe;
  getElemId('mitte').style.height = nutzHoehe + 'px';
  }
 return; }

// Called by the onload-event of every page
function startUp() {
 var agent=navigator.userAgent.toLowerCase();
 // MSIE gets it dealt with via CSS-Expressions
 if (agent.indexOf("msie") == -1) {
  // All other browsers get it via event handler
  var tHoehe = getClientHeight();
   if (tHoehe > 0) {
    neuAufbau();
    window.onresize = neuAufbau;
    }
  }
 return; }

Zum Herunterladen bitte einloggen.