Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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>
weitere eigene Projekte: