flexibles CSS Layout

Letzte Woche hatte ich ein Seminar zum Thema CSS und eins über Dreamweaver gehalten. Es waren Teilnehmer sowohl von Roche Diagnostics als auch von Landessport Bund dabei, die mittels CMS die Inhalte ihrer Website betreuen. In diesen Seminaren kam die Frage nach einen flexiblen System zum Erzeugen eines CSS gesteuerten Layouts auf.

Nach ein paar Überlegungen kamen wir dann auf die Teilung des CSS-Designs in 4 Dateien:

  • basic.css
  • 2column.css
  • 3column.css
  • content.css

In der Basisdatei werden alle grundlegenden Formatierungen für das Layout, wie z.B. Kopf- und Fußbereich bzw. Navigationsspalte festgelegt. Zusätzlich wird das gesamte Design zentriert und auf eine festen Breite eingestellt. Wobei die feste Breite nicht zwingend mit Pixeln zu lösen sein muss, denn in CSS können z.B. Breitenangaben auch in Em angegeben werden.

Grundlayout

In der Inhaltsdatei werden dann alle restlichen für die Darstellung wichtigen Formatierungen, wie z.B. Absätze Listen und Tabellen, definiert. Zusätzlich können dort auch Ausrichtungen von Bilden angegeben werden.

Falls man nun aber einige Unterseiten brauchen sollte, die ein 2 spaltigen Layout benötigen, dann bindet man einfach, zusätzlich zu den beiden Grunddateinen, die 2-Spaltige mit ein. In der HTML-Datei gruppiert man nun noch über 2 DIV-Container die Inhalte in die jeweiligen Spalten.

2 spaltiges Layout

Gleiches gilt auch für ein 3 spaltiges Layout. Hier gibt es auch eine zusätzliche CSS-Datei und auch hier muss man den jeweiligen Inhalt in die 3 Spalten aufteilen.

3 spaltiges Layout

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.