nicht angemeldet
Hallo,
Nein, die Elemente sollen alle genau übereinander liegen...
Formulierungshilfe:
Innerhalb eines Bereichs (DIV) sollen alle Elemente so positioniert sein, dass sie sich horizontal und vertikal in der Mitte dieses Bereiches befinden. Mehrere Elemente sollen sich überlappen.
1. Damit mehrere Elemente sich überlappen, musst Du sie aus dem normalen Elementfluss lösen. Das heißt, Du musst sie innerhalb des umgebenden Bereichs absolut positionieren.
2. Um Elemente absolut, genau in der Mitte eines Bereichs zu positionieren, müssen die Größe dieses Bereichs und die Größen der zu positionierenden Elemente absolut bekannt sein. Das bedeutet, es kommen nur Blocklevel-Elemente und solche Inline-Elemente in Frage, für die Breite und Höhe angegeben werden können (z.B.: IMAGE).
3. Ist das alles bedacht, kannst Du mit den CSS-Eigenschaften position, width, height, left, top, margin-left und margin-top arbeiten.
Bsp.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mittel-DIVs im DIV</title>
</head>
<body>
<p>Inhalt vorher</p>
<div style="position:relative; width:600px; height:250px; border:20px solid black;">
<div style="position:absolute; width:300px; height:200px; background-color:red; left:50%; margin-left:-150px; top:50%; margin-top:-100px;"></div>
<div style="position:absolute; width:250px; height:150px; background-color:green; left:50%; margin-left:-125px; top:50%; margin-top:-75px;"></div>
<div style="position:absolute; width:200px; height:100px; background-color:yellow; left:50%; margin-left:-100px; top:50%; margin-top:-50px;"></div>
<div style="position:absolute; width:150px; height:30px; line-height:30px; font-size:30px; text-align:center; left:50%; margin-left:-75px; top:50%; margin-top:-15px; border:1px solid black;">Text</div>
</div>
<p>Inhalt nachher</p>
</body>
</html>
viele Grüße
Axel