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

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 alte Versionen des Microsoft IEs muss dies zusätzlich über den <body>-Bereich mit text-align: center; geschehen - für standardkonforme Browser klappt das über margin: 0 auto; - das „auto“ sagt, auf beiden Seiten den Platz automatisch gleichmäßig aufteilen.

<style>
body {
  text-align: center; /* Zentrierung für alte IEs */
}

#seitenbereich {
  text-align: left;  /* Inhalt wieder links wegen alten IEs */
  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>
weitere eigene Projekte: