Infobox

[Eric Teubert]

Huhu,

Hab mich dann mal an die Infoboxes gewagt.
http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm

Funktioniert auch alles ganz gut, hab es etwas abgewandelt, nur habe ich ein Problem ...
Ich habe diese Infobox nun in ein <th> einer Tabelle gepackt und arbeite statt mir position:absolute mit position:relative.

Wenn ich jetzt allerdings über das Hoverelement gehe, wird das gesamte <th> verzerrt. Woran kann das liegen, bzw. wie kann ich das umgehen? ( ich würde gerne position:relative beibehalten )

Hier der Code:

#box a {
color:#FFA35F;
font:bold 12px verdana, sans-serif;
text-decoration:none;
display:block;
padding:0px;
}

#box a:hover {
color:#FFA35F;
}

#box a span {display:none;}

#box a:hover span {
position:relative; left:30px; top:30px; z-index:300;
display:block;
color:#FFA35F;
background:#000000;
font:normal 13px arial, sans-serif;
border:1px solid #E03030;
padding:3px;}

und html:

<th class="char" colspan="2">
   <div id="box"><a href="#">Übersicht<span>Lorem ipsum dolor sit amet.</span></a></div>
  </th>

[MudGuard]

Hi,

Funktioniert auch alles ganz gut, hab es etwas abgewandelt, nur habe ich ein Problem ...
Ich habe diese Infobox nun in ein <th> einer Tabelle gepackt und arbeite statt mir position:absolute mit position:relative.

Wenn ich jetzt allerdings über das Hoverelement gehe, wird das gesamte <th> verzerrt. Woran kann das liegen, bzw. wie kann ich das umgehen? ( ich würde gerne position:relative beibehalten )

Elemente, die relativ positioniert werden, beeinflussen im Gegensatz zu absolut positionierten Elementen die Größe ihres Elternelements.
Was Du eigentlich haben willst:
position:relative fürs Elternelement, position:absolute für die Infobox.

cu,
Andreas

[Orlando]

Hi Eric,

http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm

Funktioniert auch alles ganz gut, hab es etwas abgewandelt, nur habe ich ein Problem ...
Ich habe diese Infobox nun in ein <th> einer Tabelle gepackt und arbeite statt mir position:absolute mit position:relative. Wenn ich jetzt allerdings über das Hoverelement gehe, wird das gesamte <th> verzerrt.

das ist korrekt, da „relative” das Element nicht aus dem Fluss nimmt, wie es „absolute” tut. Das heißt, dessen Darstellung wirkt sich auf die umgebenden Elemente aus. Ein (Eltern-)Element ist ohne anderweitige Definitionen mindestens so groß wie sein Inhalt.

Woran kann das liegen, bzw. wie kann ich das umgehen? ( ich würde gerne position:relative beibehalten )

Wenn du display:block/none durch visibility:visible/hidden ersetzt, sollte es zu keinen Zuckungen kommen. Alternativ kannst du dem Elternelement eine Größe zuweisen, in die die Einblendung vollständig passt. margin statt position:relative wäre noch eine zusätzliche Möglichkeit.

Grüße,
 Roland

[Eric Teubert]

Wenn du display:block/none durch visibility:visible/hidden ersetzt, sollte es zu keinen Zuckungen kommen. Alternativ kannst du dem Elternelement eine Größe zuweisen, in die die Einblendung vollständig passt. margin statt position:relative wäre noch eine zusätzliche Möglichkeit.

Hm, bei visibility ist das Problem, dass der Platzt dann ja trotzdem schon belegt ist, auch wenn es noch garnicht angezeigt wird.
Das größte Problem meiner Meinung nach ist der IE. In z.B. Mozilla kann man an jedes mögliche Element :hover dranhängen, IE kann das nur bei "a".
Naja, ich mach es nun doch über position:absolute, da geht's.

mfg

Eric