div-container in tabelle positionieren?

Status
Nicht offen für weitere Antworten.
Hallo.

Folgendes Problem:

Ich möchte 3 verschiedene Grafiken in einer Tabelle exakt an der gleichen Stelle positionieren. Mittels style="visibility:hidden bzw. visible" sollen die jeweils nicht benötigten Grafiken ausgeblendet werden.

Wenn ich mit <div style="position:absolute; top:xxx; left:xxx;"> arbeite, orientiert sich der Div container nicht an der Tabelle. Verwende ich "position:relative" orientiert sich die der erste Div-Container an der Tabelle, der zweite allerdings am ersten und nicht an der Tabelle.


<table width="500" border="1">
<tr>
<td width="300" height="300" align="left" valign="top">
<div id="1" style="position:relative; top:150; left:150;"><img src="test.jpg"></div>
<div id="2" style="position:relative; top:150; left:150;"><img src="test.jpg"></div>
<div id="3" style="position:relative; top:150; left:150;"><img src="test.jpg"></div>
</td>
</tr>
</table>


Bei diesem Beispiel hätte ich mir gewünscht, dass die Bilder exakt an der gleichen Stelle angezeigt werden. Wie kann ich das realisieren?

Wichtig ist mir, dass die Position, die ich dem Div-Container gebe, sich auf die linke obere Ecke der Tabellenzelle bezieht.

Für Hilfe wäre ich sehr dankbar!
 
Hat niemand Lust, mir zu helfen? Macht ja nix, wenn Ihr keine komplette Lösung parat habt, aber vielleicht könnt ihr mir ja den einen oder anderen Denkansatz geben...
 

Quaese

Moderator
Moderator
Hi,

zunächst solltest Du den gewünschten Inhalt in einen alles umfassenden
Container (DIV) packen. Diesem wird zur Positionierung die Eigenschaft
relative zugewiesen. Damit ist es möglich, die darin enthaltenen Elemente
an ihm auszurichten. Weiterhin kann über die CSS-Eigenschaften top und
left die Position innerhalb der Tabellenzelle bestimmt werden.
Die Bilder können anschliessend mittels absoluter Positionsangaben innerhalb
des Containers an die gewünschten Stellen gesetzt werden.

Code:
<table width="500" border="1">
    <tr>
        <td width="300" style="height: 300px" align="left" valign="top">
            <div style="position: relative; top: 0px; left: 0px; height: 100%;">
                <div id="1" style="position: absolute; top:150; left:150; visibility: visible;"><img src="test.jpg" width="120" height="121" border="0" alt=""></div>
                <div id="2" style="position: absolute; top:150; left:150; visibility: visible;"><img src="test.jpg" width="120" height="121" border="0" alt=""></div>
                <div id="3" style="position: absolute; top:150; left:150; visibility: visible;"><img src="test.jpg" width="120" height="121" border="0" alt=""></div>
            </div>
        </td>
    </tr>
</table>

Ich hoffe, das hilft Dir weiter ...

... ciao

Quaese
 
Ja, das hilft. So wie's aussieht, klappt das prima. Ich hoffe mal, dass es nicht nur im IE geht... Aber das muss ich noch testen.
Original geschrieben von Quaese
Hi,

zunächst solltest Du den gewünschten Inhalt in einen alles umfassenden
Container (DIV) packen. Diesem wird zur Positionierung die Eigenschaft
relative zugewiesen. Damit ist es möglich, die darin enthaltenen Elemente
an ihm auszurichten. Weiterhin kann über die CSS-Eigenschaften top und
left die Position innerhalb der Tabellenzelle bestimmt werden.
Die Bilder können anschliessend mittels absoluter Positionsangaben innerhalb
des Containers an die gewünschten Stellen gesetzt werden.

Code:
<table width="500" border="1">
    <tr>
        <td width="300" style="height: 300px" align="left" valign="top">
            <div style="position: relative; top: 0px; left: 0px; height: 100%;">
                <div id="1" style="position: absolute; top:150; left:150; visibility: visible;"><img src="test.jpg" width="120" height="121" border="0" alt=""></div>
                <div id="2" style="position: absolute; top:150; left:150; visibility: visible;"><img src="test.jpg" width="120" height="121" border="0" alt=""></div>
                <div id="3" style="position: absolute; top:150; left:150; visibility: visible;"><img src="test.jpg" width="120" height="121" border="0" alt=""></div>
            </div>
        </td>
    </tr>
</table>


Ich hoffe, das hilft Dir weiter ...

... ciao

Quaese
 
Status
Nicht offen für weitere Antworten.