Die neue Seitenleiste am neuen Platz

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

Jetzt können wir die neue Seitenleiste mit CSS an die gewünschte Position verschieben und uns um die Formatierung ihrer Inhalte kümmern. Als Ausgangspunkt nehmen wir die CSS-Datei des zweispaltigen Layouts und suchen darin die Regeln für das Element #content. Als erste Aufgabe müssen wir den Raum schaffen, in den wir die Seitenleiste hineinplatzieren können.

Überprüfen Sie die Position der ersten Seitenleiste
Unter Die Seitenleiste neu positionieren haben wir gezeigt, wie einfach man eine Spalte von der rechten zur linken Seite verschieben kann. Wir mussten dazu nur zwei CSS-Eigenschaften ändern. Bei dem Layout, das wir jetzt entwickeln wollen, gehen wir davon aus, dass diese Seitenleiste rechts vom Hauptbereich angeordnet ist. Möglicherweise müssen Sie zuvor noch die Änderungen in Ihrem Stylesheet zurücknehmen.

#content {
  margin: 0 240px 0 160px;
  border: 1px solid #b9d2e3;
  background-color: white;
  color: black;
}

Ändern Sie die Breite des linken Außenrands von 0 auf 160px und erzeugen Sie damit einen 160 Pixel breiten Außenrand für den Hauptbereich.

Definieren Sie nun eine Regel für #sidebar2, um diese in den neu geschaffenen Rand, links vom Hauptbereich, zu verschieben.

#sidebar2 {
  position: absolute;
  top: 0;
  left: 0;
}

Mit dieser Regel wird die neue Spalte links oben im relativ positionierten div-Element #main angezeigt, was Sie in der folgenden Abbildung sehen können.

Die Seite, nachdem die sidebar2 positioniert wurde

Abbildung: Die Seite, nachdem die sidebar2 positioniert wurde.

Der Inhalt von sidebar2 überlappt nun das div-Element content, was Sie wahrscheinlich auch so erwartet haben. Wir legen die beiden Seitenleisten über die Fläche, die von den Außenrändern des Elements content erzeugt wird.

Ist die Seitenleiste breiter als der Rand, würden die Inhalte der Leisten den Inhalt des Hauptbereichs verdecken. Um solche Überdeckungen zu verhindern, definieren wir eine Breitenangabe für sidebar2:

#sidebar2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 159px;
  border-top: 1px solid #b9d2e3;
  border-left: 1px solid #b9d2e3;
  border-bottom: 1px solid #b9d2e3;
  background-color: white;
  color: black;
  margin: 0;
  padding: 0;
}

Ich habe bereits mit der Formatierung dieser Spalte begonnen und ihr oben, links und unten Rahmen zugefügt und den Hintergrund auf die Farbe Weiß gesetzt. Die folgende Abbildung zeigt den bisherigen Fortschritt.

sidebar2 bekommt eine feste Breite, um Überlappungen zu verhindern

Abbildung: sidebar2 bekommt eine feste Breite, um Überlappungen zu verhindern.

Jetzt können wir die einzelnen Elemente innerhalb der sidebar2 gestalten.

#sidebar2 .inner {
  margin: 10px;
}

#sidebar2 .inner stellt einen Container für die Inhalte der Spalte zur Verfügung (die alle die Klasse inner haben), der einen 10 Pixel breiten Abstand zwischen den Inhalten und dem Rahmen erzeugt.

#sidebar2 p {
  font-size: 90%;
  color: #666666;
}
  #sidebar2 a:link, #sidebar2 a:visited {
  color: #245185;
  font-weight: bold;
}

Auch für die Absätze innerhalb von #sidebar2 definieren wir Stilregeln. Die Schrift verkleinern wir auf 90 % und färben sie dunkelgrau ein. Die Links innerhalb des div-Elements #sidebar2 sollen blau und fett dargestellt werden.

#sidebar2 h3 {
  color: #245185;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #b9d2e3;
  font-size: 110%;
}

Die Überschriften des Weblogs und für den Newsletter formatieren wir als Ebene-3-Überschriften, blau und mit einer unteren Rahmenlinie. Wie sich diese Änderungen auswirken, zeigt folgende Abbildung.

Die Seite, nachdem die Textblöcke formatiert wurden

Abbildung: Die Seite, nachdem die Textblöcke formatiert wurden.

Die Navigation

Oben in der neuen Spalte wird eine Linkliste angezeigt. Für diese Liste werden wir ein paar Stilregeln definieren, damit sie besser zu unserem Design passt.

Wir unterdrücken die Anzeige des Aufzählungszeichens und entfernen die vorgabemäßige Einrückung, sodass die Listeneinträge mit dem übrigen Text bündig sind:

#nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

Außerdem bekommt jeder Listeneintrag eine untere Rahmenlinie und einen Innenrand, um einen kleinen Abstand zwischen die einzelnen Einträge (und zwischen einem Eintrag und seiner Rahmenlinie) zu schieben:

#nav li {
  border-bottom: 1px solid #b9d2e3;
  padding: 0.4em 0 0.2em 0;
  font-size: 90%;
}

Zum Schluss unterdrücken wir die Unterstreichung der Links und setzen den Schriftschnitt auf normal (zuvor wurde der Schriftschnitt für alle Links in #sidebar2 auf fett gesetzt). Wie die Seite danach aussieht, sehen Sie in der folgenden Abbildung.

#nav li a:link, #nav li a:visited {
  text-decoration: none;
  color: #245185;
  font-weight: normal;
}

Die formatierte Navigation

Abbildung: Die formatierte Navigation.

Das Weblog

Als Nächstes ist der Weblog-Abschnitt der Seite an der Reihe. Dieser Bereich enthält einen hervorgehobenen Weblog-Eintrag, den wir in das div-Element namens bloglatest eingebettet haben, sowie eine Liste der drei neuesten Weblog-Einträge. Diese Einträge sollen später auf der fertigen Webseite auf die kompletten Weblog-Einträge verweisen.

Um das Datum des hervorgehobenen Weblog-Eintrags in Orange anzuzeigen, müssen wir eine Stilregel auf das h4-Element innerhalb des div-Elements bloglatest anwenden:

#bloglatest h4 {
  color: #ff4e00;
  font-size: 100%;
  font-weight: bold;
}

Für die Liste der Weblog-Einträge entfernen wir zunächst alle Außenränder, indem wir margin auf den Wert 0 setzen und legen dann mit padding einen Innenrand von 20 Pixeln Breite fest. Anstatt der normalen Aufzählungszeichen wollen wir das Bild more-bullet.gif anzeigen, das wir bereits an anderer Stelle in unserem Layout verwendet haben:

#blog {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: url(img/more-bullet.gif);
}

Zum Schluss formatieren wir noch die Listeneinträge. In jedem Eintrag wird das Datum in der Farbe Orange und gleich daneben der Linktext in Blau angezeigt. Da wir für Links bereits die Farbe Blau festgelegt haben, können wir den gesamten Listeneintrag orange färben, die Links werden dennoch in Blau angezeigt. Die nächste Abbildung zeigt das fertige Design dieses Bereichs.

#blog li {
  font-size: 90%;
  padding-bottom: 0.5em;
  color: #ff4e00;
  font-weight: bold;
}

Der fertig formatierte Weblog-Bereich

Abbildung: Der fertig formatierte Weblog-Bereich.

Der Newsletter

Das Eintragsformular zum Abonnieren des Newsletters ist das allerletzte Element, das wir noch in unser Layout einbeziehen müssen. Zuerst werden wir eine Stilregel für das Texteingabefeld erzeugen, damit wir es unter diesem Namen ansprechen können.

Wir erzeugen eine Regel mit dem Selektor #newsletterform .text und legen dafür die Breite von 150 Pixeln fest, damit dieses Element nicht aus der Spalte hinausragen und Teile des Hauptbereichs überdecken kann.

#newsletterform .text {
  width: 135px;
  border: 1px solid #45bac0;
}

Als Nächstes bekommt der Sende-Button ein neues Aussehen:

#newsletterform .searchbutton {
  text-align: right;
  margin-top: 4px;
}

Wir haben hier eine Regel definiert, die auf das div-Element, in dem der Sende-Button enthalten ist, angewendet wird. Diese Regel bewirkt, dass der Button am rechten Rand ausgerichtet ist. Um diesen Effekt zu erreichen, müssen wir die Inhalte des Elternelements rechts ausrichten.

Am Ende fügen wir noch eine Regel für #newsletterform .btn in unser Stylesheet ein:

#newsletterform .btn {
  border: 1px solid #45bac0;
  background-color: #256290;
  color: white;
  font-size: 80%;
}

Damit sieht dieser Button gleich aus wie der, den wir für das Suchformular in der rechten Seitenleiste erzeugt haben. In der folgenden Abbildung können Sie den Fortschritt nachvollziehen.

Das Anmeldeformular für den Newsletter

Abbildung: Das Anmeldeformular für den Newsletter.

Großartig! Damit haben wir ein dreispaltiges Layout fertiggestellt, das im Internet Explorer 6 so angezeigt wird, wie die folgende Abbildung zeigt. Ich entwickle meine Layouts eher so, dass ich während der Arbeit den Firefox benutze, einen Browser, der die Standards besser implementiert. Danach teste ich, ob der Internet Explorer meine Layouts erwartungsgemäß anzeigt. Aber, wie Sie sehen, ist dieses Layout relativ einfach und wird im Internet Explorer 6 korrekt angezeigt.

Das fertige dreispaltige Layout im Internet Explorer 6 unter Windwows

Abbildung: Das fertige dreispaltige Layout im Internet Explorer 6 unter Windwows.

Dieses Layout bietet eine hervorragende Ausgangsbasis für Projekte, in denen Sie ein grundlegendes, dreispaltiges Layout mit oder ohne Kopfleiste benötigen. Mit der absoluten Positionierung können Sie die Breite der verschiedenen Spalten gut steuern und sie macht es auch relativ einfach, dass die Ansichten in den verschiedenen Browsern konsistent sind. Es gibt jedoch auch Situationen, in denen dieses Layout nicht die beste Wahl ist. Wir werden auf den nächsten Seiten einige der häufigsten Probleme betrachten, mit denen Designer bei dreispaltigen Layouts zu kämpfen haben.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg