CSS-Layout nun Mittig

Für eine harmonische Wirkung wird gerne der Inhalt mittig dargestellt. Somit verteilen sich die "leeren" Bereiche, die bei größeren Auflösungen entstehen, gleichmäßig rechts und links.

Mittige Ausrichtung des Layouts

Zusätzlich kommt nun noch die mittige Ausrichtung - für den IE muß zusätzlich über den Body-Bereich dies geschehen - für standardkonforme Browser klappt das über "margin: 0 auto;" - das auto sagt, auf beiden Seiten den Platz automatisch aufteilen. 

<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;
}

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

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

<div id="seitenbereich">

  <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>
vorheriges Kapitel: Seitenbreite in CSS begrenzen
nächstes Kapitel: Kopfzeile integrieren
Seitenbreite in CSS begrenzenSeitenanfangKopfzeile integrieren
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