Bilder in Verhältnis positionieren (Hilfe benötigt)

[Rolf B]

Hallo Shiela,

so, wie es jetzt ist, können wir nur raten, aber ich befürchte, dass Du für die Stecker keinen eigenen Container mit position:relative vorgesehen hast. Und Du gibst ihnen keinen Ort, sondern setzt Margins.

Ein absolut positioniertes Element ist, wenn man den Ort nicht festlegt, zunächst einmal an der Stelle, wo es ohne position:absolute gelandet wäre. Durch die margin-top Angaben schiebst Du es dann noch nach unten, und vermutlich landet es dann unter dem Bildschirmrand (oder im Nichts, wenn das Dokument hinter der Karte zu Ende ist).

Mit den CSS Eigenschaften top und left kann man den Ort eines absolut positionierten Elements festlegen. Diese Eigenschaften haben ihren Nullpunkt in der oberen linken Ecke des nächstliegenden Elternelements, das nicht statisch positioniert ist (also z.B. position:relative).

Ich würde Dir empfehlen, die Stecker mit in die figure hineinzunehmen und der figure ein position:relative zu geben. Dadurch sind die Stecker Teil der figure und können sich im Zweifelsfall auch zusammen mit der figure bewegen. Das ist schonmal eine gute Sache.

Die Position der Stecker legst Du nicht mit Margins fest, sondern mit top und left. Da die Karte wegen des width:100% mit dem Viewport (Fenster) skaliert, dürfte eine Positionierung mit % ebenfalls sinnvoll sein. Aber probiere es aus, wie sich die Steckerpositionen verhalten wenn Du mit der Fenstergröße spielst.

Rolf