Der Inhaltsbereich

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Nachdem das Design der Kopfleiste fertiggestellt ist, kümmern wir uns als Nächstes um das Design des Inhaltsbereichs. Dieser gesamte Bereich ist bereits in das div-Element #content eingebettet. In dem grafischen Entwurf hat dieser Bereich einen weißen Hintergrund, umrahmt von einem etwas dunkleren Rand, der sich von dem farbigen Hintergrund des Elements #wrapper abhebt.

Wir beginnen mit einer CSS-Regel für #content, indem wir den folgenden Code in unser Stylesheet einfügen:

Diese Regeln sollten mittlerweile ziemlich selbsterklärend sein: Wir haben dem Element einen weißen Hintergrund und einen Rand gegeben, der ein klein wenig dunkler als der Hintergrund von #wrapper ist. Außerdem haben wir den Innenrand auf den Wert 0 gesetzt. Weil wir den Innenrand des Elements #wrapper mit einer Breite von 10 Pixeln definiert haben, wird ein Rand mit diesen 10 Pixeln Breite in der Hintergrundfarbe von #wrapper um das Element #content herum angezeigt. Das ist genau der Effekt, den wir, ausgehend vom grafischen Entwurf, erzielen wollten.

Als Nächstes werden wir einen Abstand zwischen dem div-Element #content und dem Rahmen einfügen. Wir könnten nun jedem einzelnen Element innerhalb dieses Bereichs einen Außenrand zufügen. Es ist aber einfacher, ein neues div-Element innerhalb von #content zu erzeugen, dem wir das Attribut class="inner" zuweisen. Dann können wir für #content .inner einen 30 Pixel breiten Außenrand definieren, um diesen Abstand zu erzeugen.

Jetzt können wir uns den Inhalten des div-Elements #content zuwenden. Als Erstes haben wir es mit dem Bild zum World Cup '06 zu tun, das ganz oben im Inhaltsbereich angezeigt wird. Ich habe es an dieser Stelle in das Dokument eingefügt, weil ich es mit der Eigenschaft float an die rechte Seite gleiten lassen möchte.

Fügen Sie hierzu die Stilregeln für das Element #worldcuplogo in das Stylesheet ein. Die Eigenschaft float hat den Wert right und es sind rechte und untere Außenränder für das Logo definiert, damit ein Abstand zu den umfließenden Inhalten hergestellt wird.

Sobald wir das Attribut id="worldcuplogo" in das <img>-Tag eingefügt haben, wird es am rechten Rand der Seite angezeigt und von den weiteren Inhalten umflossen. Das können Sie in der folgenden Abbildung sehen.

Abbildung: Das Logo schwebt am rechten Rand.

Jetzt nimmt unser Layout wirklich schon Gestalt an. Nachdem ein paar sehr einfache CSS-Regeln, ein paar div-Elemente und ein Identifikator eingefügt wurden, kommen wir dem Entwurf, mit dem wir gestartet sind, schon sehr nahe. Was mir bei der Entwicklung von Layouts mit CSS gefällt, ist, dass es möglich ist, einfache Seiten in sehr kurzer Zeit attraktiv zu gestalten. Wenn es sein muss, können Sie eine Nachrichtenseite oder ein einfaches Layout für Ankündigungen, wie diese Seite hier, in einem ganz kurzen Zeitraum erstellen.

Die Überschrift »Announcement« ist ein h1-Element. Dieses können wir mit einem Selektor ansprechen, der für alle h1-Elemente innerhalb eines div-Elements #content gelten soll.

Diesem Element haben wir das Bild mit dem Ball als Hintergrundbild unterlegt, das in unserem Entwurf links von der Überschrift angezeigt wird. Dieses Bild möchten wir nur ein einziges Mal anzeigen, deshalb setzen wir die Eigenschaft background-repeat auf den Wert no-repeat. Außerdem benutzen wir die Eigenschaft background-position, um das Bild nach links zu schieben und es vertikal zu zentrieren.

Damit die Überschrift das Bild nicht überlappt, bekommt sie auf der linken Seite einen Innenrand von 30 Pixeln. Die Innenränder oben und unten sorgen für einen zusätzlichen Abstand zwischen der Überschrift und den Rahmenlinien. Wie das Layout im Moment aussieht, können Sie in der folgenden Abbildung nachvollziehen.

Abbildung: Die Überschrift mit ihrem Hintergrundbild.

Jetzt können wir uns der h2-Überschrift widmen, die unterhalb der Kopfleiste angezeigt wird. Unser Entwurf bestimmt, dass diese Überschrift der zweiten Ebene in einer größeren Schrift dargestellt werden soll als die h1-Überschrift. Die Eigenschaften, die wir für die Regel #content h2 definieren müssen, sind ziemlich einfach.

Hier haben wir für die Überschrift der zweiten Ebene eine Schrift mit Serifen ausgewählt, damit sie zu den Vorgaben des Entwurfs passt. Die restlichen Texte, die oberhalb des Turnierplans ausgegeben werden, sind im HTML-Code als Absätze ausgezeichnet. In diesen Absätzen möchte ich zuerst den Zeilenabstand ein wenig vergrößern. Das erreichen wir mit der Eigenschaft line-height.

Der Text direkt unterhalb der h2-Überschriften gibt das Datum des betreffenden Artikels an. Dafür fügen wir dem öffnenden <p>-Tag für diese Zeile das Attribut id="dateline" hinzu und erzeugen für dieses Attribut die folgende Regel:

Der nächste Textabsatz wird in unserem Entwurf fett dargestellt. Deshalb definieren wir für diesen öffnenden <p>-Tag das Attribut class="intro" und schreiben die folgende Regel für diese Klasse in unser Stylesheet:

Hervorragend! Alle Inhalte der Seite, mit Ausnahme der Tabelle für den Turnierplan, sind fertig formatiert. Die Tabelle werden wir als Nächstes angehen, aber zuvor nehmen wir uns einen Moment Zeit, um uns an den Früchten unserer Arbeit zu erfreuen. Schauen Sie sich das bisherige Ergebnis im Browser an. Es sollte so wie in der nächsten Abbildung aussehen.

Abbildung: Außer der Tabelle sind alle Inhalte formatiert.