nicht angemeldet
Z-Index bei CSS-Tooltip funzt nicht
hallo!
folgendes funktioniert bei mir nicht und ich finde den fehler nicht:
---------------------------------------
<STYLE type=text/css>
DIV#link {Z-INDEX: 1; POSITION: relative}
DIV#link A {DISPLAY: block; TEXT-DECORATION: none}
DIV#link A:hover {BACKGROUND:}
DIV#link A PRE {DISPLAY: none}
DIV#link A:hover PRE {
POSITION: absolute; Z-INDEX: 5; DISPLAY: block;
LEFT: 10px; PADDING: 3px; MARGIN: 0px;
BORDER: #000000 1px solid; BACKGROUND: #ffffcc;
COLOR:black;
TEXT-DECORATION: none }
</STYLE>
<DIV id=link><A href="#">Text Text Text<PRE>tooltip
1
2
3</PRE></A></DIV> <br>
<DIV id=link><A href="#">Text Text Text<PRE>tooltip
1
2
3</PRE></A></DIV>
--------------------------------------------------
der text des zweiten links scheint durch den tooltip des ersten links durch.
was ist da falsch?
-
Hi,
DIV#link A:hover {BACKGROUND:}
das ist falsch.
<DIV id=link><A href="#">Text Text Text<PRE>tooltip
<DIV id=link><A href="#">Text Text Text<PRE>tooltipdas ist falsch. Die id 'link' wurde bereits verwendet.
Identifizierer dürfen pro Dokument höchstens einmal verwendet werden.cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
oops, thx!
dann muss ich mir wohl was anderes einfallen lassen ...
-
-
Hallo,
folgendes funktioniert bei mir nicht und ich finde den fehler nicht:
<STYLE type=text/css>
DIV#link {Z-INDEX: 1; POSITION: relative}
DIV#link A {DISPLAY: block; TEXT-DECORATION: none}
DIV#link A:hover {BACKGROUND:}
DIV#link A PRE {DISPLAY: none}
DIV#link A:hover PRE {
POSITION: absolute; Z-INDEX: 5; DISPLAY: block;
LEFT: 10px; PADDING: 3px; MARGIN: 0px;
BORDER: #000000 1px solid; BACKGROUND: #ffffcc;
COLOR:black;
TEXT-DECORATION: none }
</STYLE>
<DIV id=link><A href="#">Text Text Text<PRE>tooltip
1
2
3</PRE></A></DIV> <br>
<DIV id=link><A href="#">Text Text Text<PRE>tooltip
1
2
3</PRE></A></DIV>der text des zweiten links scheint durch den tooltip des ersten links durch.
was ist da falsch?1. PRE ist kein inline-Element. Das A-Element darf aber nur inline-Elemente, außer A, enthalten. Hier kannst Du SPAN verwenden.
2. Statt der ID verwende Klassen. Diese sind extra dafür da, mehrfach verwendet zu werden. IDs müssen im gesamten Dokument _eindeutig_ sein.
3. Zum "Anschubsen" des IE bei a:hover [Element] musst Du eine vollständiges CSS-Statement für a:hover finden.
4. Wie Du siehst, verhält sich z-index nur innerhalb _einer_ Gruppe ineinander verschachtelter Elemente wie gewünscht. Als einzige Lösung habe ich die Möglichkeit gefunden, das Element, an dem sich die Tooltips ausrichten, zusätzlich um alles zu legen. Wobei ich mir nicht sicher bin, ob das Ergebnis nicht nur wegen der Fehlerkorrekturen der Browser richtig erscheint. Sorgen macht mir die Frage, wo und wie die Top-Werte der Tooltips definiert werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tooltip</title>
<style type="text/css">
div.pos {position:relative;}
div.link a {display:block; text-decoration:none;}
div.link a:hover {background-color:white;}
div.link a span {display:none;}
div.link a:hover span {position:absolute; display:block; left:10px; padding:3px; margin:0px; border:#000 1px solid; background-color:#ffc; color:black; text-decoration:none;}
</style>
</head>
<body>
<div class="pos">
<div class="link"><a href="#">Text Text Text<span>tooltip<br>
1<br>
2<br>
3<br></span></a></div>
<br>
<div class="link"><a href="#">Text Text Text<span>tooltip<br>
1<br>
2<br>
3<br></span></a></div>
</div>
</body>
</html>viele Grüße
Axel