Fußzeile integrieren

Die Fußzeile am Ende der Seite, enthält oft das Datum der letzten Aktualisierung und einen Link, um wieder an den Anfang der Seite zu gelangen (geschickt bei längeren Seiten).

Fußzeile in CSS-Layout

Zum bisherigen Design kommt nun ein weiterer DIV-Bereich für die Fußzeile - dabei muss allerdings der vorherige Bereich abgeschlossen werden, was durch die CSS-Anweisung clear:both; erfolgt.

Die Fußzeile wird farblich hinterlegt, damit sie besser sichtbar ist und bekommt im oberen Bereich einen schwarzen Rand, mit einer Breite von 2 Pixel zur Abgrenzung.

<style>
body {
  text-align: center; /* Zentrierung IE */
}

#seitenbereich {
  text-align: left;  /* Inhalt wieder links */
  margin: 0 auto;    /* Zentrierung mitte */
  width: 780px;
  background-color: silver;
}

#kopfzeile {
  background-color: lightskyblue;
  border-bottom: 1px solid black;
}

#fusszeile {
  clear: both;
  background-color: lightskyblue;
  border-top: 2px solid black;
}

#navi {
  float: left;
  width: 13em;
  background-color: thistle;
}

#inhalte {
  margin-left: 14em;
  background-color: lightblue;
}
</style>

<div id="seitenbereich">

  <div id="kopfzeile">
    www.HTML-Seminar.de - jetzt HTML lernen
  </div>

  <div id="navi">
    <ul>
      <li>Startseite</li>
      <li>Impressum</li>
    </ul>
  </div>

  <div id="inhalte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
  </div>

  <div id="fusszeile">
    www.html-seminar.de  -  Kontakt über .... [AT]html-seminar.de
  </div>

</div>