Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

dreispaltiges Layout

Zusätzlich neben Navigation und Inhalt 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 werden 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 den 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>
#seitenbereich {
  margin: 0 auto;    /* Zentrierung mitte */
  width: 780px;
  background-color: silver;
}

#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>

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe