Wir starten oben beim Kopfbereich und fügen ein wenig Feinstrukturierung hinzu, indem wir das Logo und die Navigation in einem div-Element mit der ID head zusammenfassen. Das bietet uns die Möglichkeit, den Kopfbereich als Ganzes zu gestalten und über Kontextselektoren auf das Logo (#head h1) und die Navigation (#head ul) zuzugreifen.

<div id="head">
  <h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
  
  <ul>
    <li><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li>
    <li><a href="ueber-uns.html">Kochbar</a></li>
    <li><a href="speisekarte.html">Speisekarte</a></li>
    <li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</div>

Sowohl die Holzvertäfelung im Kopfbereich als auch die aufgespießten Leckereien werden über die gesamte Fensterbreite gekachelt. Kacheln bedeutet eine Wiederholung desselben Bilds, entweder in Richtung der x-Achse, der y-Achse oder beider Achsen. Das ist in dem in Abbildung 8.1 dargestellten Ausschnitt zu erahnen, aber nicht eindeutig zu erkennen. Abbildung 8.16 zeigt einen verkleinerten Ausschnitt der Photoshop-Vorlage; darin können Sie die Kachelung gut sehen. Wir müssen nun herausfinden, an welchen Stellen sich die Holzvertäfelung und die Gabeln wiederholen und anschließend die Kacheln herausschneiden. Die Frage hierbei ist: Können wir die Vertäfelung und die Gabeln zu einer Kachel zusammenfassen, die sich in der x-Achse wiederholt?

Abb. 8.16: Die Hintergrundbilder sind durchgängig von Rand zu Rand

Abb. 8.17: vertaefelung.gif

Abbildung 8.17 und Abbildung 8.18 zeigen die beiden Kacheln. Wir können auf den ersten Blick erkennen, dass die Kacheln nicht zusammenpassen. Das Bild vertaefelung.gif ist 271 px breit, das Bild gabeln.jpg 398 px. Wir können Vertäfelung und Gabeln folglich nicht zu einer großen Kachel zusammenfassen. Das ist nicht weiter schlimm; wir kümmern uns zunächst nur um die Holzvertäfelung im Kopfbereich und bauen die Gabeln später ein.

Abb. 8.18: gabeln.jpg

Die Holzvertäfelung weisen wir dem body-Element als Hintergrundbild zu.

/* Farben und Hintergründe setzen */
html, body {
  color: #3b2b20;
  background-color: white;
}
body {
  background: url(images/vertaefelung.gif) top center repeat-x;
}

Für h1-Elemente haben wir margin-bottom auf .8em gesetzt. Diese Einstellung müssen wir für das h1-Element innerhalb von #head wieder überschreiben, damit der Kopfbereich exakt so hoch ist wie das Logo. Zudem müssen wir die Breite des h1-Elements auf die Breite des Logos beschränken, damit es sich nicht über die volle zur Verfügung stehende Breite erstreckt und der standardmäßig gesetzte weiße Hintergrund die gekachelte Vertäfelung überdeckt. Wir setzen die Breite auf 288 px. Eine andere Möglichkeit wäre die Deklaration von display: inline;.

/**
* Regeln für besondere Bereiche
*
* @section Kopfbereich
*/
div#head {}

#head h1 {
  margin: 0;
  padding: 0;
  width: 288px;
}

Hier sehen Sie übrigens eine Angewohnheit von mir, die ich Ihnen ebenfalls nahelegen möchte. In jedem Dokument der Kochbar-Website gibt es nur ein Element mit der ID head, nämlich das div-Element, das den Kopfbereich auszeichnet. Wir brauchen also nicht div#head zu schreiben, sondern können auf #head abkürzen. Dennoch schreibe ich den Selektor ein Mal vollständig hin, auch wenn – wie in diesem Fall – es für das Element selbst noch überhaupt keine Deklarationen gibt. Damit weiß der Leser des Stylesheets (beispielsweise Sie!), dass es sich bei #head um ein div-Element handelt; das kann helfen, die eine oder andere Deklaration besser zu verstehen.

Abb. 8.19: Vertäfelung als Hintergrundbild des body-Elements

Der Entwurf gibt vor, dass alle Inhalte der Kochbar auf eine feste Breite beschränkt und zudem horizontal zentriert sind. In der Photoshop-Vorlage können wir die Breite abschätzen; wir gehen im Folgenden von 932 px aus. Wir setzen die Breite des Kopfbereichs auf diesen Wert und zentrieren den Block mittels automatischer Außenabstände (siehe Kapitel 7.8.1).

/**
* Regeln für besondere Bereiche
*
* @section Kopfbereich
*/

div#head {
  width: 932px;
  margin: auto;
}

#head h1 {
  margin: 0;
  padding: 0;
  width: 288px;
}

Nun kümmern wir uns um die Navigation. Sie liegt bündig auf der Unterkante des Kopfbereichs auf, 30 px vom rechten Rand entfernt.

Wie bekommen wir die Navigation an diese Stelle? Wissen Sie die Antwort? Falls nicht, rufen Sie sich bitte Kapitel 7.7 »Positionierung« ins Gedächtnis.

Wir positionieren #head relativ, damit es zum Positionierungskontext für die Navigation wird. Anschließend positionieren wir die Navigationsliste absolut an die ermittelte Stelle.

/**
* Regeln für besondere Bereiche
*
* @section Kopfbereich
*/
div#head {
  width: 932px;
  margin: auto;
  position: relative;
}
#head h1 {
  margin: 0;
  padding: 0;
  width: 288px;
}

/**
* @section Hauptmenü
*/
#head ul {
  position: absolute;
  bottom: 0;
  right: 30px;
}

Um die Navigationspunkte nicht vertikal, sondern horizontal auszurichten, lassen wir sie nach links floatieren. Wir verzichten auf eine Listenelementmarkierung und definieren einen Abstand von 8 px zwischen den Listenpunkten.

#head ul li {
  float: left;
  list-style: none;
  margin: 0 8px 0 0;
}

Als Nächstes kümmern wir uns um die Darstellung der Listenpunkte. Wir deklarieren Schrift- und Hintergrundfarben sowie die Hintergrundverläufe. Der aktive Navigationspunkt, mit strong ausgezeichnet, sieht so aus wie Navigationslinks, die mit der Maus überfahren werden, den Fokus haben oder aktiv sind.

#head ul a,
#head ul strong {
  color: #352545;
  background:#FBFBFB url(images/nav_bg.gif) bottom left repeat-x;
  display: block;
  padding: .8em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
}
#head ul a:hover,
#head ul a:focus,
#head ul a:active,
#head ul strong {
  color: white;
  background: #638F56 url(images/nav_bg_hover.gif) bottom left repeat-x;
}

Abb. 8.20: nav_bg.gif

Abb. 8.21: nav_bg_hover.gif

Abb. 8.22: Schritt 8