4.5 Inhaltsbereich

In diesem Kapitel möchte ich Ihnen letztendlich zeigen, wie Sie den Inhaltsbereich für diese Seite gestalten können. Mit Inhaltsbereich ist in diesem Fall alles unterhalb der Navigation gemeint, einschließlich dem Fußbereich der Seite, in dem Sie etwa ein Copyright oder weitere Links unterbringen können.

HTML

In Quellcode 1 erweitere ich den Quellcode um den Inhalts- und Fußbereich.

Den Bereich für den Inhalt umfasst ein div-Element mit der content-Id in den Zeilen 47 bis 60. Zunächst definiere ich eine h1-Überschrift, die nach Möglichkeit auf jeder Ihrer Unterseiten vorkommen sollte, da diese eine nicht unwichtige Relevanz für Suchmaschinen wie etwa Google oder Bing hat. In diesem Fall habe ich der Überschrift noch eine Klasse zugewiesen, da diese in den Kapiteln noch einen zusätzlichen Abstand nach links erhalten soll. Dies könnte unter Umständen für Sie irrelevant sein.
Anschließend habe ich in Zeile 49 die Optionen für jedes meiner Kapitel dieser Webseite definiert. Darin befindet sich eine Liste (ul) mit drei Elementen, wobei zum Beispiel das erste Element zum Setzen eines Lesezeichens ein JavaScript aufruft (dazu in Kapitel 6 mehr) und die anderen beiden Links zunächst nicht gesetzt wurden, da diese vorerst nicht weiter erläutert werden.
In Zeile 56 folgt das eigentliche Kapitel samt Inhalt, wobei die Klassenbezeichnung für Ihre Webseite sicherlich anders lauten würde. Damit die Optionen links und der Kapitelinhalt nebeneinander dargestellt werden können, verwende ich die float-Eigenschaften in CSS. Da der Inhaltsbereich somit lediglich umfließende Elemente enthält, benötigen Sie zum Beispiel ein Element wie in Zeile 59, durch das die float-Eigenschaften gestoppt werden. Der div-Container sorgt dafür, dass der Hintergrund bis unter die beiden umfließenden Elemente dargestellt wird.
Zu guter Letzt fehlt der Fußbereich, der in den Zeilen 61 bis 63 definiert wird. Darin befinden sich beispielsweise die beiden unteren Rundungen.

CSS

Der Inhaltsbereich benötigt einige Zeilen CSS-Quellcode, den Sie Ihrer CSS-Datei hinzufügen sollten. Inwiefern die in Quellcode 2 gezeigten Definitionen auch für Sie sinnvoll sind müssten Sie selbst entscheiden. Generell lohnt es sich, jegliche Eigenschaften nachzuvollziehen, da ungenutzte CSS-Eigenschaften die Lesbarkeit der Datei verschlechtern.

Da viele der in Quellcode 2 definierten Eigenschaften recht einfach zu verstehen sein sollten, möchte ich lediglich auf ein paar davon eingehen. Dazu gehört etwa die Klassen-Definition in Zeile 10 und 15 für die Optionen und den Inhaltsbereich. Beide Klassen erhalten jeweils die float:left- bzw. float:right-Eigenschaft, was so viel bedeutet, dass das Container-Element linksbündig bzw. rechtsbündig angeordnet wird und alle darauf folgenden Elemente um es herum fließen. Damit dies funktioniert habe ich den beiden Klassen feste Breitenangaben zugewiesen. Die Angabe von #content vor den Klassen kann weggelassen werden, aber was ich Ihnen damit gerne zeigen möchte ist, dass wenn Sie Ihre Klassen so allgemein wie etwa Optionen oder Kapitel definieren, Sie diese unterschiedlich einsetzen können. In diesem Fall werden die Eigenschaften nur dann gesetzt, wenn sich beispielsweise das Element für die Optionen innerhalb der content-Id befindet. Somit können 2 gleich lautende Klassen anhand des Oberelements unterschiedliche Eigenschaften erhalten.
Diese Möglichkeit der Verschachtelung können Sie beliebig fortsetzen, wie es etwa Zeile 35 zeigt. Dort wird das Icon für den Lesezeichen-Link als Hintergrund definiert.
Ab Zeile 70 folgen ein paar allgemeine Definitionen, die für die ganze Webseite gelten sollen. Mit /* können Sie in CSS Kommentare beginnen und mit */ beenden lassen. Um den Kommentar weiter hervorzuheben können Sie auch mehrere Sternchen oder Zeilen verwenden.
Ziele 83 zeigt, dass das zuvor in Zeile 71 definierte h1-Element zusätzliche Eigenschaften erhalten kann, falls diesem eine chapter-Klasse zugewiesen wird.
Zum Schluss möchte ich Sie noch auf Zeile 106 aufmerksam machen. Dort erhält jedes Listenelement einen Außenabstand von 0 Pixeln. Null ist der einzige Wert, der keine Maßangabe erfordert. Daher sollten Sie stets anstatt 0px einfach 0 schreiben.

Ergebnis

In diesem Kapitel hat die Webseite abschließend ihren Inhaltsbereich erhalten. Dieser kann, wie beispielhaft in Abbildung 1 dargestellt, eine Überschrift und mehrere verschieden breite Inhalte haben. Abgeschlossen wird die Seite durch den Fußbereich, in dem die Rundungen der Seite definiert werden.