divs
verschachteln
positionieren
relativ
Vorhang zu
Action!
Hallo ...
später Hallo
ein Spalt
Variable
auf geht's!
abschneiden
schööön!
weiteres heiteres
Klappe zu!
divs Mit dem Bild von Marilyn, genauer gesagt: mit der <div>, die dieses
Bild enthält, haben wir schon fast ein Drittel der Aufgabe erledigt. Tatsächlich besteht
der Trick vor allem darin, die einzelnen Komponenten in <div>s zu
stecken und diese dann zu positionieren.
Mit diesen Aussichten können wir gleich die nächsten beiden <div>s
nachliefern: Eine leere mit der id="vorhang" und eine dritte, die nichts
anderes ist, als eine Kopie der Marylin-div mit zwei Anpassungen: die id ändert (eine
id ist eindeutig, darf also nur einmal vorkommen - nenn die neue id="willkommen")
und das Bild heisst willkommen.jpg.
Den Vorhang - genauer gesagt: die Abbildung wtuell.gif haben wir allerdings
noch nicht ins Spiel gebracht. Das holen wir mit einer style-Angabe nach,
die wir im <head>-Bereich der Seite platzieren und in der wir
den Vorhang für die zweite <div> als Hintergrundbild definieren.
Bei mir sieht das nun so aus: (die neu hinzugekommenen Teile sind gelb hinterlegt)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Vorhang auf</title> <style type="text/css"> #vorhang { background: url(wtuell.gif) } </style> </head> <body> <p><hr /></p> <div id="marilyn"> <a href="http://homepapa.ch"><img src="marilyn.jpg" alt="marilyn" width="349" height="527" /></a> </div> <div id="vorhang"> </div> <div id="willkommen"> <a href="http://homepapa.ch"><img src="willkommen.jpg" alt="Willkommen" width="108" height="96" /></a> </div> <p><hr /></p> </body> </html>
Das Resultat müsste dann etwa so aussehen.
Ist das tatsächlich, was wir erwartet haben? Dazu ist sicher noch eine Bemerkung fällig.