| M | D | M | D | F | S | S |
|---|---|---|---|---|---|---|
| « Jul | Sep » | |||||
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 | ||||||
- Allgemein (2)
- Apache (2)
- Blender (1)
- Cups, Druck (1)
- Eclipse für PHP-Projekte (7)
- Erfahrungsberichte (68)
- Firewall Netfilter Iptables (1)
- Hardware, Treiber (13)
- Impressum (1)
- KDE (39)
- Kontact - Kmail (11)
- LAMP / Webentwicklung (28)
- LibreOffice, OpenOffice (8)
- Linux 3D Desktop (8)
- MySQL (1)
- Netzwerk (8)
- Open Source (1)
- Open-Xchange (11)
- Open-Xchange 5 (9)
- Open-Xchange 6 (2)
- Opensuse 12.1 (2)
- Postfix, Cyrus, Kmail (7)
- Sound (8)
- Verschlüsselung (Mail, SSH) (4)
- VMware Workstation (12)
- Web - Browser und Co. (11)
- Xen und KVM (2)
- 8.1.2012: Opensuse 12.1 - Erfahrungen mit einer Neuinstallation
- 3.1.2012: Opensuse 11.4 / 12.1 - Problem mit ssh -X
- 28.11.2011: Cyrus IMAP unter Opensuse auf die Schnelle
- 5.11.2011: Kontact 4.7 und OX 6 unter Opensuse 11.4 - Teil II
- 29.10.2011: Kann man KDE professionell nutzen ?
- 21.10.2011: Libreoffice 3.4, Scrollbar-Fehler, KDE 4.7
- 23.8.2011: Opensuse 11.4, samba, apparmor-Problem
- 21.8.2011: Kontact 4.7 und OX 6 unter Opensuse 11.4 - Teil I
- 17.8.2011: MySQL - Sortierung in UNION Statements
- 3.8.2011: Buchempfehlungen zu CSS2
homepages
- Januar 2012
- November 2011
- Oktober 2011
- August 2011
- Juli 2011
- Mai 2011
- April 2011
- März 2011
- Februar 2011
- Januar 2011
- Dezember 2010
- Oktober 2010
- September 2010
- August 2010
- Juli 2010
- Juni 2010
- Mai 2010
- April 2010
- März 2010
- Februar 2010
- Januar 2010
- Dezember 2009
- November 2009
- Oktober 2009
- September 2009
- August 2009
- Juli 2009
- Juni 2009
- Mai 2009
- April 2009
- Februar 2009
- Januar 2009
- Dezember 2008
- November 2008
- Oktober 2008
- September 2008
- August 2008
- Juli 2008
- Juni 2008
- Mai 2008
- Februar 2008
- Oktober 2007
- September 2007
- Juli 2007
Vertikales Zentrieren einer Webseite
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.
Antwort schreiben
Sie müssen als angemeldet sein, um einen Kommentar schreiben zu können.