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;
}

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.