Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

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.