"Share your knowledge. It is a way to achieve immortality." Dalai Lama (2008)

Drei-Spalter, faux absolute positioniert

Die Suche nach dem perfekten 3-Spalter ohne Tabellen-Markup wurde in der Vergangenheit oft mit der Suche nach dem "heiligen Gral" verglichen. Mittlerweile gibt es viele "Holy Grail"-Implementationen; hier ist mal eine faux absolut positionierte.

Im Gegensatz zur A List Apart-Definition vom holy grail, der fixe Seitenleisten im Layout vorsieht und nur den Contentbereich elastisch lässt, definiere ich meines nach "adaptation"-Manier: Es muss sich anpassen können. Nicht nur der Seite, auch den Bedürfnissen des Layouters.

Um was zum Gucken zu geben: Faux absolute positioned 3 col layout.

Dieser 3-Spalter sieht aus wie Altbekannte, hat aber folgende Eigenschaften:

  • Ob es ein fixes, elastisches oder em-basiertes Layout ist, lässt sich an einer Stelle im Stylesheet einstellen!
    In der Canvas-ID stehen die relevanten Anweisungen. Die derzeitige Einstellung im Mockup ist width: 100%;, was daraus ein elastisches Layout macht. Setzt man diese auf einen em-Wert, verhält es sich bei älteren Browsern wie ein em-basiertes Layout, weil die Spalten per FAP in Prozenten gelayoutet sind. Sollte man den Drang nach einem festen Layout verspüren, setzt man einen Pixel-Wert. Ein zusätzliches margin: 0 auto; zentriert das Ganze.
  • Das Layout lässt sich dank FAP-Technik sehr leicht um weitere Spalten erweitern. Dabei kann man die Reihenfolge der einzelnen Spalten im Quellcode unabhängig von ihrer optischen Anordnung genau kontrollieren und so aus SEO- oder Accessibility-Gründen dafür sorgen, dass der wichtigste Content immer oben steht.
  • Es ist ziemlich Browser-Kompatibel: Firefox 2.x und 3.x, Opera 9, MSIE 7.x, 6.x, 5.5x und 5.0x, Safari 3 und Konqueror 4.1.3 (mit leichten Abweichungen im Abstand). Und zwar ohne Browserweichen oder spezifische Hacks.

Ein Nachteil soll nicht verschweigen werden: Es sind ne Menge divs nötig, um diese Eigenschaften hinzukriegen. Macht also nicht gerade ein schlankes DOM, wenn man sich noch weitere verschachtelte Elemente im Contentbereich vorstellt. Es ist halt vor dem Einsatz abzuwägen, worauf man mehr Wert legt.

Defined tags for this entry: , ,

Comments

Display comments as (Linear | Threaded)
  1. 1

    Loewenherz: Meine Güte Alp, alter Weggefährte, nach zwei Wochen noch kein Kommentar zu diesem Posting? Dabei ist dein heiliger Gral durchaus ansehnlich. Und ich finde die Container vertretbar (aus meiner Sicht als SEO heraus).
    iyi günler
    Loewenherz

  2. 2

    alp: Hi Frank ... also ich habe keinen Kommentar gelöscht oder so ;-)

    Beste Grüße (die Spinne unten rechts ist klasse)

  3. 3

    Sandra: Nettes Tool. Sowas kann man als Blogger immer brauchen. Danke

Add Comment


Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
BBCode format allowed
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA





 

 

das Ç - logo von Alp Uçkan