nicht angemeldet
Bilder überlagern
Hallo!
Ich habe ein Problem beim Überlagern von Bildern in einer Tabelle. Ich habe ein automatisch generiertes HTML-Dokument (aus einer XML+XSLT->HTML-Pipeline) und kann daher Breite und Höhe der Bilder nicht eruieren und verwende nach der XSL-Transformation CSS für die weitere Formatierung.
Ich habe bereits einige Ansätze aus dem Web und diesem Forum probiert, allerdings ist dort überall Breite & Höhe der Bilder bekannt, kommt daher für micht nicht in Frage.
Ich habe eine Tabelle á la:
<html>
<body>
<table>
<tr style="background-color: #A0A0A0";>
<td style="position:absolute">
<img style="position:absolute; top:0px; left:0px" src="fire.jpg"/>
<img style="position:absolute; top:0px; left:0px" src="hand.jpg"/>
</td>
<td>
asdf
</td>
<td style="position:absolute">
<img style="position:absolute; top:0px; left:0px" src="fire.jpg"/>
<img style="position:absolute; top:0px; left:0px" src="hand.jpg"/>
</td>
</tr>
</table>
</body>
</html>
hand.jpg sollte in beiden Zellen in der linken oberen Ecke von fire.jpg sitzen - tut es auch. Jedoch sind die Zellen jeweils nur durch wenige Pixel getrennt. Wie kann die Breite dieser Zellen dynamisch an die Breite der Bilder angepasst werden? Mit width:auto komme ich nicht weit, auch wenn ich zusätzliche divs verwende, bringt mich das nicht weiter.
Ich bin dankbar für jeden Tipp, mfg Michael
-
Hallo,
hand.jpg sollte in beiden Zellen in der linken oberen Ecke von fire.jpg sitzen - tut es auch. Jedoch sind die Zellen jeweils nur durch wenige Pixel getrennt.
Hast du schon <table cellpadding="0" cellspacing="0"> probiert?
Wie kann die Breite dieser Zellen dynamisch an die Breite der Bilder angepasst werden?
Damit: <td style="position:absolute"> wirklich nicht!
Natürlich solltest du das Verhalten der Browser im Zusammenhang mit dem DOCTYPE-Switch auch beachten.
Grüße
Thomas-
Hast du schon <table cellpadding="0" cellspacing="0"> probiert?
Ja, leider ohne Erfolg :-(
Wie kann die Breite dieser Zellen dynamisch an die Breite der Bilder angepasst werden?
Damit: <td style="position:absolute"> wirklich nicht!
Wenn ich das weglasse, kleben alle Bilder im linken oberen Eck des Browserfensters (nicht der Tabelle!), egal welchen Browser (Mozilla, IE, Opera) ich verwende.
Danke trotzdem, mfg Michael
-
Hallo,
Wenn ich das weglasse, kleben alle Bilder im linken oberen Eck des Browserfensters (nicht der Tabelle!), egal welchen Browser (Mozilla, IE, Opera) ich verwende.
Benutze bitte eine entsprechende DOCTYPE-angabe für dein HTML http://selfhtml.teamone.de/xml/darstellung/xsltelemente.htm#output um die Browser in den standardkompilant mode zu versetzen, dann sollten sie auch die CSS-angaben entsprechend interpretiern. (auch position:relativ wäre da möglich)
Grüße
ThomasPS: wozu müssen sich die Bilder überhaupt überlagern?
-
Benutze bitte eine entsprechende DOCTYPE-angabe für dein HTML
Ich lasse die Pipe auf einem Cocoon-Server laufen, der generiert selbständig ein fertiges HTML-Dokument, das hat also keine Auswirkungen.
Ich hab jetzt doch eine Lösung mit meinem ursprünglichen Ansatz gefunden:
<table cellspacing="0" cellpadding="0">
<tr style="background-color: #A0A0A0";>
<td>
<div style="position:relative">
<img src="fire.jpg"/>
<img style="position:absolute; top:0px;left:0px" src="hand.jpg"/>
</div>
</td>
<td>
<div style="position:relative">
<img src="fire.jpg"/>
<img style="position:absolute; top:0px;left:0px" src="hand.jpg"/>
</div>
</td>
</tr>
</table>PS: wozu müssen sich die Bilder überhaupt überlagern?
Die Geschichte dazu würde jetzt wohl ein paar Seiten dauern ;-)
Ganz kurz: Wir arbeiten hier an einer Symbolsprache/Bildsprache, für die das benötigt wird. Um Tätigkeiten darzustellen, soll beispielsweise eine Hand einem anderen Bild überlagert werden. z.B. Stift mit überlagerter Hand-> schreiben. Ich hoffe, das war halbwegs verständlich.
Danke nochmal für deine Hilfe, mfg Michael
-
-
-