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 zugelangen (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 den vorherigen Bereich abgeschlossen werden, was durch ein "clear:both;" erfolgt. Die Fußzeile wird farblich hinterlegt, damit besser sichtbar und bekommt im oberen Bereich einen schwarzen Rand mit 2 Pixeln Breite zur Abgrenzung. 

<style type="text/css">
<!--
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>
vorheriges Kapitel: Kopfzeile integrieren
nächstes Kapitel: dreispaltiges Layout
Kopfzeile integrierenSeitenanfangdreispaltiges Layout
eBook HTML-Seminar.de
del.icio.usMister Wong         Kopfzeile integrierenSeitenanfangdreispaltiges Layout
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de