Manuel-Bieh.de – Web-Development & Consulting

Deutsch English

Archiv:

Latest photoblog

photoblog

Blog » Fun

Vertikal zentrierte Seiten mit CSS

Ebenfalls ein Unding aus »vergangenen Zeiten mit Tabellenlayouts«, ist die Angewohnheit eine Seite, unabhängig von ihrer »realen« Höhe, stets vertikal zentriert darstellen zu wollen. Semantisches XHTML schiebt dem jedoch einen Riegel vor, da sich XHTML an XML orientiert und es somit keine absolute Seitenmitte, sondern lediglich noch übergeordnete Elemente gibt. Von daher ist es nahezu unmöglich, eine Seite die in der Höhe variabel ist, mit einem immer gleichen Stylesheet stets vertikal zentriert zu bekommen.

Für Seiten mit fixer Höhe gibt es mittlerweile einige Workarounds. Beispielsweise ist es möglich, die Seite absolut 50% vom oberen Browserrand zu positionieren, und anschließend mittels negativen Margin auf die Seitenmitte zu bringen. Diese Variante ist allerdings nur bedingt geeignet, da die Seite, wenn das Browserfenster zu klein skaliert wird, aus dem oberen Bildrand heraus geschoben wird. Auf eine sehr viel bessere Variante bin ich vor einiger Zeit im Netz gestoßen.

Während man horizontale Zentrierung in der Regel einfach mittels margin: auto auto; erreichen kann, bedarf es bei der vertikalen Zentrierung wie gesagt einiger Nachhilfe. Wem der Code genügt, und auf die Erklärung verzichten kann, schaut sich vorab die kommentierte Demo an.

Wie auch schon in der Erklärung für 100 % Höhe mit festen Footern (Einmal Erdgeschoss bitte), ist es auch hier anfangs von Nöten, 100 % Höhe auf html und body anzuwenden. Ansonsten geht der Browser nicht vom kompletten Viewport aus (also dem im Browserfenster sichtbaren Bereich der Seite).

html, body {
    height: 100%;
    margin: 0; // wichtig für Firefox, IE, Safari & Co
    padding: 0; // wichtig für Opera
}

Der nächste, wohl wichtigste Punkt, ist leider nicht gerade der semantisch korrekteste, aber wie dies in CSS-Layouts oft der Fall ist, geht es nicht wirklich ohne; wir benötigen nun 2 aufeinanderfolgende Elemente, in meinem Beispiel nehme ich 2 divs:

Das div #abstand regelt später den Abstand vom Inhalt zum oberen Browserrand, #inhalt steht logischerweise für den Seiteninhalt.

Da diese Methode wie anfangs erwähnt nur für Seiten mit fixierter Höhe zu gebrauchen ist, sollten wir wissen wie hoch unser Seiteninhalt am Ende sein wird. Von dieser Höhe hängen die Werte ab, die wir später in der Deklaration des #abstand-div benötigen. Ich habe mich in meinem Beispiel komplett auf Angaben in em beschränkt, um zu demonstrieren, dass diese Methode problemlos skalierbar ist.

Wir definieren also eine feste Höhe für den Inhalt (ich habe mich hier für 28em entschieden), als Höhenangabe für den #abstand definieren wir anschließend 50%, also die halbe Höhe des sichtbaren Bereiches im Browserfenster (Viewport). Da sich der Inhalt unter dem Abstand befindet, liegt die obere Kante von #inhalt nun genau bei 50% des Viewports. Durch einen negativen unteren Margin beim #abstand, der exakt die halbe Höhe des #inhalt-divs betragen sollte, wird der Inhalt nun soweit nach oben »gezogen«, dass sich dieser jetzt in der Mitte befindet:

#abstand {
    height: 50%; 
    margin-bottom: -14em; 
    width: 1px;
}
 
#inhalt {
    height: 28em; 
    margin: auto auto; 
}

Schauen wir uns diesen Code in Livedemo 1 an, sehen wir das wir dem gewünschten Endergebnis schon mal sehr nahe sind. Allerdings wird der Inhalt immer noch nach oben aus dem Browserfenster heraus geschoben, sobald wir das Browserfenster kleiner ziehen. Diesen unerwünschten Fehler korrigieren wir nun mit nur zwei kurzen Zeilen im CSS.

Durch die Höhenangabe von 50% in #abstand wird diese jetzt relativ am Browserfenster ausgerichtet. Sollte diese 50%-Höhe nun kleiner werden als die -14em die wir als margin-bottom deklariert haben, wird der Inhalt natürlich höher eingezogen als das Browserfenster hergibt. Um dies zu umgehen, reicht ein simples float: left in #abstand, sowie ein clear: left in #inhalt. Den Elementen wird nun beigebracht, dass #inhalt wie bisher unterhalb von #abstand bleiben, jedoch nicht weiter hochgezogen werden soll wenn #inhalt an die obere Browserkante stößt. Schlussendlich sieht unser komplettes CSS also wie folgt aus:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
 
#abstand {
    float: left; 
    height: 50%; 
    margin-bottom: -14em; 
    width: 100px;
}
 
#inhalt {
    clear: left; 
    height: 28em; 
}

Nun kann das Browserfenster frei skaliert werden, der Inhalt befindet sich stets in der Mitte, wird jedoch auch bei zu kleinen Browserfenstern nicht mehr aus dem Viewport hinausgeschoben. Anschauen kann man sich dies in der finalen Livedemo 2.

Getestet habe ich dies allerdings nur im Firefox 1.0.7 (Win/Linux), Opera 8 (Win), IE6 (win) und im Konqueror (Linux). Andere Browser und Systeme standen mir leider nicht zur Verfügung.

Flipbook

Gerade im Mediengestalterforum gefunden:
Flipbook

Zur Abwechslung mal was lustiges zum heutigen Tage.

Die Polizei mal wieder …

Wieder mal ne sehr geile Story der Polizei Dortmund:

Dumm gelaufen: so oder so ähnlich könnte man diesen Fall
bezeichnen, der sich in den heutigen Morgenstunden des 09.09.2005 in
Lünen ereignete.

Was war geschehen ? Ein 33-jähriger Lüner erscheint zur
Vernehmung in der Hauptwache der Lüner Polizei in der
Kurt-Schumacher-Straße. Anlass seiner Vorladung zur polizeilichen
Vernehmung waren zwei Ladendiebstähle in Lünen am 06. und 08.09.2005.

Während der Tatverdächtige beim Ermittlungsdienst zur Sache
aussagt und durchaus geständig ist nähert sich gegen 09.15 Uhr ein
ebenfalls 33 Lüner der Polizeiwache, um den Diebstahl seines
Fahrrades anzuzeigen.

Der Mann traute zunächst seinen Augen nicht, als er vor der
Wache sein Fahrrad entdeckte, das ihm in den heutigen Morgenstunden
gestohlen wurde. Schnell war klar, wer mit dem Rad da vorgefahren
war. Auf Vorhalt gab der 33-Jährige auch den Diebstahl des Fahrrades
zu. Als Motiv für den Fahrraddiebstahl nannte der Mann, er sei knapp
in der Zeit gewesen und wollte pünktlich bei der Polizei erscheinen.

Der glücklichen Fahrradhalter konnte nach Klärung der oben
beschriebenen Umstände mit seinem Rad wieder nach Hause fahren.

http://www.presseportal.de/polizeipresse/p_story_rss.htx?nr=723047

German Bash

Eine Seite die ich wenn ich mal etwas Abwechslung brauche schon seit einiger Zeit immer wieder besuche, ist german-bash.org, welches eine Anlehnung an das englische Original bash.org ist.

Einschicken kann man dort witzige oder kuriose Chatzitate aus dem IRC.
Einige Beispiele die mir gerade den Tag gerettet haben:
Putenschnitzel
Mutter gefragt
Großes Arschloch
Schluss gemacht
Die andere Seite
… ;)

« Letzte Seite|Nächste Seite »