Grafiken relativ zu DIV-Container positionieren

[Anton]

Hi,

die folgenden beiden Grafiken werden innerhalb eines DIV-Containers in eine Webseite eingebunden. Die Grafiken werden nebeneinander angezeigt.

<img src="css/images/1.jpg" width="100" height="100" alt="1">
<img src="css/images/2.jpg" width="100" height="100" alt="2">

Ich würde nun gerne folgendes erreichen:

Ausgehend vom Mittelpunkt des DIV-Containers soll die erste Grafik 20 Pixel links davon positioniert werden. Die zweite Grafik soll 20 Pixel rechts davon positioniert werden. Demnach sollen die Grafiken also einen Abstand von 40 Pixeln haben. Des weiteren soll die zweite Grafik um die hälfte ihrer Höhe (50 Pixel) weiter unten stehen als die erste Grafik.

Wie bastel ich mir sowas denn am besten zusammen?

[Kalle_B]

Hi,

innerhalb des div Containers sind die Bilder mit CSS absolut zu positionieren:

  
img {position:absolute}  

Bedingung ist, dass der Container selbst absolut oder relativ positioniert ist.

Ausgehend vom Mittelpunkt des DIV-Containers

  
img {top:50%; left:50%}  

soll die erste Grafik 20 Pixel links davon positioniert werden.

margin-left:-20px

Die zweite Grafik soll 20 Pixel rechts davon positioniert werden.

margin-left:20px

Demnach sollen die Grafiken also einen Abstand von 40 Pixeln haben.

Nein, sie überlappen sich, weil Grafik 1 100px breit ist und Grafik 2 40px von ihrem linken Rand beginnt.

Des weiteren soll die zweite Grafik um die hälfte ihrer Höhe (50 Pixel) weiter unten stehen als die erste Grafik.

margin-top:50px

Kalle