Tooltips auch für untergeordnete Ebenen?

B

Braver Willy

Grünschnabel
Hej ihr,

ich bin auf ein kleines Problem gestossen, an das ich vorher nicht gedacht hatte. Ich lass auf meiner Seite aus einer Datenbank immer den letzten und nächsten Termin (inklusive verschiedener andere Daten) auslesen und anzeigen. Jetzt kam ich aus Platzgründen auf die "clevere" Idee, die Infos in zwei beinahe identische Div-Conatainer zu packen und die dann per z-index übereinaner zu legen. Ein Umschalten zwischen beiden sollte dann per javascript und display: none/block passieren. Funktioniert auch alles wunderbar, nur habe ich nicht dran gedacht bzw. wusste nicht, dass der oben liegende div Container auf display: none gestellt im Firefox offensichtlich trotzdem den darunter liegenden überlagert (im IE ist das nicht so, aber ich denke, dass hat eher mit einer fehlerhaften Umsetzung vom IE zu tun). Da ich sowohl den Umschaltbutton als auch einige tooltipps im div container drin habe und die deshalb nicht reagieren, habe ich jetzt ein Problem.

Hat irgend jemand eine Lösung dafür bzw. einen eleganten workaround? Ich würde an der grundsätzlichen Struktur nur ungerne was ändern, weil alles so schön passt. :) Ich habe jetzt mal keine Code hingeschrieben, weil das ja eigentlich schon alles funktioniert wie es soll. Kann den natürlich gerne nachreichen.

P.S.: Ich war mir nicht ganz sicher, ob das in javascript, css oder sonstewo gehört. Bitte gegebenenfalls verschieben. Danke.
 
Hi,

kannst du mal deinen bisherigen Quellcode zeigen, oder einen Link zu deiner Seite nennen?

Mit diesem vereinfacht reproduzierten Testdokument kann ich keine derartigen Probleme im Firefox (2 + 3) feststellen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Braver Willy</title>

<style type="text/css">
<!--
#box1 {
position:absolute;
left:50px;
top:50px;
width:200px;
height:200px;
z-index:1;
background:#eee;
}
#box1 .tooltip {
display:none;
}
#box1:hover .tooltip {
display:block;
}
#box2 {
position:absolute;
left:50px;
top:50px;
width:200px;
height:200px;
z-index:2;
background:#ccc;
display:none;
}
-->
</style>

</head>
<body>

<div id="box1">box1<div class="tooltip">Tooltip mit weiteren Infos zur box1</div></div>
<div id="box2">box2</div>

</body>
</html>
mfg Maik
 
Klar, gerne. Meine javascriptkenntnisse gehen nicht weit über selfhtml hinaus. Der javascript-code (aus einem Tutorial nachgebaut) ist

Code: 
<script type="text/javascript">
function toggledisplay (id){
  if (document.getElementById) {
    var mydiv = document.getElementById(id);
    mydiv.style.display = (mydiv.style.display=='none'?'block':'none');
  }
}
</script>

Und für die Tooltipps nutz ich das Script von Walter Zorn. Im <body>-bereicht kommt dann

Code: 
<div id="test" style="top: 200px; left: 50px; z-index: 2; position: absolute;">
		<div id="last" style="background-image:url(images/hintergrund/last_liga.gif);height:180px;">
				<img class="bildfloat" src="images/rechts/logos/bbh.jpg" height="36" width="57" name="heim" style="padding-top: 61px;padding-left:37px;" onmouseover="Tip('Berlin Bravehearts')" onmouseout="UnTip()">
				<img class="bildfloat" src="images/rechts/logos/rd.jpg" name="gast" height="36" width="57" style="padding-top: 61px;padding-left:36px;" onmouseover="Tip('Red Devils')" onmouseout="UnTip()">
				<img class="bildfloat" src="images/rechts/score/1.gif" name="ergebnis_heim" width="46" height="22" style="padding-left:35px;">
				<img class="bildfloat" src="images/rechts/score/6.gif" name="ergebnis_gast" width="46" height="22" style="padding-left:50px;">
				<div style="position: absolute; top: 92px; left: 68px; width:85px;height:22px;font-size:10px;font-weight:bold;" align="center">-<br>(&nbsp;0:2;1:3;0:2&nbsp;)</div>

			<div id="game_button"><img src="images/schaft.gif" height="34" width="15" align="left"><img src="images/buttons/next.gif" width="170" height="34" name="next" alt="Nächstes Spiel" onMouseOver="document.next.src='images/buttons/next_o.gif';" onMouseOut="document.next.src='images/buttons/next.gif';" onClick="javascript:toggledisplay('last'); return false" border="0" style="position: absolute; margin-left: 10px;"></div>
		</div>
</div>
<div id="test" style="top: 200px; left: 50px; z-index: 1; position: absolute;">
		<div id="next" style="background-image:url(images/hintergrund/next_liga.gif); height:180px;">
				<img class="bildfloat" src="images/rechts/logos/bbh.jpg" height="36" width="57" name="heim" style="padding-top: 61px;padding-left:37px;" onmouseover="Tip('Berlin Bravehearts')" onmouseout="UnTip()">
				<img class="bildfloat" src="images/rechts/logos/nix.jpg" name="gast" height="36" width="57" style="padding-top: 61px;padding-left:36px;" onmouseover="Tip('noch unbekannt')" onmouseout="UnTip()">
				<img class="bildfloat" src="images/rechts/score/x.gif" name="ergebnis_heim" width="46" height="22" style="padding-left:35px;">
				<div style="position: absolute; top: 97px; left: 69px; width:80px;height:22px;background-color:#004276;display:block;" align="center" name="info"><img src="images/info.jpg" height="20" width="20" onmouseover="Tip('<b>Wann?</b> 00.00.0000 <br><b>Wo?</b> noch unbekannt <br><b>Beginn</b>: ?')" onmouseout="UnTip()"></div>
				<img class="bildfloat" src="images/rechts/score/x.gif" name="ergebnis_gast" width="46" height="22" style="padding-left:50px;">

			<div id="game_button"><img src="images/schaft.gif" height="34" width="15" align="left"><img src="images/buttons/last.gif" width="170" height="34" name="last" alt="letztes Spiel" border="0" onMouseOver="document.last.src='images/buttons/last_o.gif';" onMouseOut="document.last.src='images/buttons/last.gif';" onClick="javascript:toggledisplay('last'); return false" style="position: absolute; margin-left: 10px;"></div>
		</div>
</div>

Anzusehen ist das ganze zurzeit hier: http://berlinbravehearts.de/V3b/css/test.php
 
Was in deinem Code-Snippet schon mal auffällt, sind die doppelt vergebenen ID-Bezeichner #text und #game_button, denn IDs dürfen im HTML-Dokumentbaum nur einmal existieren.

mfg Maik
 
Danke Maik. Habs rausgenommen, aber daran hats ja nicht gelegen. Weil dein Probecode da oben aber funktioniert, kann es ja nicht an der display: none Eigenschaft per se liegen. Hat jemand eine Idee, woran das liegen könnte?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück