Sidebar nennen wir den Bereich links, der das Kontaktfeld und den Teaser auf das Rezept des Tages beinhaltet. Den oberen Teil der Sidebar haben wir durch die großformatige Illustration simuliert – kümmern wir uns nun um den Rest. Dazu überlegen wir uns zunächst, was genau eigentlich zu tun ist.

• Wir müssen die Sidebar nach links floatieren, damit der Content rechts um die Sidebar fließt. Um den Content kümmern wir uns im nächsten Schritt.
• Wir müssen die Breite auf 288 px beschränken.
• Wir müssen den grauen Rahmen weiterführen. Der Rahmen ist 6 px dick und hat den Farbwert #CBB8BA. Beachten Sie die Berechnung der Breite eines Elements: Die Gesamtbreite setzt sich zusammen aus margin-left, border-left, padding-left, width, padding-right, border-right und margin-right. Der beidseitige Rahmen von 6 px reduziert den Wert der Eigenschaft width somit auf 276 px (288 px – 6 px – 6 px = 276 px).
• Im Hintergrund der Sidebar liegt ein dezenter Farbverlauf (siehe Abbildung 8.25). Das ist nicht auf den ersten Blick zu erkennen, aber auf solche Feinheiten müssen aufmerksame Webautoren natürlich achten.
• Wir können im Entwurf erkennen, dass die Sidebar nicht direkt auf der Fußzeile aufliegt, sondern 26 px Raum dazwischen besteht. Darüber hinaus sehen wir, dass das Rezept des Tages 24 px Abstand zum Rahmen der Sidebar hat. Die entsprechenden Angaben müssen wir für die Eigenschaften margin und padding vornehmen.

Wir erweitern das Stylesheet also wie folgt:

/**
* @section Sidebar
*/
div#sidebar {
  color: inherit;
  background: #F5F5F9 url(images/sidebar_bg.gif) bottom left repeat-x;
  float: left;
  border: 6px solid #cbb8ba;
  border-top: 0;
  width: 276px;
  margin: 0 0 26px 0;
  padding: 0 0 24px 0;
}

Abb. 8.25: sidebar_bg.gif

Nun sieht die Sidebar so aus wie im Entwurf. Der Rahmen schließt perfekt an die Illustration an, es gibt keinen sichtbaren Übergang oder Versatz – so soll es sein. Sind Sie mit dem Ergebnis zufrieden?

Ich war es so lange, bis ich mir die Seite im Firefox angeschaut und den Zoomfaktor um eine Stufe erhöht habe. Machen Sie es mir nach: Auf einmal ist ein Versatz zu sehen. Eine Zoomstufe weiter können Sie sogar eine Lücke sehen! Auch bei Verkleinerung passen Rahmen und Illustration nicht mehr zusammen. Wir müssen die Sidebar also umbauen. So ist das manchmal: Überraschungen dieser Art machen unseren Beruf so abwechslungsreich!

Unsere Lösung besteht darin, die vertikalen Rahmen ebenfalls als Bild zu realisieren in der Hoffnung, dass dieses und die Illustration identisch vergrößert und verkleinert werden, wodurch es weder zu Versatz noch zu Lücken kommen sollte. Wir benötigen also eine Grafik (siehe Abbildung 8.153), die wir als Hintergrundbild der Sidebar einbinden. Der Farbverlauf wird zum Hintergrundbild eines neuen Containers, den wir in #sidebar verschachteln. Wir geben diesem Container die ID sidebar-inner.

Abb. 8.26: Rahmen und Illustration passen bei anderen Zoomstufen nicht mehr zusammen

Abb. 8.27: sidebar_rahmen.gif

<div id="sidebar">
  <div id="sidebar-inner">
    <div id="contact">
      <h2>Kontaktdaten</h2>

      <p class="tel">0123 654321-0</p>
      <p class="address">Musterstr. 123 – 43210 Musterstadt</p>
    </div>

    <div id="teaser">
      <h2>Rezept des Tages</h2>

      <h3>Mulligatawny</h3>

      <p>Eine ursprünglich sehr scharfe indische Hühnersuppe, gewürzt mit Curry und Ingwer. Wir empfehlen die sanfte, englische Version. <a href="rezepte/mulligatawny.html">Rezept ansehen</a></p>
    </div>
  </div>
</div>

Nun weisen wir beide Hintergrundbilder zu und verteilen die Deklaration etwas um. Beachten Sie, dass #sidebar horizontale Padding-Bereiche in der Breite des »virtuellen« Rahmens benötigt, damit dieser vom Inhalt der Sidebar nicht überdeckt wird.

/**
* @section Sidebar
*/
div#sidebar {
  color: inherit;
  background: #F5F5F9 url(images/sidebar_rahmen.gif) top left repeat-y;
  float: left;
  border-bottom: 6px solid #CBB8BA;
  width: 276px;
  padding: 0 6px;
  margin: 0 0 26px 0;
}
div#sidebar-inner {
  color: inherit;
  background: #F5F5F9 url(images/sidebar_bg.gif) bottom left repeat-x;
  padding: 0 0 24px 0;
}

Die Nahtstelle zwischen Illustration und Sidebar sieht nun in allen Zoomstufen besser aus. Ich denke, mit dieser Lösung können wir weiterarbeiten.

Kommen wir nun zum Kontaktfeld. Zunächst fügen wir der index.html einige Klassen hinzu, um die beiden Absätze, mit denen wir die Telefonnummer und die Adresse ausgezeichnet haben, getrennt ansprechen zu können.

<div id="contact">
  <h2>Kontaktdaten</h2>

  <p class="tel">0123 654321-0</p>
  <p class="address">Musterstr. 123 – 43210 Musterstadt</p>
</div>

Das CSS ist sehr einfach. Wir bestimmen Schrift- und Hintergrundfarben und nehmen einige Schriftdeklarationen vor. Zudem korrigieren wir einige innere und äußere Abstände.

/* Kontaktfeld */
div#contact {
  color: white;
  background-color: #E8AD47;
  padding: 0 24px 16px 24px;
}
#contact h2 {
  color: inherit;
  background-color: transparent;
  margin: 0;
}
#contact p.tel {
  color: #9F0F00;
  background-color: transparent;
  font-size: 2.2em;
  font-weight: bold;
  margin: .3em 0;
}
#contact p.address {
  font-weight: bold;
  font-size: .9em;
}

Das Styling des Teasers ist nicht ganz so einfach. Deswegen gehen wir Schritt für Schritt vor. Wir kümmern uns zunächst um die richtigen Abstände des Teasers zum Rand der Kochbar sowie um die notwendige Polsterung. Zudem fügen wir die blauen Linien als Hintergrundbild hinzu.

/* Teaser */
div#teaser {
  color: #333;
  background: #fbfbfd url(images/teaser_bg.gif) top left;
  margin: 12px 12px 0 12px;
  padding: 12px;
}

Nun gestalten wir die Überschrift, ändern Farben, Schriftformatierung und Abstände und binden den orangefarbenen Strich für die Unterstreichung als Hintergrundbild ein.

#teaser h2 {
  color: #FF7700;
  background: transparent url(images/teaser-h2_bg.gif) bottom center no-repeat;
  font-size: 2.2em;
  text-align: center;
  font-weight: normal;
  padding: 0 0 12px 0;
  margin: 0;
  text-transform: none;
}

Abb. 8.28: Styling des Teasers, Abstände und Hintergrundbild

Abb. 8.29: Styling des Teasers, Überschrift zweiter Ordnung

Nun sehen wir, dass der Abstand zwischen den Überschriften zu klein ist, außerdem liegt »Mulligatawny« nicht richtig auf der blauen Linie. Wir richten das h3-Element entsprechend aus.

#teaser h3 {
  margin: 12px 0 19px 0;
  padding: 0;
}

Abb. 8.30: Styling des Teasers, Ausrichtung der Überschrift dritter Ordnung

Anschließend müssen wir die inneren und äußeren Abstände des Absatzes, seine Schriftgröße und die Zeilenhöhe so ausrichten, dass die einzelnen Zeilen auf den blauen Linien des Hintergrundbilds ausgerichtet zu sein scheinen. Mit folgenden Deklarationen bekommen wir dies hin.

#teaser p {
  margin: 14px 0 0 0;
  padding: 0;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
}

Abb. 8.31: Schritt 10

Die Sidebar haben wir formatiert, nun folgt der Content.