Eines der Probleme bei der Umstellung auf ein flexibles Layout war, dass die Platzierung der Hauptbereiche vorher durch eine Tabelle vorgenommen wurde. Mir war nicht klar, wie unterschiedlich divs und Tabellen bei flexiblen Größenangaben (also Prozentangaben) skalieren.
Das Ziel war: Ein Layout, das sich nahezu beliebig stark verkleinern lässt, ohne einfach aus dem Fenster zu wandern.
Fehlgeschlagene Methode: Eine flexible Tabelle mit einem div für den Header obendrauf:
Header als div: 70%
|
Tabelle 70%
|
content 70%
|
sidebar 30%
|
Problem: Betrachtet man das ganze in einem zu kleinen Fenster, wird der Header gut skaliert. Die Tabelle dagegen, mit einem mit dem pre-tag markierten Codestück darin, skaliert irgendwann nicht mehr mit, sondern wird größer als die vorgegeben 70%.
Im Browser testen
Lösung: Auf die Tabelle verzichten:
Header als div: 70%
|
Hauptbereich als div 70%
|
content 70%
|
sidebar 30%
|
Die divs respektieren die Breitenangabe. Es ist eine Eigenart der Tabelle, ihrem Inhalt Priorität einzuordnen.
Im Browser testen
Entstehende Probleme:
- Das Bild ragt irgendwann aus der Seitenleiste. Das kann ein overflow: auto reparieren.
- Die Seitenleiste ist nicht genau so lang wie das content-div. Faux columns schafft abhilfe.
- Die Vorschau der Beiträge im Adminbereich von Serendipiy funktioniert nicht mehr. Auch hier hilft ein overflow: auto, das auf serendipity_iframe angewendet wird.