Drei Spalten
Beschäftigen Sie sich zuerst mit Stylesheet A (dreispalten.css) - hier werden die einzelnen Bereiche dieses Drei-Spalten-Layouts definiert. Es weist einige Besonderheiten auf, die Sie analysieren sollten, bevor Sie sich mit dem Füllen und Formatieren der einzelnen Blöcke vergnügen.
Sie finden im Stylesheet in einigen der Blöcke die Anweisung border: solid 0px #000; - setzen Sie die Border auf 1px um zu sehen, wie die einzelnen Elemente 'fließen'.
Ein Haken bei diesem Layout: Wenn Sie genügend 'Teaser' in der rechten Spalte definieren, wird die blaue Fußzeile überschrieben, d.h. die Teaser fließen über dieses Element hinaus. Ich betrachte das als Stil-Element, aber natürlich müssen sie diese Tatsache bei der Gestaltung der Fußzeile berücksichtigen. Lassen Sie rechts genügend Platz, damit kein Text von überfließenden Teasers verdeckt wird.
Eine weitere Eigenart findet sich in der Definition des mittleren Bereiches, dem 'content'-Block. Sie finden dort die Anweisung margin-bottom:75px;. In dieser Margin muss die Höhe des Footer-Elements berücksichtigt werden, da dieses sonst unter dem Fensterrand verschwindet. Experimentieren Sie mit der Pixel-Angabe, um den Workaround zu 'verstehen'. Warum er in dieser Form benötigt wird, kann ich momentan leider nicht erklären :-)
Alles andere ist Ihnen sicherlich verständlich oder kommt Ihnen zumindest bekannt vor, wenn Sie bereits die anderen Workshops durchgearbeitet haben. Die sonstigen Formatierungen dieser Seite finden Sie in Stylesheet B (workshop.css). Kopieren Sie sich den Quelltext dieser Seite sowie die beiden Stylesheets und experimentieren Sie nach Herzenslust. Viel Spaß!