CSS-Design in 3 (oder 5) Schritten

Schritt 2: Layout mit CSS

• Grundsätzliche Möglichkeiten .
• Zuweisung der Layoutangaben mit eindeutigen Kennungen (IDs) .
• Quelltextbeispiel .
• Maßeinheiten .
• Zur Erinnerung: Es geht nur um die Kästen! .
• Statisch positionierte Kästen auf wob11.de (position:static, Default) .
• ... und ein freischwebender Kasten (float) .
• Weitere Positionierungsmöglichkeiten .
• Tipps für das Layouten .

Wir haben nun das Layout von  http://wob11.de in mehrere kleine Kästen unterteilt. Diese Kästen sind alle neben- bzw. untereinander angeordnet, aber sie hätten auch völlig unabhängig voneinander sein und sich gegenseitig überlagern können. Im vorliegenden Layout ist das nicht gegeben, was für den Einstieg ganz gut ist. Auch sind keine verschachtelten Kästen notwendig.

Grundsätzliche Möglichkeiten

Es gibt mehrere Möglichkeiten, die Kästen im CSS-Layout zu positionieren:

1. relative Positionierung in Abhängigkeit des vorherigen Kastens (position:static, Default)
2. relative Positionierung als freischwebender Kasten (float)
3. Positionierung mit Maßangaben (position:relative und position:absolute)

Man sollte die Positionierung mit position:absolute nicht einsetzen, wenn der entsprechende Kasten auch mit position:static gestaltet werden kann. Je einfacher das Layout mit CSS gestaltet wird, desto weniger Bugs auftauchen und desto barrierefreier wird das Layout. Kurz: je einfacher, desto robuster!

Eine weitere Möglichkeit mit position:fixed funktioniert nur in manchen Browsern.

Zuweisung der Layoutangaben mit eindeutigen Kennungen (IDs)

Bei der Programmierung bekommt jeder einzelne Kasten (DIV) in dem Layout eine Kennung (ID). Wenn diese Kennung eindeutig ist, dann lassen sich über entsprechende Angaben in einer CSS-Datei ebenfalls eindeutige Layout-Angaben zuweisen. Beispielsweise, wenn wir für einen Kasten, der die Kopfzeile beinhalten soll eine Kennung "kopf" zuweisen, kann im CSS ebenfalls eine Deklaration vorgenommen werden, die nur die Kennung "kopf" definiert. Anderen Bereiche sind von diesen Angaben völlig unabhängig.

Quelltextbeispiel

Im HTML:

<div id="kopf">
  ... Inhalte der Kopfzeile ...
</div>

Im CSS:

#kopf {
  margin:0px;
  height:80px;
  }

Maßeinheiten

Es gibt in CSS sehr viele verschiedene Maßeinheiten. Angefangen mit Pixel und Punkt über Millimeter und anderen Einheiten bis hin zu relativen Angaben mit Prozent und em (Breite des Buchstaben m des Benutzeragenten). Um ein barrierefreies Webdesign mit CSS zu erzielen, ist es notwendig mit relativen Angaben zu arbeiten. Das gilt auch für das Layout. Grundsätzlich ist für Text immer die Einheit em zu benutzen. Zu Layout-Zwecken ist em aber nur dann sinnvoll einzusetzen, wenn der zu definierende Kasten Text enthält. Wenn ein Kasten keinen Text enthält, sondern beispielsweise nur Grafik, dann sind je nach dem %-Angaben (insbesondere Breite des Kastens, sowie Abstände nach links und rechts, sowie px-Angaben anzuwenden:

• em insbesondere für die Formatierung von Text.
  Wenn ein Kasten skalierbaren Text enthält, dann ist em für Maßangaben des Kastens geeignet.
• %-Angaben insbesondere für Layout.
  Nützlich, jedoch führen solche Angaben in manchen Browsern wie MSIE 5 zu unvorhesehbaren Ergebnissen.
• px insbesondere für Layout und Grafiken.
  Unveränderbare Maßangaben sind dann geeignet, wenn die Inhalte eines Kastens nicht skalierbar sind oder wenn der verfügbare Platz in einem Kasten so großzügig ist, dass die Skalierbarkeit gewährleistet ist.

Zur Erinnerung: Es geht nur um die Kästen!

Beim Layouten geht es erst mal darum die Kästen, die wir aus dem grafischen Design bekommen haben, alleine mit CSS-Eigenschaften nachzubilden. Es geht dabei nur um die Kästen, nicht um die Inhalte! Wenn wir mit der Kopfzeile beginnen sollen, dann hat diese eine bestimmte Breite, eine bestimmte Höhe und möglicherweise auch bestimmte Abstände nach oben, rechts, unten und links. Grundsätzlich sind diese Maßangaben die einzigen Maßangaben, die man zum Layouten braucht.

Statisch positionierte Kästen auf wob11.de (position:static, Default)

Diese Positionierungsangabe funktioniert ganz einfach. Im Prinzip muss dem Kasten nur eine Breite und/oder eine Höhe zugewiesen werden, also beispielsweise:

1. width:100%; und/oder
2. height:80px;

Es kann sogar auf diese Angaben verzichtet werden, aber mindestens eine Angabe wird i.d.R. notwendig sein. Die Angabe position:static; ist nicht erforderlich, da diese Angabe der Default-Wert eines jeden Kastens ist.

Wenn keine besonderen Angaben gemacht werden, dann wird ein Kasten dieser Art linksbündig im Fließtext angezeigt. Hat der Kasten eine Breite und ist der verfügbare Platz im Fließtext nicht mehr ausreichend, so wird der Kasten unterhalb des Fließtextes dargestellt.

Mit margin kann zusätzlich noch der Abstand des Kastens zum restlichen Fließtext definiert werden.

Für unsere Beispielseite  http://wob11.de wurde im wesentlichen diese Technik verwendet.

Ein einfaches Modell: minimaler Gestaltungsaufwand und sehr robust.

Das grundlegende Layout sieht im CSS wie folgt aus:

#kopf { margin:0; height:80px; }
#hauptnav { margin-top:5px;}
#rubrik { margin: 10px 0px 0px 180px; }
#inhalt { margin-left:180px; }
#fuss { margin-left:180px; }

Für das grundlegende Layout der Seite sind keine weiteren Angaben erforderlich. Natürlich muss das HTML entsprechend stimmen. Für das Beispiel sind nur folgende Angaben in der HTML-Datei erforderlich:

<div id="kopf">Kopfzeile</div>
<div id="hauptnav">Hauptnavigation</div>
<div id="rubrik">Rubrik</div>
<div id="inhalt">Inhalt der Seite</div>
<div id="fuss">Fußleiste</div>

Um die Darstellung besser nachvollziehbar zu machen, habe ich im Beispiel den einzelnen Kästen noch eine Hintergrundfarbe mittels background zugeordnet.

Es fehlt noch die "Zweitnavigation", die im nächsten Abschnitt beschrieben wird.

... und ein freischwebender Kasten (float)

Die Positionierung mit float ist ebenfalls eine relative Positionierung mit der aktuellen Position um Fließtext als Bezugspunkt. Mit float:left und float:right kann man angeben ob dieser Kasten linksbündig oder rechtsbündig positioniert sein soll. Diese Positionierungsangabe kennzeichnet sich durch zwei besondere Merkmale aus. Sie wird

1. links- bzw. rechtsbündig innerhalb des aktuellen Bereiches (Kasten) dargestellt und
2. wenn der nachfolgende Text im Layout länger wird als die Höhe des Kastens, dann fließt er anschließend unterhalb des Kastens weiter.

Zu 1.: Auf der Beispielseite wird ein Kasten ("Zweitnavigation") mit float:left; erzeugt, die jedoch nicht in einem anderen Kasten verschachtelt ist. In diesem Fall wird der mittels float erzeugter Kasten am linken Bildschirmrand dargestellt.

Drei Zeilen für die gesamte Website.

Im HTML müssen wir zwischen "Hauptrubrik" und "Inhalt" nun noch folgende Zeile einfügen:

<div id="zweitnav">Zweit navigation</div>

zu 2.: Wenn nicht gewünscht wird, dass der nachfolgende Text unterhalb des freischwebenden Kastens weiterfließt, dann ist ein weiterer Kasten für den nachfolgenden Text sinnvoll. Auch dies wurde auf der Beispielseite vorgenommen, indem der freischwebende Kasten die Breite 160px erhält und die drei rechts positionierten Kästen ("Rubrik", "Inhalt" und "Fussleiste") alle einen Abstand von 180px zum linken Rand des Bildschirms erhalten. So kann es nicht zu unerwünschten Umbrüchen kommen.

Damit ist das Layout von  http://wob11.de zunächst abgeschlossen.

Weitere Positionierungsmöglichkeiten

Der Vollständigkeit halber sei noch auf weitere Möglichkeiten der Positionierung von Kästen hingewiesen:

1. position:relative erlaubt eine relative Positionierung ähnlich wie position:static, nur dass man zum vorherigen Kasten weitere Abstände mittels top, left und right definieren kann.
2. position:absolute erlaubt Ihnen Kästen zu definieren mit einem bestimmten Abstand zum oberen und einer der seitlichen Ränder des Fensters zu definieren.
3. position:fixed erzeugt ein Kasten, der an der angegebenen Position bleibt und mit der Seite nicht gescrollt wird (funktioniert nicht in allen Browsern)

Wichtig: ein relativ positionierter Kasten orientiert sich immer an dem zuletzt relativ positionierten Kasten. Wenn keine relativ positionierten Kästen vorher definiert werden, dann orientiert sich die Positionierung des aktuellen Kastens an dem oberen Seitenrand. Wenn unmittelbar vor dem aktuellen Kasten ein absolut positionierter Kasten vorkommt und davor wiederum relative Kästen, dann ist der Bezugspunkt des neuen relativ positionierten Kastens das Ende des zuletzt relativ gesetzten Kastens. M.a.W.: Absolut positionierte Kästen lassen den Bezugspunkt für einen nachfolgenden Kasten unverändert.

Tipps für das Layouten

Für das Layouten sind im Wesentlichen die folgenden CSS-Eigenschaften erforderlich:

• position oder float,
• ggf. height und
• ggf. margin oder width.

Während der Testphase sollten die einzelnen Kästen mit unterschiedlichen Hintergrundfarben (background) belegt sein. Kanten (border) und Innenabstände (padding) führen in manchen Browsern zu unerwünschten Ergebnissen!

Auch wenn zum Nachvollziehen es sinnvoll erscheint mit den vorgesehenen Inhalten innerhalb der Kästen zu arbeiten, kann dies möglicherweise zu Problemen führen, nämlich dann, wenn zu den Formatierungseigenschaften übergegangen wird.

Es empfiehlt sich deshalb mit ganz einfachem Dummy-Text zu arbeiten und ggf. mit Farben.

Über das CSS-Design

Lesen Sie,  warum ich mich an die Standards halte und warum das Layout mit  Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der  Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?

Geben Sie Ihr Stichwort ein:

Entspricht die Seite den W3C-Normen?

Die  Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie  Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.