Schritt 9: Illustrationen

In diesem Schritt werden Sie sehen, dass die Umsetzung eines Screendesigns manchmal einfacher sein kann, als es auf den ersten Blick aussieht. Wir werden uns um die Kachelung der Gabeln kümmern, den geschwungenen Übergang und den oberen Teil der Sidebar mit dem aufgespießten Gemüse, das die obere rechte Ecke des Kastens überlappt.

Haben Sie schon eine Vorstellung davon, wie Sie vorgehen würden, um all dies umzusetzen?

Wir fangen erneut an mit einer Erweiterung des Markups. Dieses Mal müssen wir sogar zwei Elemente ineinander verschachteln.

<body>
  <div id="head">
    <!-- Logo und Navigation -->
  </div>
  
  <div id="main">
    <div id="main-inner">
      <div id="sidebar">
        <!-- Sidebar -->
      </div>
    
      <div id="content">
        <!-- Inhalte -->
      </div>
    </div>
  </div>

  <div id="footer">
    <!--Absätze -->
  </div>
</body>

Listing 8.25: Erweiterung des Markups um zwei Styling-Container

In das Stylesheet schreiben wir:

/**
* @section Hauptbereich
*/
div#main {
  color: inherit;
  background: white url(images/gabeln.jpg) top center repeat-x;
}
#main div#main-inner {
  width: 932px;
  margin: 0 auto;
}

Listing 8.26: Hinzufügen der Gabeln, Beschränkung der Breite des Inhalts und horizontale Zentrierung

Die erste Regel sorgt für die Kachelung der Gabeln über die gesamte Breite des#main-Elements. Das darin verschachtelte div-Element #main-inner sorgt analog zum #head-Element für die Breitenbeschränkung und horizontale Zentrierung.

Jetzt kommt der Trick: Wir machen aus dem gesamten oberen Teil des inneren Bereichs ein einziges großes Bild (siehe Abbildung 8.23) und weisen es #main-inner als Hintergrundbild zu! Wir setzen padding-top mit 348px auf die Höhe des Bilds; alle weiteren Elemente beginnen nun unterhalb der Illustration.

/**
* @section Hauptbereich
*/
div#main {
  color: inherit;
  background: white url(images/gabeln.jpg) top center repeat-x;
}
#main div#main-inner {
  color: inherit;
  background: transparent url(images/illustration.jpg) top center no-repeat;
  width: 932px;
  margin: 0 auto;
  padding: 348px 0 0 0;
}

Listing 8.27: Hinzufügen aller Illustrationen als Hintergrundbild des inneren Styling-Containers

Abb. 8.23: Die grafischen Effekte des inneren Bereichs schneiden wir komplett als ein Bild aus dem Entwurf heraus

Das war einfach, oder? Jetzt müssen wir die Sidebar so gestalten, dass sie nahtlos an die Illustration anschließt. Das machen wir im nächsten Schritt.

Übung: Illustrationen

Kopieren Sie sich die Dateien gabeln.jpg und illustration.jpg in Ihren images-Ordner.
Ergänzen Sie Ihre index.html um die beiden div-Elemente.
Ergänzen Sie Ihre default.css um die Regeln für #main und #main-inner.
Speichern Sie und betrachten Sie die Kochbar im Browser. Vergleichen Sie das Ergebnis mit Abbildung 8.24.

Abb. 8.24: Schritt 9

http://jendryschik.de

UX, Usability und Webstandards

Übung: Illustrationen