dreispaltiges Layout

Zusätzlich neben Navigation und Steuerung kommt noch eine dritte Spalte, hier der Infokasten.

3-spaltiges Layout in CSS

Die 3 Spalte wird über float:right; auf der rechten Seite ausgerichtet. Zusätzlich wird bei der mittleren Spalte die entsprechenden Abstände zum Rand definiert - margin: 0 10em 0 13em;

Dabei steht:

  • die 1. Angabe von 0 für die oberen Abstand von 0 Pixel
  • die 2. Angabe von 10em für den Abstand nach rechts, was für den Infokasten benötigt wird
  • die 3. Angabe von 0 für den Abstand nach unten von 0 Pixel
  • die 4. Angabe von 13em für den Abstand nach links, was für die Navigation benötigt wird.

Als fertiger Code sieht es wie folgt aus:

<style type="text/css">
<!--
#navi {
  float:left;
  width:13em;
  background-color:thistle;
}

#inhalte {
  margin: 0 10em 0 13em;
  background-color:lightblue;
}

#infokasten {
  float:right;
  width: 10em;
  background-color:yellowgreen;
}
-->
</style>

<div id="seitenbereich">

  <div id="navi">
    <ul>
      <li>Startseite</li>
      <li>Impressum</li>
    </ul>
  </div>

  <div id="infokasten">
    Auf dieser Seite bekommen Sie Informationen zu ...
  </div>

  <div id="inhalte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
  </div>

</div>
vorheriges Kapitel: Fußzeile intergrieren
nächstes Kapitel: Steuerung per CSS
Fußzeile intergrierenSeitenanfangSteuerung per CSS
eBook HTML-Seminar.de
del.icio.usMister Wong         Fußzeile intergrierenSeitenanfangSteuerung per CSS
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de