- readme.txt
- Die Einleitung (I) Kapitel 1
- HTML – Grundlagen (II) Kap. 2 bis 4
- CSS – Grundlagen (III) Kap. 5 bis 11
- CSS – Positionierung (IV) Kap. 12 bis 14
- CSS – mehrspaltige Layouts (V) Kap. 15 bis 19
- 15. Mit position:absolute
- 16. Mit float — feste Breite
- 17. Mit float — flexibel
- 18. Fertige Layoutvorlagen
- 19. Patchwork: Flicken im CSS
- Nützliche Werkzeuge (VI) Kapitel 20
Weitere Infos
Sie lesen:
LB1 (2009)

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:
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
- 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.
- 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 {
} - Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.
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.