Absolute Postionierung und floaten...

[peterbrinkrolf]

Hallo Zusammen,

ich beiß'mir gerade an einem CSS-Problem die Zähne aus: Ziel: Ich will zweil Grafiken übereinander einblenden (obere ist der Rahmen), dieses Gesamtkonstrukt soll vom Text umflossen werden.

Problem:
- Wenn ich die Grafiken absolut positioniere, kann ich sie nicht floaten. (klar...)
- Wenn ich sie relative positioniere, und die obere mit "left:-100px" über die andere schiebe, bleibt der "Ursprungsort" der verschobenen Grafik frei.

Hat irgendwer eine Idee? Komme da grad einfach nicht weiter...

vielen Dank & viele Grüße,
Peter

[sejuma]

Ich kann die Aufgabenstellung nicht so recht nachvollziehen. Vielleicht wäre eine kleine Grafik hilfreich.

Wenn möglich, würde ich absolute und relative weglassen und mit entsprechenden margin-Angaben verschieben/positionieren.

[peterbrinkrolf]

Guten Abend,

hab' es gerade nochmal länger probiert... noch keine wirkliche Lösung - im Firefox hab ich es nun geschafft, im IE aber leider gar nicht.

Hier mal der (Test!)-Code:

<p>Lorem ipsum dolor sit amet consectetuer ut auctor Vestibulum ligula ac. Montes ut lacinia non nunc Sed Phasellus pellentesque id lorem tristique. Eu hendrerit enim vel sagittis porttitor habitant justo mollis eu lacinia. At In neque volutpat habitasse.
<br>
<div style="float:left; width:110px; height:100px; overflow:hidden; position:relative;">
<img src="bild.jpg" style="width:100px; height:100px; overflow:hidden; border:0px clip:rect(0px, 100px, 100px, 0px);"');
<img src="maske_bild_100x100.png" width="100" style="position:relative; top:-100px;">
</div>
Lorem ipsum dolor sit amet consectetuer ut auctor Vestibulum ligula ac.

Und so soll's aussehen (das Bild "bild.jpg" ist rechteckig, die Maske soll drauf liegen und ihm die Form geben):

So soll's aussehen:

ff_korrekt.jpg (50.8 KiB) 286-mal betrachtet

Leider geht das mit dem IE nicht, die Bilder werden nicht übereinander gelegt. Vielleicht hat noch jemand eine Idee?

DANKE!

Viele Grüße,
Peter

[sejuma]

Versuch's mal so:
Binde das untere Bild als Hintergrundgrafik ein und positioniere es - so erforderlich - mit background-position.
Das obere bindest du in den gleichen Div als normales Image ein.

Code: Alles auswählen

<div style="float:left; width:110px; height:100px; background-image: url(bild.jpg)">
<img src="maske_bild_100x100.png" width="100">
</div>


Weitere Möglichkeit:
Verschmelze mit einem Bildbearbeitungsprogramm beide Grafiken zu einer.

[peterbrinkrolf]

Moin Sejuma,

jaaa... da las' ich in Deinem Beitrag das word "background" undgefähr bis "backgr...", da viel es mir wie schuppen von den Augen... klar! so einfach kann das Leben sein . Danke für's auf-die-Sprünge-Helfen, manchmal kommt man nicht auf's Naheliegende.

Grüße,
Peter

PS: in Bildbearbeitung die Pics zu mergen geht natürlich - es soll aber eine "der DAU, der Inhalte auf die Seite lädt, kann möglichst wenig vom Layout zerschießen"-Nummer werden. Daher gibt's ne SQL-DB für die Inhalte und nen Web-FTP-Zugang zum Bilder hochladen und dann soll's immer gleich aussehen, ohne was machen zu müssen