Dr. O. Hoffmann
Es ist noch kein Meister vom Himmel gefallen.
Ovid
Wer noch gar keine Erfahrung mit CSS-Layout hat, dem seien
erst die früheren Abschnitte dieses Projektes empfohlen. Die
Erstellung eines kompletten Layouts Schritt für Schritt
findet sich im Abschnitt 'erstes CSS' des Menüs.
Hier wollen wir nun ein paar einfache Übungen zum
Kastenmodell probieren, dazu legen wir erst einmal
eine XHTML-Datei von etwa folgender Form an:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>CSS-Layout-Test</title> <style type="text/css"> <![CDATA[ /* ... Hier werden die Formate definiert ... */ ]]> </style> </head> <body> <div class="kiste" title="Kiste"> <ul class="menu" title="Menue"> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> <li>Punkt 4</li> <li>Punkt 5</li> </ul> <div class="inhalt" title="Inhalt"> <p>bla bla </p> <p>hier kann noch mehr Text hin ...</p> </div> </div> </body> </html>
Und damit wollen wir als erstes folgendes Seitenlayout erreichen:
Zum Einsatz relevant sind für unsere Belange erst einmal die
CSS-Eigenschaften zur Ausrichtung und Absatzkontrolle von Text (line-height,
text-align, vertical-align
), Außen- und Innenabstand (margin, padding
),
Listenformatierung (list-style
), Positionierung (position, top, left, right,
bottom
) und Anzeige (max/min-width, height, float, z-index, display,
visibility
).
position
: static sinngemäß
erstellen, nutze float
für das Menü und
margin-left
für den Inhalt. margin-left
vorgesehene Platz? Was macht man,
um das Menü auf die rechte Seite zu bekommen?
position
: static nun
position
: absolute und positioniere
mit top
und left
.left
vorgesehene Platz? z-index
? und bei
float
? oder wenn die
Breite des Menüs mit width
eingeschränkt wird?margin-left
oder
margin-right
für das Element body
schaffen und das Menü mit
position
: absolute positionieren.
position
: fixed, Inhalt auf static
oder absolute. Was passiert beim Rollen der Seite? Das Menü
sollte stehenbleiben. Tut es das nicht, ist das Darstellungsprogramm veraltet.float
noch?
Was passiert bei einem Überlapp? Wie sieht es mit dem z-index
aus -
bei position
: static und absolute?fixed
positionierte Menü eine definierte
Höhe an oder aber sowohl top
als auch
bottom
und zusätzlich
overflow
: auto.
Was passiert nun bei Überstehendem Inhalt?
html
-Bereich
soll dafür nur der eigentliche Listeneintrag geändert werden -
ein Stern als Trennzeichen kann auch noch hinzugefügt werden.fixed
beim Menü auf den Inhalt aus? Zum Beispiel
mit margin-top
wäre also oben ausreichend Platz zu lassen - bei
verschiedenen Fenstergrößen testen! Und wie kann nur durch
Änderung der Stilvorlage erreicht werden, daß das Menü
unten erscheint? (einmal mit
position
: absolute
und einmal mit fixed
?)
Und wie sieht es dann mit zu reservierendem Platz aus?
html
-Bereich ein (innerhalb
des Inhaltes) und geben dem Element img
den Klassennamen 'bild'.
Die Breite setzen wir willkürlich zu Übungszwecken auf 600 Pixel.
Dazu nehmen wir ein weiteres mit einer Breite von weniger als 200 Pixeln.
Begrenze einmal das Inhalts-div
-Element auf eine minimale Breite in Pixeln,
dann in 'em' und in Prozent und das Bild auf eine maximale
Breite in 'em' und dann in Prozent.
Ansonsten kann das Layout von Aufgabe 1 genutzt werden.:hover
für
das Element a
neben dem Kasten
erscheint und zum Beispiel bei :active
eine andere Farbe annimmt... float
s nur auf den folgenden Text wirken, diese
also für die Positionierung von Menüs nur noch von sehr begrenztem
Nutzen sind.