Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

3.1 Die Seite in Bereiche einteilen: div

div ist ein Block-Element, mit dem man andere Elemente wie Absätze, Listen und Grafiken zu einem gemeinsamen Bereich (div = division = Bereich) zusammenfassen kann.

Anders ausgedrückt: div ist ein Container, eine Kiste, eine Box, in der mehrere andere Kisten aufbewahrt werden können, um sie zum Beispiel später per CSS gemeinsam gestalten zu können.

Vier Bereiche: Kopf, Navigation, Text und Fußzeile

Fast alle Webseiten haben einen Kopfbereich mit einem Logo, einen Bereich für die Navigationselemente, einen Bereich für den Inhalt und eine Fußzeile. Die folgende Minimalausstattung entspricht dem und hat sich als Grundlage für einfache Layouts bewährt:

  • Kopfbereich mit Logo und Slogan
  • Navigationsbereich mit Navigationselementen
  • Textbereich mit Text und Grafiken
  • Fußzeile mit Platz für Adresse, Copyright, Impressum usw.

Um die Bereiche im Quelltext voneinander unterscheiden zu können, erhalten sie mit dem Attribut id einen eindeutigen Namen. In HTML sieht das so aus:

  • <div id="kopfbereich"> </div>
  • <div id="navibereich"> </div>
  • <div id="textbereich"> </div>
  • <div id="fussbereich"> </div>

Die Einteilung in diese Bereiche ist die Grundlage für einfache Layouts mit ein oder zwei Spalten. Bei komplexeren Layouts ist unter Umständen eine etwas andere Aufteilung sinnvoll, aber  zunächst einmal leisten diese vier Bereiche gute Dienste.

Der Schutzumschlag: wrapper

Viele Bücher haben einen Schutzumschlag, einen zusätzlichen Umschlag um den festen Einband, der die Aufgabe hat, diesen zu schützen (und der sich einfach und billig bedrucken lässt). Einen solchen Schutzumschlag benötigt Ihre Webseite auch: einen Bereich, der alle anderen Bereiche umfasst.

Dieser Bereich hat inhaltlich keine Bedeutung und ist im Grunde eine Dopplung von body, erweist sich aber beim Layouten mit CSS als sehr praktisch. Er wird auf vielen Webseiten wrapper (»räpper« gesprochen) genannt, was auf Deutsch »Schutzumschlag« heißt. Mit vollem Namen heißt er <div id="wrapper">.

Die Bereiche erstellen mit div

Die folgenden Bereiche erstellen Sie gleich zu Anfang im body der Webseite.

ToDo: Die Webseite mit div in Bereiche einteilen
  1. Öffnen Sie die Startseite index.html.
  2. Fügen Sie den hervorgehobenen Quelltext hinzu:

    <body id="startseite">
    <div id="wrapper">

    <div id="kopfbereich">

    </div> <!-- Ende kopfbereich -->

    <div id="navibereich">

    </div> <!-- Ende navibereich -->

    <div id="textbereich">

    </div> <!-- Ende textbereich -->

    <div id="fussbereich">

    </div> <!-- Ende fussbereich -->

    </div> <!-- Ende wrapper -->

    </body>

  3. Speichern Sie die Seite.

Bei der Darstellung im Browserfenster hat sich nichts geändert, aber bei der Gestaltung per CSS werden die Bereiche und die mit id vergebenen Namen wichtig. 

Die Kommentare nach jedem </div> wirken momentan vielleicht etwas übertrieben, helfen aber, die Übersicht zu behalten, auch wenn Anfangs- und Ende-Tag später etwas weiter auseinanderstehen.

Visuell: schematische Darstellung der div-Bereiche

Mit den div-Elementen erzeugen Sie rechteckige Kästchen auf der Webseite, in denen andere HTML-Elemente wie Überschriften und Absätze später aufbewahrt werden. Schematisch dargestellt sieht das so aus wie in der folgenden Abbildung, in der auch auch deutlich zu sehen, dass der Wrapper im Grunde eine Dopplung von body ist:

Abbildung 3.1: Schematische Darstellung der div-Bereiche
Abbildung 3.1: Schematische Darstellung der div-Bereiche