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
del.icio.usMister Wong         Seitenbreite in CSS begrenzenSeitenanfangKopfzeile integrieren
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de