Infobox will nicht

[Eric Teubert]

Hallo zusammen!

Also ich wollte eine Infobox ( Maus über Element -> Infobox ) ohne JS umsetzen und habe dazu auch etwas gefunden. Jetzt funktioniert das ganze aber nicht so, wie ich das will.
Also erstmal die entsprechenden Codeteile:

<td class="char">
   <div id="box">
    <a href="#">
     <?echo $var1;?>
     <span><?echo"text".$var2;?></span>
    </a>
   </div>
  </td>

Und dazugehörig der CSS-Teil:

#box a
{
 color:#FFA35F;
 font:normal 14px;
 text-decoration:none;
 display:block;
 padding:5px;
 text-align:center
}

#box a span
{
 display:none
}

#box a:hover
{
 color:#E03030;
 background:()
}

#box a:hover span
{
 position:absolute;
 top:15px;
 left:375px;
 display:block;
 color:#FFA35F;
 background:#000000;
 width:200px;
 font:normal 10px;
 border:1px solid #E03030;
 padding:3px
}

Das Textelement, das "gehovert" ( Wie kann man das anders ausdrücken? Ist ja ein schrecklicher Begriff .... ) werden soll, befindet sich also in einer Tabellenzelle, die sich wiederum in einer mit position:absolute ausgerichteten Tabelle befindet.
Mein Problem dabei ist, dass das "Hoverelement" mittig in der Zelle erscheinen soll, jedoch - egal, was ich versuche - immer unten rechts in der Ecke steht ( Firefox ). Im IE wird das Element sogar neben der Tabelle dargestellt ...

Hoffe, ihr könnt mir helfen

Eric

PS: Achja, nich dass sich jemand über "background:()" wundert - das benutz ich, da dem Element übergeordnet ein Hintergrundbild zugewiesen wird, ich dort aber keines benötige. Eine andere unkomplizierte Variante ist mir nicht eingefallen.

[Mirko42]

Hi Du,

ehrlich gesagt, hab' ich mir Deinen Source nur flüchtig angeguckt, und eigentlich mag' ich solche Antworten, wie ich sie jetzt gebe, sonst auch nicht, aber:

Mach es lieber anders. Deine Implementation scheint mir ziemlich unelegant und semantisch gesehen eine ziemliche Vergewaltigung der Elemente.

Ganz simpel: Gib' Deinem Element einen title-Parameter, z.B.:

<span title="Das ist der Hover-Text">Huhu</span>

Das funktioniert prima (soll heißen: die meisten Browser sollten das von Dir gewünschte tun - einen Tooltip anzeigen) und ist 1a-HTML (behaupte ich mal ganz großspurig ;).

Grüße,

Mirko

[MudGuard]

Hi,

background:()
PS: Achja, nich dass sich jemand über "background:()" wundert - das benutz ich, da dem Element übergeordnet ein Hintergrundbild zugewiesen wird, ich dort aber keines benötige. Eine andere unkomplizierte Variante ist mir nicht eingefallen.

Das naheliegende ist, den Wert none für's background-image zu verwenden, wie es der Standard vorsieht.

cu,
Andreas