Kopfzeile integrieren

In der Regel sieht man meistens eine Kopfzeile, in der der Domainnamen 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 besser Sichtbar und bekommt im unteren Bereich einen schwarzen Rand 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;
}

#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>
nächstes Kapitel: Fußzeile intergrieren
Mittige Ausrichtung des LayoutsSeitenanfangFußzeile intergrieren
eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2012 Axel Pratzner • www.html-seminar.de • Stand 15.01.2012
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de