alps hypertexte

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.