nicht angemeldet
Bilder überlagern in Tabellenzelle
Gernot Back
Der MartinHallo,
ich habe eine Tabelle, in der ich in einzelnen Zellen überlagerte Bilder(alle gleich groß) anzeigen möchte.
Hier mal ein Beispiel, wie ich mir das gedacht habe:
<html><head>
</head><body>
<table border="1">
<td style="position:relative;">
<div style="position:absolute;">
<img src="bild1.gif">
</div>
<div style="position:absolute;">
<img src="bild2.gif">
</div>
<div style="position:absolute;">
<img src="bild3.gif">
</div>
</td>
</tr>
</table>
</body></html>
Die Überlagerung funktioniert, so wie ich es mir vorgestellt habe. Allerdings fliegt mir das Bild bei der Angabe von position:absolute aus der Tabelle raus. Wie kriege ich es hin, dass sich meine absolute Positionierung für die Bilder auf die Tabellenzelle (statt auf die Seite) bezieht? Oder geht das so nicht?
Falls jemand einen ganz anderen Vorschlag hat, wie ich das mit der Überlagerung sauber hinkriege, wäre ich natürlich auch dafür dankbar. Voraussetzung ist aber, dass ich mehr als 2 Bilder auf diese Weise überlagern lassen (background image für die Tabellenzelle kommt daher nicht in Frage).
Danke schonmal für alle Anregungen...
-
Ich habe mittlerweile doch selbst noch eine saubere Lösung gefunden, wie ich in einer Tabellenzelle ein Bild aus beliebig vielen, (teil-)transparenten Schichten aufbauen kann.
Bei einem 25x25 Pixel großem Bild sieht die Zelle dann so aus:
<td>
<table border="0" cellspacing="0" cellpadding="0">
<td style="width:25px; height:25px; background-image:url(bild1.gif)"><table border="0" cellspacing="0" cellpadding="0">
<td style="width:25px; height:25px; background-image:url(bild2.gif)"><table border="0" cellspacing="0" cellpadding="0">
<td style="width:25px; height:25px; background-image:url(bild3.gif)"></td>
</table></td>
</table></td>
</table></td>
-
Hallo Matthias,
ich zweifle, dass Tabellen ohne TR-Element eine saubere Lösung sein können, oder existiert das bei einzeiligen Tabellen dann implizit, so wie beim TBODY-Element? Ich muss das bei Gelegenheit mal nachschlagen.
Gruß Gernot
-
Hallo Gernot,
ich zweifle, dass Tabellen ohne TR-Element eine saubere Lösung sein können, oder existiert das bei einzeiligen Tabellen dann implizit, so wie beim TBODY-Element?
Das hat mich auch stutzig gemacht. Und auch die Tatsache, dass Matthias innerhalb einer Zelle dreimal eine neue Tabelle aufmacht, aber keine davon abschließt. Dass </td> und </tr> in HTML weggelassen werden dürfen, ist mir bekannt - aber gilt das auch für </table>? Ich kann's mir nicht vorstellen, weil der Kontext dann -im Gegensatz zum Weglassen von tr- und td-Endtags- nicht mehr eindeutig ist.
Ebenso verstehe ich nicht, wie mit diesem Konstrukt die Hintergrundbilder (und damit anscheinend die drei "halblebigen" Tabellen) sich überlagern. Ich hätte eher erwartet, dass sie untereinander stehen.
Hmm... Rätsel über Rätsel.Ich muss das bei Gelegenheit mal nachschlagen.
Und in verschiedenen Browsern ausprobieren. Theorie und Praxis müssen ja nicht unbedingt das gleiche sein.
Schönen Sonntag noch,
Martin--
Wenn alle das täten, wass sie mich können,
käme ich gar nicht mehr zum Sitzen.
-
Hallo Martin,
dass Matthias innerhalb einer Zelle dreimal eine neue Tabelle aufmacht, aber keine davon abschließt. Dass </td> und </tr> in HTML weggelassen werden dürfen, ist mir bekannt - aber gilt das auch für </table>?
Nein, definitiv nicht!
vgl.: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1
"Start tag: required, End tag: required"
Aber Matthias hat die schließenden </table>-Tags doch in seinem verschachtelten Code!
Meines Wissens ist es bei den meisten Browsern auch so, dass eine Tabelle, solange deren End-</table>-Tag noch nicht geladen ist, auch komplett nicht angezeigt wird, es sei denn, sie ist mit
table-layout:fixedformatiert.Gruß Gernot
-
Hallo,
Aber Matthias hat die schließenden </table>-Tags doch in seinem verschachtelten Code!
ööhm... ja, jetzt wo du es sagst - plötzlich sind sie da. ;-)
Ich hatte mich von der ungewohnten Struktur und den fehlenden tr-Elementen wohl so verwirren lassen, dass mir die </table>-Tags weiter unten gar nicht mehr aufgefallen sind.
Dann handelt es sich natürlich wirklich um verschachtelte Tabellen und nicht um aufeinanderfolgende, und somit müssen auch die Hintergrundbilder tatsächlich übereinander liegen. Sorry, da hab ich offensichtlich nicht aufgepasst.Meines Wissens ist es bei den meisten Browsern auch so, dass eine Tabelle, solange deren End-</table>-Tag noch nicht geladen ist, auch komplett nicht angezeigt wird, es sei denn, sie ist mit
table-layout:fixedformatiert.Das mit dem table-layout wusste ich jetzt noch nicht. Aber ansonsten ist mir auch bekannt, dass Tabellen üblicherweise erst angezeigt werden, wenn sie _vollständig_ geladen sind.
So long,
Martin--
Lieber eine Fliege im Porzellanladen
als ein Elefant in der Suppe.
-
Hallo Martin,
Meines Wissens ist es bei den meisten Browsern auch so, dass eine Tabelle, solange deren End-</table>-Tag noch nicht geladen ist, auch komplett nicht angezeigt wird, es sei denn, sie ist mit
table-layout:fixedformatiert.Das mit dem table-layout wusste ich jetzt noch nicht. Aber ansonsten ist mir auch bekannt, dass Tabellen üblicherweise erst angezeigt werden, wenn sie _vollständig_ geladen sind.
Ich habe dazu auch keine Spezifikation finden können. Habe es nur "gerüchteweise" ;-) gehört. Das Problem ist, dass man sich erst eine sehr umfangreiche Tabelle zur Probe basteln müsste, um den Unterschied beim Laden zwischen einer mit und einer ohne
table-layout:fixedzu sehen, vor allem, wenn man kein 28K-Modem zur Hand hat.Gruß Gernot
-
Hallo Gernot.
Das Problem ist, dass man sich erst eine sehr umfangreiche Tabelle zur Probe basteln müsste, um den Unterschied beim Laden zwischen einer mit und einer ohne
table-layout:fixedzu sehen, vor allem, wenn man kein 28K-Modem zur Hand hat.Das ist auch nicht nötig:
<?php $str_file = fopen('./table.htm', 'w'); fwrite($str_file, '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; } </style> <script type="text/javascript"></script> </head> <body> <table>'); for ($int_i = 0; $int_i < 10000; $int_i++) { fwrite($str_file, ' <tr> <td>Foo</td><td>Bar</td><td>Baz</td> </tr>'); } fwrite($str_file, ' </table> </body> </html>'); fclose($str_file); ?>Im IE und Firefox wird der Unterschied sehr deutlich; mit table-layout:fixed steht die Tabelle augenblicklich zur Verfügung, ohne bedarf es erst der gewohnt langen Ladezeit. In Konqueror und Opera kann ich keinen Unterschied feststellen.
Ich habe zwischen jedem Neuaufrufen der table.htm den Cache geleert.Einen schönen Sonntag noch.
Gruß, Ashura
-
Hallo Ashura,
Im IE und Firefox wird der Unterschied sehr deutlich; mit table-layout:fixed steht die Tabelle augenblicklich zur Verfügung,
... was für den IE auch hier unter "Remarks" beschrieben wird:
Gruß Gernot
-
-
-
-
-
-
Hallo nochmal,
ich zweifle, dass Tabellen ohne TR-Element eine saubere Lösung sein können, oder existiert das bei einzeiligen Tabellen dann implizit, so wie beim TBODY-Element? Ich muss das bei Gelegenheit mal nachschlagen.
... was ich jetzt gemacht habe:
vgl.: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3
"When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element."
Ganz eindeutig ist diese Aussage allerdings nicht, denn das TBODY-Element ist zwar immer "präsent", häufig aber nur implizit.
Gruß Gernot
-
Hallo nochmal,
ich zweifle, dass Tabellen ohne TR-Element eine saubere Lösung sein können, oder existiert das bei einzeiligen Tabellen dann implizit, so wie beim TBODY-Element? Ich muss das bei Gelegenheit mal nachschlagen.
Bei dem folgenden Code meckert der Validator zwar:
"Line 20 column 32: start tag for "TR" omitted, but its declaration does not permit this."
Die JS-Funktion meldet aber alle Vorfahrenselemente inklusive des impliziten TR- und TBODY-Elements:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tabletest</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> [code lang=javascript] function melden() { obj = document.getElementById('einzelzelle'); while(obj){ alert(obj.nodeName); obj=obj.parentNode; } } window.onload=melden;</script>
</head>
<body>
<TABLE>
<TD id="einzelzelle">
</TABLE>
</body>
</html>
[/code]
Gruß Gernot
-
-
-
Hallo Matthias,
Die Überlagerung funktioniert, so wie ich es mir vorgestellt habe. Allerdings fliegt mir das Bild bei der Angabe von position:absolute aus der Tabelle raus. Wie kriege ich es hin, dass sich meine absolute Positionierung für die Bilder auf die Tabellenzelle (statt auf die Seite) bezieht? Oder geht das so nicht?
Ein mit absoluter Positionierung ausgerichtetes Element richtet sich an dem ersten Vorfahrenselement aus, dessen Positionierung von "static" abweicht.
Da das bei Tabellenzellen nicht der Fall ist, musst du zunächst erst einmal die Voraussetzungen schaffen, indem du z.B. ein relativ-positioniertes DIV hineinsezt. Dessen Kindelemente lassen sich daran dann mit absoluter Positionierung ausrichten.
Gruß Gernot