divs
verschachteln
positionieren
relativ
Vorhang zu
Action!
Hallo ...
später Hallo
ein Spalt
Variable
auf geht's!
abschneiden
schööön!
weiteres heiteres
Klappe zu!
Wenn du nochmals einen Blick riskieren willst,
dann fällt dir sicher auf, dass von unserer Vorhang-<div> aber auch
gar nichts zu sehen ist.
Solche Überraschungen kommen bei dieser Art von Problemen häufig vor, aber sie lassen
sich im Allgemeinen schon erklären. In unserem Fall haben wir's nicht mit einem Fehler
zu tun, sondern unsere <div> hat ganz einfach keine Ausdehnung,
weder horizontal noch vertikal, da sie ja völlig leer ist. Wenn du sie z.B. in der
<style>-Angabe mit einem Wert für height, width oder
padding ausstattest, dann wird da schon was sichtbar. Und genau das werden wir
dann auch machen, wenn's so weit ist.
Vorderhand konzentrieren wir uns aber mal auf die interessante Frage, wie wir nun die
drei <div>s übereinander legen. Die zuverlässigste Lösung ist die,
dass wir eine weitere, neue <div> anlegen, in die wir dann die
andern drei <div>s hineinpacken.
Die neue <div> kriegt bei mir die id="alles" (etwas
intelligenteres fällt mir gerade nicht ein) und liegt einfach um die drei andern
herum.
Das sieht dann etwa so aus: (die neue <div> ist 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="alles">
<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>
</div>
<p><hr /></p>
</body>
</html>
Das Resultat sieht so aus und unterscheidet sich überhaupt nicht von dem, was wir schon hatten.
Aber das wird sich nun gewaltig ändern.