RSS Feed
abonnieren.
Suche
Wunschzettel
Weblogeinträge
ReferenzenVertikal zentrieren in CSS | 14. September 2006 um 08:26 Uhr
Jedes mal wenn mich jemand nach einer Möglichkeit unbekannt hohe Inhalte vertikal zu zentrieren fragte habe ich automatisch die SELFHTML FAQ verwiesen, wo gezeigt wird, wie man mittels einer Layouttabelle das ganze lösen kann. Doch jetzt wurde eine CSS-only Möglichkeit vorgestellt.
Du¨an Janovský beschreibt in Vertical Centering in CSS — Yuhu's Definitive Solution with Unknown Height wie man dazu vorgehen kann.
Er bedient sich display: table; und display: table-cell; für die Standardbasierten Browser und hilft dem IE auf die Sprünge indem er die Falschinterpretation von height des IE dazu nutzt die "richtige" Position hinzubekommen.
Das war eine der Sachen die mich schon sehr lange genervt haben, und wo ich dann auch ganz pragmatisch Layouttabellen benutzt habe. Es freut mich doch sehr, dass, zwar sehr sehr selten, aber dennoch, es doch noch Entdeckungen in CSS gibt wie diese und es erinnert mich an meine Anfangszeit, in der fast monatlich revolutionäre CSS-Techniken aufkamen.
Pingbacks
- Sascha Goebels WebLog » Blog Archive » Vertikal Zentrieren mit CSS
- DEVSTER » Blog Archive » Anleitung Bloggen, 1: Greife bedeutende Themen auf!
Kommentare
Die Kommentare sind für diesen Eintrag geschlossen.
rico aus dresden schrieb am 14.09.2006
na endlich - nicht nur du warst davon genervt ;o)
Anonym schrieb am 14.09.2006
Also anstatt table inzuschreiben macht man ein div zum table? Inwiefern ist das besser? Semantisches Markup ist das nicht.
Jeena Paradies aus Varberg schrieb am 14.09.2006
Niemand sagt, dass das nur mit DIVs geht.
wahsaga schrieb am 15.09.2006
@Anonym:
(Wieso finde ich das nur wieder mal so typisch, dass so ein plakativ-unfundiert-"kritischer" Kommentar anonym kommt?)
Dieses CSS solltest du - mit ein wenig Ahnung - auch auf "semantisches" Markup angewendet bekommen.
Und es "macht" nicht ein Element zur Tabelle, sondern stellt es mit den für diesen Effekt wesentlichen Eigenschaften einer Tabelle dar.
Wenn dir der Unterschied zwischen Struktur und Darstellung noch nicht klar ist - dann solltest du in Punkto Hinweise bzgl. Semantik vielleicht lieber Zurückhaltung üben.
MCC schrieb am 15.09.2006
?
Der Artikel ist lt. Datumsangabe von 2004.
Wenn's interessiert, hier noch zwei andere Zentriertechniken:
- bei variabler Höhe
- bei fester Höhe
Jeena Paradies aus Varberg schrieb am 15.09.2006
Stimmt, Tatsache. Aber anscheinend ist die Methode nicht wirklich bekannt, sonst hätte ich zumindest schon einmal über diesen Artikel stolpern müssen, dies war nicht der Fall. Danke für die zwei anderen Links MCC.
Detlef G. schrieb am 16.09.2006
Die von dir verlinkte Methode zeichnet sich im Vergleich zu der von MCC dadurch aus, dass sie sehr einfach ist. Sie hat aber den Nachteil, dass bei großem zentrierten Inhalt und/oder kleinen Browserfenstern Inhalte oben im IE unerreichbar abgeschnitten werden können. So bleibt es dabei, dass es keine Universallösung gibt, und je nach Seiteninhalt eine der verschiednenen Varianten gewählt werden muss.
Was mich allerdings wundert, dass du CSS vertical centering using float and clear noch nicht kanntest. Es ist doch auch bei Zentrieren mit nur einem Element mit verlinkt.
Jeena Paradies aus Varberg schrieb am 16.09.2006
Ja, mich ja eben auch :-)
Urs Felix aus Deutschland schrieb am 19.09.2006
Danke für die Links, hab es bisher immer selbst probiert aber meine Methode war nie zu allen Browsern kompatibel.
Gruß, Urs
Steffen aus Königs Wusterhausen Deutschland schrieb am 30.01.2007
Ich glaube die oben beschriebene Lösung (der Link der Seite zu den Beispiel: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html ) funktioniert leider nicht im IE7. Wobei die Lösung von MCC mit dem Link http://brunildo.org/test/shrink_center_4.html auch im IE7 funktioniert.
schönen Gruß
Robert aus D schrieb am 07.03.2007
Moin,
ich möchte hier keinem zu nahe treten oder gegen tabellenlose Layouts wettern, aber ein 100% funktionierende Tabelle durch einen CSS Hack zu umgehen ist doch der Sache keines Wegs dienlich.
Da würde ich ja eher noch zu Frames raten, wenn man so gegen eine einfache, und damit 100% konforme Designtabelle ist.
Und jetzt bitte keine auf Halbwissen fundierten Aussagen wie "Es verliert dadurch an Zugänglichkeit", denn das tut es definitiv nicht. Ich arbeite seit Jahren im Bereich Webdesign und Entwicklung, Screenreader und auch "kleine" Anzeigegeräte sind durchaus in der Lage eine Designtabelle von einer Content-Tabelle zu unterscheiden ;)
In diesem Sinne
Jeena Paradies aus Varberg schrieb am 08.03.2007
Nunja, du musst zugeben, es dient der Trennung von Inhalt und Layout. Spätestens beim nächsten Redesign rächt sich die Tabelle, da man die Subnavigation, die jetzt rechts ist, nicht links anordnen kann. Mit CSS ist das eine Sache von Sekunden an einer einzigen Stelle in einen statischen CSS-Datei.
Das Wort "Designtabelle" sagt doch schon per Definition aus, dass es nicht konform ist. Aber wer im Zeitalter moderner CMS mit Frames für Layoutzwecke kommt hat sich sowieso selbst ins Aus geschossen.