Der Hauptbereich

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

Weiter geht's mit der Gestaltung des Hauptbereichs der Seite. Als Erstes werden wir ein neues div-Element namens main definieren, das sowohl die Seitenleiste als auch die div-Elemente für die Inhalte umschließt. Damit haben wir es leichter, diese beiden Bereiche unterhalb der Kopfleiste auszurichten. Dazu fügen wir direkt nach dem schließenden header-div ein öffnendes <div id="main"> ein:

Geschlossen wird dieses div-Element unmittelbar nach dem schließenden </div>-Tag der Seitenleiste. Im Stylesheet geben wir dem Element #main einen oberen Außenrand von 10 Pixeln, um den Inhaltsbereich von der Kopfleiste optisch zu trennen. Die Stilregel dafür zeigt das folgende Code-Fragment. Später, wenn wir das Layout erstellen, werden wir zu #main zurückkehren.

Lassen Sie uns zuvor Stilregeln für das div-Element #content definieren. Wir erweitern das Stylesheet um die folgenden Regeln:

#content soll nur rechts einen Außenrand mit 240 Pixeln Breite haben. Dort haben wir dann genügend Platz, um später die Seitenleiste unterzubringen.

Außerdem ziehen wir einen massiven, 1 Pixel breiten Rahmen um die Box von #content, im selben Blauton, den wir auch für die Rahmen der Kopfleiste verwendeten, und setzen die Hintergrundfarbe auf Weiß.

Der Leitartikel der Seite

Ganz oben im Hauptbereich der Seite ist ein ausgesparter Bereich: eine rechteckige, besonders hervorgehobene Fläche. In diesem besonderen Element wird der Leitartikel der Seite herausgestellt, den wir uns jetzt anschauen wollen.

Mit einem div-Element erzeugen wir einen Container, den wir mainfeature nennen. Darin soll die Überschrift, der Anfang des Artikels und der Link zum gesamten Artikel enthalten sein:

Jetzt können wir den Leitartikel in unserem Stylesheet formatieren:

Mit diesen Stilregeln fügen wir ein Hintergrundbild, mainimg.jpg, in #mainfeature ein und geben ihm den Wert no-repeat mit. Um zu verhindern, dass links oder rechts dieses Hintergrundbilds eine weiße Fläche erscheint, wenn Benutzer ihr Browserfenster breiter als dieses Bild eingestellt haben, fügen wir die Hintergrundfarbe #112236 hinzu. Diese Farbe hat das Bild am äußersten rechten Rand und es sieht dann so aus, als ginge das Bild in den einfarbigen Hintergrund über. Als Nächstes setzen wir die Textfarbe auf Weiß und positionieren den Text mit padding: 2em unterhalb der oberen Kante und von der rechten Kante der Box. Unterhalb des Textes setzen wir den Innenrand auf 1em und auf der linken Seite auf 200 Pixel. Damit rückt der Text nach rechts und der Footbag-Spieler auf dem Bild wird ohne Überdeckungen angezeigt.

Die Überschrift und der Text innerhalb von #mainfeature sind unsere nächste Aufgabe:

Zum Schluss müssen wir dem Link zum Weiterlesen, mit dem Benutzer zum gesamten Artikel gelangen, Formate zuweisen. Zunächst definieren wir eine Klasse more, die wir dem Absatz, der den Link enthält, zuweisen. Danach können wir für diese Klasse Stilregeln definieren:

Die erste Regel für das p-Element, das den Link enthält, entfernt den oberen Außenrand, damit der Abstand zwischen dem Textblock und dem folgenden Link verringert werden kann. Dann richten wir den Inhalt des Absatzes noch mit text-align: right rechts aus:

Dann formatieren wir die Pseudoklassen a:link und a:visited. Sie bekommen die Farbe Weiß und als Aufzählungszeichen das Bild more-bullet.gif als Hintergrundbild. Da wir das Bullet nur einmal anzeigen möchten, geben wir für background-repeat den Wert no-repeat an und bestimmen noch die Position des Hintergrunds. Mit dem Wert center wird das Bullet vertikal mittig und mit left horizontal links vom Linktext angeordnet. Damit der Linktext nicht über dem Hintergrundbild angezeigt werden kann, bestimmen wir noch einen linken Rand mit 14 Pixeln Breite. Wie sich diese Änderungen auswirken, zeigt die folgende Abbildung:

Abbildung: Die Seite, nachdem der Leitartikel formatiert wurde.

Wenn Sie diese Seite nun in den Internet Explorer 6 laden, sehen Sie, dass der »peekaboo-bug«, der schon unsere rechts ausgerichtete Navigationsleiste falsch anzeigte, gleich nochmal zuschlägt: Der Leitartikel wird ab und zu als weißes Rechteck angezeigt. Auch dieser Fehler kann mit einer zusätzlichen Deklaration für die Eigenschaft height: 1% in der Regel #mainfeature leicht behoben werden.

Nach dem Neuladen der Seite sollte der Leitartikel im Internet Explorer genauso verlässlich angezeigt werden wie in Firefox, Opera oder Safari.

Die Liste der neuesten Artikel

So langsam nimmt unser Layout Gestalt an! Als Nächstes werden wir uns mit der Gestaltung der wichtigsten Inhalte der Seite beschäftigen: der Liste mit den neuesten Artikeln.

Ich möchte vermeiden, dass der Text des Hauptbereichs an die Ränder seiner Box anstößt, wie es augenblicklich noch ist, und deshalb einen Abstand zwischen den Inhalten und dem Rand einfügen. Die Inhalte des div-Elements content sind als ungeordnete Liste organisiert. Eine Möglichkeit wäre, einen Rand um diese Liste herum zu definieren, der auch die h2-Überschrift oberhalb der Liste mit einschließt. Nun kann es aber sein, dass auf anderen Seiten andere Inhalte im Hauptbereich dargestellt werden sollen. Damit aber auch andere Inhalte ohne Unterschied im selben Layout präsentiert werden können, fügen wir stattdessen ein neues div-Element, das die Überschrift und die Artikelliste einschließt, mit der Klasse inner ein.

Um Abstand zwischen der Artikelliste und den Rändern der umgebenden Box zu bekommen, fügen wir dem Element #content .inner eine margin-Eigenschaft in das Stylesheet ein.

Wenn Sie die Seite jetzt im Browser anschauen, sollten Sie den Abstand sehen können, der von der obigen Stilregel erzeugt wurde.

Nun können wir uns den Inhalten dieses Bereichs zuwenden und beginnen mit der Überschrift. In unserem grafischen Entwurf ist die Überschrift mit einer blauen Linie unterstrichen, die sich über den gesamten Bereich ausdehnt. Diesen Effekt erreichen wir mit der Eigenschaft bottom-border. Außerdem fügen wir dem h2-Element unten einen kleinen Innenrand zu, damit der Text ein wenig Abstand zu dieser Linie gewinnt.

Mit einer weiteren Stilregeln wollen wir den vorgegebenen Rand und die Aufzählungszeichen der Listeneinträge entfernen. Wir könnten diese Regel nun einfach für #content .inner ul definieren, da es nur eine einzige Liste auf dieser Seite gibt. Diese Herangehensweise kann aber bei anderen Seiten, die ebenfalls Listen enthalten könnten, zu Problemen führen, wenn diese anders aufgebaut sind als unsere spezielle Artikelliste. Deshalb werden wir dem ul-Element das Attribut class="features" hinzufügen und können damit diese oder andere besonderen Listen damit gestalten, ohne das Aussehen normaler Listen im Hauptbereich der Seite zu beeinflussen.

Jeder Artikel hat eine h3-Überschrift, denen wir einen größeren Schriftgrad zuweisen:

Jede dieser Überschriften soll gleichzeitig als Link auf die entsprechende Artikelseite von Footbag Freaks dienen, darum können wir auch gleich Formate für die Pseudoklassen definieren:

Zum Schluss färben wir die Schrift der Textabschnitte dunkelgrau und verkleinern die Schriftgröße auf 90 %.

Die Autorenbildchen

Neben jedem Beitrag in der Liste der neuesten Artikel soll ein kleines Portrait des Autors angezeigt werden. Dieses Bildchen wird in jeden Artikel nach der Überschrift eingefügt, wie hier gezeigt wird:

Dieser HTML-Code erzeugt die Ansicht in der folgenden Abbildung.

Abbildung: Die Bilder der Autoren sind ins Layout eingefügt.

Mit der Eigenschaft float: left lassen wir die Porträts auf die linke Seite der Textabschnitte schweben. Beachten Sie, dass Sie dabei keine Breitenangaben für die Bilder machen müssen, da jedes Bild bereits eine genau definierte Breite hat.

Wir haben hier einen Selektor benutzt, mit dem nur die Bilder angesprochen werden, die innerhalb eines Listenelements vorkommen, welches das Attribut class="features" besitzt. Auf diese Weise verhindern wir, dass diese Stilregeln auf irgendwelche anderen Bilder, die Sie möglicherweise noch einfügen wollen, angewendet werden.

Die Bilder wurden mit float: left nach links verschoben und erhielten einen Außenrand, damit sie ein wenig Raum haben und der Text sich nicht unmittelbar daran anschließt. Sie sehen es in der folgenden Abbildung.

Abbildung: Die Autorenbilder sind nach links verschoben worden.

In unserem grafischen Layoutentwurf sind die Namen der Autoren fett dargestellt, weshalb wir dem <p>-Tag, das den Autorennamen enthält, ein Attribut class="author" hinzufügen und in dieser Klasse eine Regel definieren, die den Inhalt dieses Elements fett darstellt. Wir benutzen absichtlich keine <strong>- oder <b>-Tags, da wir die Autorennamen nur aus ästhetischen Gründen fett darstellen und nicht aus irgendwelchen strukturellen Gründen. Indem wir die Formatierungen für die Namen der Autoren aus dem HTML-Code heraushalten, bleiben wir unserem Ziel treu, die Inhalte von der Präsentation zu trennen. Und weil wir CSS benutzen, können wir zukünftige Änderungen in der Gestaltung der Autorennamen einfach dadurch erreichen, dass wir die Regeln der entsprechenden Klasse ändern, anstatt jede Seite nach den Namen zu durchsuchen, um sie dann an Ort und Stelle zu ändern. Hier sind die Änderungen, die wir im HTML-Code der Seite machen müssen, und im Anschluss daran folgt die CSS-Regel, mit der alle passenden Autorennamen fett dargestellt werden:

Das letzte Element, das wir in diesem Bereich der Seite noch formatieren müssen, ist der Link »Full Story«, der unterhalb eines Artikels angezeigt werden soll. Wir erstellen eine Klasse more und fügen sie jedem öffnenden <p>-Tag für diesen Link als Attribut hinzu.

Bestimmt ist Ihnen aufgefallen, dass diese Regeln ganz ähnlich zu denen sind, die wir weiter oben für die »Read More«-Links des Leitartikel-Bereichs definiert haben.

Das Layout sollte jetzt dem originalen grafischen Entwurf schon ziemlich ähnlich sehen. Den Fortschritt können Sie in der folgenden Abbildung betrachten. Sie sehen, dass die Seite nahezu fertig ist, es bleibt nur noch die rechte Seitenleiste zu gestalten.

Abbildung: Die Seite, nachdem die Formatierung des Hauptbereichs abgeschlossen ist.