Kopfzeile integrieren

In der Regel sieht man meistens eine Kopfzeile, in der der Domainname und ein Logo oder Bild auftaucht.

Kopfbereich in CSS-Layout

Zum bisherigen Design, kommt nun ein weiterer DIV-Bereich für die Kopfzeile - dieser wird farblich hinterlegt. Damit ist er besser sichtbar und bekommt im unteren Bereich einen schwarzen Rand 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;
}

#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>