2. CSS: Formatierung und Anordnung mit Cascading Style Sheets

2.2 Bereiche anordnen mit <div>

In diesem Abschnitt erläutern wird, wie man verschiedene Bereiche auf einer HTML-Seite anordnet. Meine Beispiele verwenden dafür fürs erste ausschließlich den HTML-Tag <div>. Für den Ernstfall wird jedoch empfohlen, wann immer möglich "semantisch aussagekräftigere" Tags wie <header>, <footer>, <nav> etc. zu verwenden, auch wenn dies nichts am optischen Erscheinungsbild ändert. Grund ist, dass dadurch der HTML-Quelltext besser verständlich für andere Entwickler wird; dass Screenreader sich womöglich daran orientieren; dass Suchmaschinen besser "verstehen", was in Ihrem Quelltext was bedeutet.

Klicken Sie auf den Screenshot, dann gelangen Sie zur echten HTML-Seite. Lesen Sie sie!

Das Layout der obigen Seite ist aber immer noch sehr "von oben nach unten". Oft wollen wir auch eine horizontale Untergliederung, z.B. links einen schmalen Streifen für ein Navigationsmenü, rechts eine größere Fläche für den Inhalt, oben eine Leiste für verschiedene Optionen etc. Hier ist zum Beispiel mein vorheriges Rezept:

und hier ist ein (unscharf gemachter) Screenshot meines Gmail-Kontos:

Ich zeige Ihnen jetzt anhand einer Beispielseite mit unsinnigem Anhalt, wie man die verschiedenen Bereiche (Header, Navigationsmenü, Hauptinhaltsbereich) anordnen kann, welche Probleme dabei entstehen und wie man mit diesen dann umgehen kann. Klicken Sie sich durch:

  1. von oben nach unten
  2. drei Bereiche
  3. separate Scrollbalken
  4. schwimmender Header

Bereiche mit css grid anordnen

Wenn Ihre Seite eine deutliche Gitterstruktur haben sollte, dann ist es eventuell am Besten, wenn Sie Css Grid verwenden. Hier finden Sie Referenzen dazu:

An dieser Stelle geht mein Dank an Herrn Jakub Ciszak, der mich auf Css Grid aufmerksam gemacht hat und mir seinen Beispielcode zur Verfügung gestellt hat. Zum Abschluss hier noch ein Beispiel von mir.

Übung Erstellen Sie eine Webseite (mit css in separater Datei oder drinnen mit <style>-tags, Ihre Entscheidung), die ein Layout mit zwei Sidebars, einem Header, und einer großen Fläche für den Inhalt hat. Füllen Sie sie mit (gerne auch unsinnigem) Inhalt, damit man das Layout deutlich sieht. Sie dürfen die Bereiche verschiedenfarbig unterlegen, wenn Ihnen das hilft, dürfen aber auch gerne alles einfarbig lassen.
Übung Gestalten Sie eine komplexere Oberfläche mit mehreren Unterteilungen (orientieren Sie sich zum Beispiel an Gmail, die ist ziemlich komplex). Füllen Sie alles mit Inhalt (gerne auch Links und so weiter). Machen Sie alles einfarbig. Erreichen Sie aber, dass der Bereich, über dem gerade die Maus ist, irgendwie hervorgehoben wird.