Infos

Sie befinden sich aktuell in den linux-blog - Fa. anracon - Dr. Mönchmeyer Blog-Archiven für den folgenden Tag 10.8.2009.

Calendar
August 2009
M D M D F S S
« Jul   Sep »
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Kategorien
Letzte Einträge
Links
Archive
Meta

Archive für 10.8.2009

Vertikales Zentrieren einer Webseite

10.8.2009 von rmo.

Manchmal hat man es mit Kunden zu tun, die ihre Webseite unbedingt vertikal zentriert in ihrem Browserfenster dargestellt haben wollen. Dafür gibt es mehrere Lösungen - u.a. den Einsatz von Framesets und/oder von Tabellen. Frameset-Lösungen und reine Tabellenlösungen lassen sich vollständig W3C-konform erstellen.

Nicht jeder mag aber Framesets. Und bei reinen Tabellenlösungen gibt es Probleme, wenn man als DTD aus irgendwelchen Gründen das “http://www.w3.org/TR/html4/loose.dtd”-Dokument laden will oder muss.

Nachfolgend daher mal eine etwas andere Lösung, die allerdings nicht standardkonform ist und auf der Zuweisung einer Style-Vorgabe zum HTML-Tag basiert. Die Lösung funktioniert in vielen relativ neueren Browsern - u.a. FF 3.x, MS IE 7,8, Konqueror 4.3.x, Opera 9.64. Sie ist ferner zusammen mit dem oben genannten DTD funktionsfähig.

Folgende grundsätzliche CSS-Vorgaben sind erforderlich:

html { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow:hidden; }
body { height: 100%; width: 100%; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size:10px; overflow:hidden; }
table { table-layout:fixed; position:relative; border-collapse:collapse; border-width:0px; }

Nicht standardkonform ist hier die erste Zeile. Sie sorgt aber dafür, dass nachfolgende 100%-Dimensionierungen sich weitgehend an den Dimensionen des Browser-Fensters orientieren. Es gibt kleine Abweichungen bei der Zentrierung - die sind aber so klein, das man damit aus meiner Sicht in der Praxis leben kann.

Den weiteren Aufbau verdeutlich folgender HTML-Code (, dessen CSS-Anteile man natürlich auslagern kann und sollte. Für erste Tests finde ich es aber immer praktisch, direkt am Objekt zu arbeiten):

<body>
  <div style=”width:100%; height:100%; border:0px #FF0000 solid; overflow:auto;”>
   <table style=”height:98%; width:98%; table-layout:fixed; margin:0px;” border=”0″>
    <tr>
     <td style=”width:100%; height:100%; text-align:center;”>
      <div style=”background-color:#FC0; border:#00C 0px solid; width:40.0em; height:40.0em; margin:auto; line-height:40.0em;”>Hallo</div>
     </td>
    </tr>
   </table>
  </div>
</body>

Das der Tabelle vorgeschaltete DIV sorgt für eine automatische Bereitstellung von Scrollbars, wenn das Browserfenster kleiner als der in der Tabellenzelle dargestellte Inhalt wird. Die 98% bei der Dimensionierung der Tabelle unterdrücken ein initiales Anschalten von Scrollbalken in manchen Browsern. Das innere DIV dient nur der Darstellung eines repräsentativen Objekts. Es könnte aber den gesamten geplanten Seiten-Inhalt aufnehmen.

Die Lösung ist sicher nichts für Puristen, die ihren Seiten ein W3C-Logo nach bestandenen Validator-Tests anfügen wollen. Aber wie gesagt, sie funktioniert in vielen Browsern und zusammen mit den “loose.dtd” - Deklarationen.

Geschrieben in LAMP / Webentwicklung | Keine Kommentare »

|