Schritt 12: Fußzeile

Kommen wir zur Fußzeile; zum Ende der Seite und gleichzeitig auch zum vorläufigen Abschluss des Stylesheets. Die Fußzeile besteht nur aus einem div-Element mit der ID footer und darin zwei Absätzen, daher ist ihr Styling nicht sonderlich schwierig.

Wichtig ist allerdings, dass wir Folgendes nicht vergessen: Die Fußzeile steht sowohl unterhalb des Contents als auch unterhalb der floatierten Sidebar! Wir müssen daran denken, die Eigenschaft clear auf den Wert left zu setzen – oder besser gleich auf both. Darüber hinaus müssen wir beachten, dass die Fußzeile eine andere Schriftart hat als der Rest der Seite, nämlich die serifenlose Schriftart Tahoma.

Für die Breitenbeschränkung und die horizontale Zentrierung setzen wir wieder die Eigenschaften width und margin ein. Wir benötigen dieses Mal keinen inneren Container, sondern deklarieren direkt für die Absätze innerhalb des Footers. Sollten wir die Fußzeile später einmal durch zusätzliche Elemente erweitern wollen, können wir an dieser Stelle immer noch Änderungen vornehmen.

/**
* @section Footer
*/
div#footer {
  color: #7F6063;
  background-color: #F3F2FA;
  padding: 24px 0;
  font-family: Tahoma, Arial, sans-serif;
  font-size: .9em;
  clear: both;
  margin: 24px 0 0 0;
}
#footer p {
  width: 932px;
  margin: 0 auto;
}
Listing 8.36: Styling der Fußzeile

Übung: Content

  1. Ergänzen Sie Ihre default.css.
  2. Speichern Sie, betrachten Sie die Kochbar im Browser und vergleichen Sie sie mit Abbildung 8.33.
  3. Validieren Sie sowohl Ihr Markup als auch das Stylesheet. Wenn Sie beim Aufbau der Dokumente keinen Fehler gemacht haben, validieren sowohl die index.html als auch die default.css vollständig ohne Fehler oder Warnungen.


Abb. 8.33: Schritt 12

Wir sind fertig – die Homepage ist vollständig. Und das war doch gar nicht so schwierig, oder?

Lassen Sie uns mit den Unterseiten weitermachen.

Sie mögen meine Website und möchten mich unterstützen? Dann nutzen Sie doch Flattr oder empfehlen Sie mich weiter auf Twitter oder Facebook!

Flattr
Twitter

Zum Seitenanfang