nicht angemeldet
<div>s in Tabellenzellen
Hallo zusammen.
Ich bräuchte einen kleinen Trick/Tipp wie ich mehrere <div> in einer <td> so anordnen kann, dass diese sich überlagern, ohne dass die Zelle gleich lang bleibt, so als ob alle <div> untereinander stehen.
Folgendes Beispiel (habe nicht alle Attribute hier notiert):
<table width="100%">
<tr>
<td>
<table width="500">
<tr>
<td>
<div style="position:relative; top:0px; left:0px; z-index:1; width:500; height:40;>
<img src="pics/a.gif" width="500" height="40" />
</div>
<div style="position:relative; top:0px; left:200px; z-index:2; width:300; height:60;>
<img src="pics/b.gif" width="300" height="60" />
</div>
<div style="position:relative; top:0px; left:180px; z-index:3; width:50; height:50;>
<img src="pics/c.gif" width="50" height="50" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Mir ist klar, dass, wenn ich position:absolute setze, sich die <div> bei Veränderung der Größe des Browserfensters an der falschen Stelle befinden.
Wenn wie im Beispiel bei allen <div> top:0px gesetzt ist, sitzen alle <div> direkt untereinander und vergrößern die Tabellenzelle nach unten, obwohl ich auch jeweils einen z-index gesetzt habe.
Setze ich jetzt bei <div>(2,3) für top negative Werte ein, werden das 2. bzw. 3. <div> zwar nach oben versetzt, aber die Tabellenzelle bleibt so lang, wie wenn die <div> untereinander sitzen.
Sicher könnte ich auch beide Tabellen weglassen und per Javascript die verfügbare Browserfensterbreite ermitteln und somit die Mitte des Fensters ausrechnen und daran die <div> positionieren.
Das wäre die letzte möglichkeit, die mir noch einfällt.
Lieber wäre mir aber, wenn das ganze oben lösbar wäre.
Ich hoffe ich konnte das Problem einigermaßen verständlich erklären.
Vielen Dank schon mal :)
FoSsi
-
Ich bräuchte einen kleinen Trick/Tipp wie ich mehrere <div> in einer <td> so anordnen kann, dass diese sich überlagern, ohne dass die Zelle gleich lang bleibt, so als ob alle <div> untereinander stehen.
Setze ich jetzt bei <div>(2,3) für top negative Werte ein, werden das 2. bzw. 3. <div> zwar nach oben versetzt, aber die Tabellenzelle bleibt so lang, wie wenn die <div> untereinander sitzen.
Vielleicht sowas !?
<table width="500" border="1" style="margin-bottom:-30px">
Helau !!