Die Seitenleiste

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

Die Seitenleiste hängt unterhalb des Hauptbereichs der Seite, wie Sie in der folgenden Abbildung sehen. Bislang wurden auf sie keine Regeln angewendet, sodass sie an ihrem natürlichen Platz innerhalb des Dokuments angezeigt wird.

Abbildung: Die unformatierte Seitenleiste.

Unsere erste Aufgabe wird sein, die Seitenleiste von ihrem jetzigen Ort dahin zu verschieben, wo wir extra Platz für sie reserviert haben: rechts vom Hauptbereich der Seite.

Beobachten wir zunächst, was passiert, wenn wir die Seitenleiste von oben und von rechts absolut positionieren. Fügen Sie dazu die folgenden Stilregeln in Ihr Stylesheet ein:

Schauen Sie die Seite nun im Browser an. Die Seitenleiste ist in der rechten oberen Ecke des Bildschirmfensters verankert, wie die folgende Abbildung zeigt.

Abbildung: Die Seitenleiste wurde absolut oben rechts positioniert.

Als wir über absolute und relative Positionierung sprachen (siehe Absolute und relative Positionierung im Kontext), behauptete ich, dass Elemente immer relativ zur Lage ihres Elternelements positioniert werden; dieses Konzept wurde als Positionierungskontext beschrieben. In unserem Fall hier hat das Element #sidebar kein positioniertes Elternelement und darum benutzt es das Bildschirmfenster als Positionierungskontext.

Es gibt jedoch ein Element, das wir positionieren und damit einen sinnvollen Positionierungskontext für #sidebar schaffen können: das div-Element #main.

Suchen Sie #main in Ihrem Stylesheet und fügen Sie die folgenden Deklarationen hinzu:

Nun benutzt #sidebar das Element #main als Elternelement und damit wird #sidebar innerhalb von #main positioniert, was in der folgenden Abbildung dargestellt ist.

Abbildung: Die Seitenleiste wird in einem relativ positionierten Containerelement positioniert.

Nachdem die Seitenleiste jetzt ihren Platz gefunden hat, können wir uns an die Gestaltung ihrer Inhalte machen. Beginnen wir mit den h3-Titeln, mit denen die verschiedenen Bereiche der Seitenleiste überschrieben sind:

Hinter die Überschriften haben wir ein Bild gelegt, das den Farbverlauf aus unserem grafischen Entwurf bewirkt.

Schöne Effekte aus dem Hintergrund
Eine hervorragende Möglichkeit, attraktive Überschriften zu gestalten, ist die Verwendung von Hintergrundbildern. Auf diese Weise braucht man sich nicht auf Bilder zu stützen, auf denen der aktuelle Text der Überschrift dargestellt ist. Dies würde die Wartbarkeit Ihrer Seite verkomplizieren, weil Sie selbst bei den kleinsten Änderungen neue Bilder erzeugen müssten.

Schauen wir uns die Inhaltsbereiche der Seitenleiste, die unterhalb der Überschriften angezeigt werden, einmal genauer an. Für jeden dieser Bereiche müssen wir ein div-Element und eine Klasse inner definieren, damit wir sowohl einen kleinen Abstand erzielen als auch den Text etwas vom Rand der Seitenleiste abrücken können. Fügen Sie deshalb das folgende div-Element in jeden der drei Bereiche ein:

Der Klasse inner fügen wir einen Innenrand von 10 Pixeln Breite zu:

Abbildung: Die Seitenleiste nach der Formatierung der Überschriften und der Klasse inner.

Sie sehen in der obigen Abbildung, dass die Seitenleiste allmählich Gestalt annimmt. Wir kümmern uns jetzt um die Liste der bevorstehenden Veranstaltungen.

In diesen Stilregeln definieren wir das Bild more-bullet.gif als Aufzählungszeichen, entfernen den Außenrand und fügen auf der rechten Seite einen Innenrand von 20 Pixeln Breite hinzu, damit die Listeneinträge mit den Überschriften ausgerichtet sind.

Im nächsten Schritt verringern wir die Schriftgrößen der Texte und der Listeneinträge auf 90 % und vergrößern den Zeilenabstand mit der Eigenschaft line-height ein klein wenig.

In unserem grafischen Entwurf sind die Links der Seitenleiste weiß und unterstrichen, was wir mit der obigen Regel erreichen.

Am Ende definieren wir noch eine Klasse "date", die wir einem <span>-Tag als Attribut mitgeben und die alle Veranstaltungen in der Liste fett darstellt.

In der folgenden Abbildung sehen wir, wie die Veranstaltungen nun angezeigt werden:

Abbildung: Die formatierte Veranstaltungsliste in der Seitenleiste.

Das Formular

Nun ist es an der Zeit, ein paar Regeln für das Suchformular oben in der Seitenleiste festzulegen. Wir fügen den input-Elementen vom Typ "text" das Attribut class="text" zu. Dann definieren wir eine Regel für #searchform .text. Die folgende Stilregel legt die Breite der Text-Box auf 196 Pixel fest und zieht einen Rahmen um die Box.

In das div-Element, das den Sende-Button umschließt, fügen wir das Attribut class="searchbutton" ein und ergänzen im Stylesheet eine Regel für diese Klasse. Darin richten wir das Element an der rechten Seite der Box aus und bestimmen einen oberen Außenrand, so dass der Button nicht direkt an das Texteingabefeld stößt.

Danach weisen wir dem Button selbst noch ein paar Formate zu: Er soll einen Rahmen in der Farbe des Textfelds und als Hintergrund die Farbe der Seitenleiste bekommen, und die Beschriftung soll weiß sein. All dies wird mit den folgenden Regeln erreicht.

Außerdem müssen Sie dem input-Element ein Klassenattribut mit dem Wert btn hinzufügen. Das Ergebnis sollte so aussehen wie in der folgenden Abbildung.

Abbildung: Das neu gestaltete Suchformular.

Der Trick des Monats

Das letzte Element am unteren Ende der Seitenleiste, das wir noch bearbeiten müssen, ist der Bereich »Move of the Month«. Hier sehen wir ein Bild, das wir zuerst in das Dokument einfügen, und zwar unterhalb der h4-Überschrift. Diesem Bild fügen wir das Attribut class="motm-image" hinzu:

Dieses Bild verschieben wir mit der Eigenschaft float an den rechten Rand, so dass der Text links davon angezeigt werden kann:

Wie Sie sehen, haben wir dem Bild links und rechts Außenränder zugeschlagen. Zu allerletzt bleibt uns noch, den "more"-Link zu formatieren, der den »Read More«- und »Full Story«-Links sehr ähnlich ist. Im Unterschied zu diesen würde der "more"-Link jedoch normalerweise neben dem verschobenen Bild angezeigt. Wir möchten aber sicherstellen, dass er immer unterhalb des Bildes erscheint. Sie sehen in dem folgenden Code, dass wir dazu die Eigenschaft clear: right einsetzen. Diese Eigenschaft sorgt dafür, dass es rechts von diesem Element keine verschobenen Elemente gibt. Darüber hinaus müssen wir die Klasse more noch auf den <p>-Tag anwenden, der den Link enthält:

Unter Ein dreispaltiges Layout werden wir uns die Eigenschaft clear etwas genauer ansehen. Im Augenblick brauchen Sie sich nur zu merken, dass diese Eigenschaft die Werte left (verschiebt die Einfügeposition unter ein float-Element auf der linken Seite), right (verschiebt die Einfügeposition unter ein float-Element auf der rechten Seite) und both (verschiebt die Einfügeposition unter alle float-Elemente) besitzt. Wenn Sie in Ihren Layouts schwebende Elemente benutzen, werden Sie diese Eigenschaft schätzen lernen.

Die letzten Regeln sollten Ihnen von den »Read More«- und »Full Story«-Links bekannt sein:

Mit diesem Code haben wir unser zweispaltiges Layout vollendet! Die folgende Abbildung zeigt das endgültige Aussehen der Seite.

Abbildung: Das fertiggestellte zweispaltige Layout.