Layer auf Bild

[Rotti]

Hallo,

bin auf der Suche nach einer Lösung, wie ich einen Layer auf einem Bild positionieren kann.

Das Bild hat z.B. die Maße 400x400 pixel.

Ich möchte dass er bei 100x100 pixel Layer positioniert.

Ist das möglich?

vielen dank!

[xabbuh]

Nur wenn ich jetzt diverse div tags habe...und der eine margin-top: 100px und der andere margin-top: 50px hat, wird der zweite nicht bei 50 px platziert, sondern bei 150.

Wenn das zweite div-Elemente sich innerhalb des ersten div-Elementes befindet, ist dieses Verhalten richtig, da sich Abstandsangaben immer auf das Elternelement beziehen.

Vieleicht mit Z-Index arbeiten.

[Rotti]

Vieleicht so:


<div style="width: 400px; height: 400px; border: 1px #ccc solid; background-image: url(image.gif)">

<div style="width: 100px; height: 100px; border: 1px #ccc solid; margin-top: 100px; margin-left:100px">
oder text...mach doch was du willst
</div>

</div>

Das funktioniert, vielen dank!

Nur wenn ich jetzt diverse div tags habe...und der eine margin-top: 100px und der andere margin-top: 50px hat, wird der zweite nicht bei 50 px platziert, sondern bei 150.

Kann mir jemand nen Tipp geben?

mfg

Vieleicht so:


<div style="width: 400px; height: 400px; border: 1px #ccc solid; background-image: url(image.gif)">

<div style="width: 100px; height: 100px; border: 1px #ccc solid; margin-top: 100px; margin-left:100px">
oder text...mach doch was du willst
</div>

</div>

[Rotti]

funktioniert leider nicht ganz so wie ich mir das vorstelle...

..denn er nimmt die 100 als position vom ganzen dokument und ich meine aber punkt 100 im bild

kann mir jemand helfen?

mfg andi

klar, aber ich würde das mit 2 layern machen.... also einen für das bild und den anderen eben.

<div width="400" height="400" style="position:relative; z-index:2; ">
[img]image.gif[/img]
</div>
<div width="100" height="100" style="position:relative; z-index:1; top:100px; left:100px">
[img]image2.gif[/img]oder text...mach doch was du willst
</div>

oder so ähnlich spiel einfach ein bisschen mit top und left rum...