CSS: Header, zwei Spalten und der Footer
 

So, ein Thread für Nachtaktive hier im Forum. Es dreht sich um das meinen Webhostingindex um genau zu um das Layout, welches auf XHTML und CSS basiert. Und wie ich im Bett lage, grauste mir vor einem Gedanken: [I]Was ist, wenn du eines Tages alle Templates ändern musst, weil die Position eines Elements ändern musst?[I]

Also wird es nichts aus dem Schlafen und ich bin nun am überlegen, wie ich dieses Problem umsetzen. Zuerst eine Skizze vom Layout und brav nummiert.

http://webhostingtalk.de/reimer/layout.jpg

Folgende Bedingungen:
1. Keine Verwendung von Wraps
2. Die Reihenfolge muss erhalten bleiben (1-4)
3. IE5, IE6, Opera7, Firefox sollen die Struktur dargestellen, wobei ich hier nicht auf einzelne Pixel wert lege.

Folgende Lösungen:
1. Floating
2. Absolute Positierung

Problem:
In der Regel besitzt Element 3 weniger Inhalt als Element 2 und resultiert, dass es nicht die komplette Höhe besitzt. Dies wäre natürlich durch den Einsatz eines Wrappers zu umgehen, wie bei Alistapart beschrieben, doch wollte ich davon Abstand halten.

Eine andere Möglichkeit wäre den im Bodytag den Hintergrund zu definieren, jedoch wären dann Ausblendungen von Element 3 schlecht, aber zieht sich dann der Hintergrund durch das ganze Dokument. Auch nicht mein Wunsch.

Lösungen?
Jemand einen Tipp für solch ein Layout?

Hm, da suchst du das 310PS starke 2-Liter Auto mit einer Höchstgeschwindigkeit von 500km/h..
Es ist schlicht unmöglich sowas für IE5 auf die Beine zu stellen und um den Wrapper wirst du nicht drumherum kommen. Es hat ja schliesslich einen Grund warum selbst Alistapart diesen empfiehlt :)

So wenig wie möglich, aber so viel wie nötig heisst es ja normalerweise, aber um die Kompatabilät zu erweitern solltest du lieber einen Layer mehr verwenden und nicht so knauserig sein ;)

Ich würde auf Floating setzen, das absolute Positionieren war nie mein Ding. Damit bekommst es zwar pixelgenau hin, aber zukunftssicher ist es nicht und es kann sogar zu arg merkwürdigen Ergebnissen führen :D

Hat Alistapart dazu einen Artikel verfasst (URL?) oder sprecht ihr von einer generellen Empfehlung?

Ich meine -> http://www.alistapart.com/articles/fauxcolumns/
Kann aber sein, das Reimer was anderes meint ;)

btw. die haben nen neuen Artikel rausgebracht :)

Den Artikel meinte ich. Eine Möglichkeit wäre hier beschrieben, http://www.satzansatz.de/cssd/columnswapping.html, doch sieht es doch nach dem Einsatz eines Wrappers aus. Und zwar werde ich Element 2 und 3 wrappen. Gut, heute sind wieder Layoutarbeiten angesagt :)

Ahjha, Danke - interessant!

Ich versteh den Sinn von http://www.satzansatz.de/cssd/columnswapping.html nicht so recht irgendwie...

(ganz neu hier, hallo!)

Reimer,
nein, die columnswapping-Methode von mir gestattet nicht zwei verschieden breite Spalten 2,3, und ja, es werden Wrapper benutzt.

Die Sinnfrage von LoneleyPixel stellt sich natürlich, wenn die Höhe einer Spalte bekannt wäre, oder die längste Spalte gegeben ist, oder IE in quirks mode genutzt wird. Vielleicht ist auch eine Tabelle gewünscht.

Eric Meyer und Doug Bowman stellten am 3.9. eine erweiterte Sliding Faux Columns Methode vor, die vielleicht interessant ist:
http://www.meyerweb.com/eric/thoughts/2004/09/

...alistapart/fauxcolumns: deutsche Übersetzung
 

Eine deutsche Übersetzung gibt es hier: byteshift.de/alistapart/fauxcolumns