Problem mit Table und Div

[trisomie]

Hallo Leute,

ich arbeite zur Zeit noch mehr mit Tables und noch nicht all zuviel mit Divs daher habe ich nun ein Problem das ich bisher leidern noch nicht lösen konnte. Ich hoffe jemand von euch hat einen Vorschlag.
Nun einmal zum Problem:

Ich habe eine Table Struktur... ein Auschnitt z.B.
...
<td>
Akkulaufzeit
<a href="#" onmouseover"" onmouseout""><img src="..." border="0"></a>
<div><div id="info">Dies ist die Info</div></div>
</td>

Das Problem an meinem skizzierten Beispiel ist, dass er sobald ich ein Div Tag einfüge, die Zeile ab dem Div Tag nach unten zieht. D.h. er nimmt anscheinend als Eltern Element die gesamte <td>. Wie kann ich es hinbekommen, dass er als Ausrichtungspunkt das <img> nimmt und sich nicht immer an der gesamten <td> orientiert. Wenn ich den Div Tag vor das <img> setze zieht er es immer eine Zeile runter, es soll aber mit dem Text "Akkulaufzeit" in einer Zeile stehen.

Ich hoffe ich konnte mein Problem ein bisschen veranschaulichen, sonst probiere ich es gerne zu konkretisieren.

Vielen Dank schonmal für Eure Mühe!

 

[dkdenz]

Hallo!
1. verstehe ich nicht, warum Du dazu zwei div's nimmst.
2. ist ein div ein block-Element. Man könnte schreiben: <div style="display:inline"></div>
3. wäre ein span das was Du verwenden solltest, da dies ein inline-Element ist.

<td>
Akkulaufzeit
<a href="#" onmouseover"" onmouseout""><img src="..." border="0"></a>
<span id="info">Dies ist die Info</span>
</td>

Dies aber erstmal ungetestet.
Falls was nicht klappt, nochma melden.
Am besten mit einem Link...

 

[trisomie]

Hallo Danke für Deine schnelle Antwort!

Ich habe nun zum Glück eine andere Methode gefunden um diesen "Tooltip" umzusetzen. Mit Javascript besteht eh das Problem, dass es evtl. deaktiviert sein könnte beim User.

Es gibt eine Möglichkeit dieses via CSS zu lösen mit einem Hover, ist sehr einfach sieht super aus und läuft auf, ich denke allen Browsern und es wird kein JS benötigt.

Aber trotzdem vielen Dank für Deinen Tipp!

Ps. Hier trotzdem mal für jemanden den es interessiert die Umsetzung in Css.

<!-- Text in der Html Datei
<a href="#" class="tt"><img src="Bild" border="0" align="absmiddle"><span>Hinweistext</span></a>
-->
<!-- Inhalt der Css Datei
a.tt { position: relative; z-index : 24; color : #000; text-decoration: none;}
a.tt:hover { z-index: 25; background-color: #A49D6C; text-decoration : none; }
a.tt span { display: none }
a.tt:hover span { display: block; position: absolute; top: 10px; left: 15px; width: 17em; border: 1px solid #417290; background-color: #417290; color: #FFFFFF; font-family: Arial; text-align: left; text-decoration: none;}
-->

Vielen Grüße
Triso