Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

Schritt 1: Den Navigationsbereich floaten

Die zwei Layoutspalten erreichen Sie durch einen kleinen Trick, ähnlich wie bei der absoluten Positionierung:

  • Zuerst wird #navibereich mit float: left ganz nach links positioniert.
  • Danach bekommt #textbereich einen breiten linken Rand.

Da der breite linke margin des Textbereichs unter den gefloateten Navigationsbereich rutscht, sieht es so aus, als ob die beiden Bereiche nebeneinanderstehen.

ToDo: Den Navigationsbereich nach links floaten
  1. Kopieren Sie bildschirm.css aus dem Basisordner für diesen Abschnitt in den Übungsordner. Dort sind zur Vorbereitung alle Deklarationen, die mit #navibereich zu tun haben, entfernt worden.
  2. Fügen Sie die hervorgehobenen Anweisungen hinzu:

    #navibereich {
      float: left;
      width: 110px;
      padding-left: 20px;
      padding-top: 20px;
    }
    #navibereich ul {
    }
    #navibereich li {
      list-style-type: none;
    }
    #navibereich a {
    }
    #startseite #navi01 a,
    #galerieseite #navi02 a,
    #kontaktseite #navi03 a {
    }
    #navibereich a:hover,
    #navibereich a:focus {
    }
    #navibereich a:active {
    }

  3. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

So ungefähr sieht es momentan im Browser aus:

Abbildung 16.2: Der Inhalt umfließt die Navigation
Abbildung 16.2: Der Inhalt umfließt die Navigation

Tja. Schon fast gut. Die Navigation befindet sich senkrecht am linken Rand, die Listenpunkte sind weg, aber der Textbereich umfließt sie, statt ordentlich daneben in einer Spalte zu sitzen.