divs
verschachteln
positionieren
relativ
Vorhang zu
Action!
Hallo ...
später Hallo
ein Spalt
Variable
auf geht's!
abschneiden
schööön!
weiteres heiteres
Klappe zu!
Es gibt nichts Neues unter der Sonne.
Schon im CSS2-Kurs haben wir festgehalten, dass der Schritt zur Positionierung einige
Konsequenzen hat. Dazu gehört, dass wir die Verantwortung für die richtige Platzierung
der verschiedenen Elemente selber übernehmen müssen und nicht mehr auf den Browser
abwälzen können, weil sonst nämlich Dinge passieren, wie wir sie jetzt gerade an den
beiden <hr />-Elementen gesehen haben.
Ausserdem: Wenn wir unsere drei <div>s absolut positionieren,
beziehen sie ihre Lage auf ihr Mutterelement (<div id="alles">),
und dann muss dieses ebenfalls eine position-Angabe haben.
Um's kurz zu machen: Wir erstellen nun also noch eine Zeile für die
<div id="alles"> und geben ihr die Positionierungs-Eigenschaft
relative sowie eine Höhe und Breite.
Hier siehst du die Anpassungen im <style>-Bereich:
<style type="text/css">
#alles { position: relative ; height: 527px ; width: 349px }
#marilyn { position: absolute ; top: 0em ; left: 0em }
#vorhang { position: absolute ; top: 0em ; left: 0em ; background: url(wtuell.gif) }
#willkommen { position: absolute ; top: 1em ; left: 1em }
</style>
Wie du siehst, löst das schon mal das Problem mit den beiden horizontalen Linien.
Dann wollen wir jetzt endlich mal noch den Vorhang ziehen.