Linkliste einrichten und positionieren
Positionieren Sie auf Ihrer Seite die Menüeintreige für die beiden geplanten Geschichten von Wilhelm Busch "Huckebein" und "Helene" für die Unterseiten als Liste über dem ersten Text.
Lassen Sie die Menüliste links von der Seite umfließen (float: left)
Anleitung:
Umgeben Sie dazu zunächst die angelegte Liste mit einer leeren DIV-Box. Dazu stellen Sie im Quelltext vor die Liste das HTML-Element <div> und beenden Sie die Liste mit einem </div>
Regel für die Navigationsbox
Definieren Sie in der CSS-Datei eine Regel für die linke Navigationsleiste, die Sie anschließend der DIV-Box zuweisen können. Nennen Sie die Regel #navilinks (Sie dürfen hier einen eigenen Namen erfinden)
Geben Sie diesem Element im KompoZer über das Menü "Box" die Eigenschaft Puffer: Links (das entspricht der CSS-Schreibweise: float: left) und eine Breite von 150px.
Erstellen Sie eine zweite Box (<div></div>) um den Rest des Seiteninhalts.
Erstellen Sie eine weitere individuelle Regel in der CSS-Datei mit dem Namen #container und geben Sie diesem Element die Box-Eigenschaft: Puffer rechts und eine Breite von 649px.
Wenn Sie jetzt die Seite im Browser anschauen, werden Sie feststellen, dass mit einer Veränderung der Fenstergröße der Text frei im Raum "schwimmt".
Fixieren Sie den Text, indem Sie das HTML-Element "body" mit einer Regel versehen und diesem Element eine feste Breite von 800px zuweisen.
Die aktuelle CSS-Datei hinter diesem Ergebnis:
