Tooltip/Infobox per CSS - Brett vorm Kopf?

[Der Martin]

Hallo,

ich vermute, ich komme hier mit einem ganz einfachen Problem an, ich sehe nur den Knackpunkt nicht.  :~|

Ich möchte ein Tooltip (aka Infobox) einbauen, das nur auf CSS beruht. Ich baue auf dem Grundkonzept von Ingo Turski auf und habe ein bisschen daran rumprobiert.
Jetzt möchte ich die Infobox abslout positionieren, und zwar so, dass sie teilweise aus dem DIV, in dem sie letztendlich steckt, herausragt (CSS-Baum: DIV P A SPAN).
Die Positionierung hab ich hinbekommen, aber jetzt hab ich noch ein Problem mit dem z-Index. Die Infobox überlagert zwar das DIV, in dem sie eingebettet ist, liegt jedoch HINTER dem benachbarten DIV, das eigentlich hierarchisch auf gleicher Stufe liegt. IE 5.5 und Firebird 0.9.3 sind sich in der Darstellung einig, Opera 7.23 macht's dagegen so, wie ich es eigentlich meine: Die Infobox liegt auf oberster Ebene.
Zu bewundern unter http://do4fun.homeip.net/blue.confidence.htm, die Begriffe "IP-Adresse" und "Referer" im Fließtext sind mit Tooltips bestückt.

Wäre schön, wenn mir jemand einen guten Tip geben könnte...
Schönen Sonntag noch,

Martin

[Der Martin]

Hi, Jungs und Mädels,

eine vernünftige Frage und innerhalb von 24h nicht eine einzige Antwort? Das ist ja ungewöhnlich.

Liegt es daran, dass an diesem Wochenende alle beim SELF-Treffen in Dresden waren und ergo etwas Besseres zu tun hatten, als Fragen im Forum zu beantworten? Das könnte ich verstehen - auch wenn dagegen spricht, dass sich viele von euch die verlinkte Beispielseite zumindest angesehen haben. Ja, ich habe eine Menge IEs, Operas und Geckos im Log gesehen (sogar 1ngo war da, wenn ich richtig gesehen hab), da hätte ich schon irgendwie mit einer Reaktion gerechnet.

Oder liegt es daran, dass meine Problemstellung so rätselhaft war, dass niemand eine Lösung weiß? Kann ich mir nicht vorstellen - und selbst wenn, irgendeinen allgemeingültigen Kommentar, eine Gegenfrage oder auch nur einen Klugscheißerspruch hätte ich trotzdem erwartet.

Seltsam.

In stiller Verblüffung,

Martin

[Ingo Turski]

Hi,

Ja, ich habe eine Menge IEs, Operas und Geckos im Log gesehen (sogar 1ngo war da, wenn ich richtig gesehen hab), da hätte ich schon irgendwie mit einer Reaktion gerechnet.

hast Du ;-)
Ich hatte aber nicht geantwortet, weil die Seite für einen schnellen Blick doch etwas komplex war und auch noch verschiedene Stylesheets eingebunden sind - alles nicht sehr problemlösungsfreundlich.

Nach einen Blick in die erste CSS-Datei kann ich auch keinen Grund für dieses Phänomen feststellen. Der z-index dürfte eigentlich keine Rolle spielen, da der span ohnehin später im Quelltext vorkommt und daher schon in den Vordergrund müßte.
Vielleicht probierst Du mal, die Positionierung bereits im span anzugeben und vielleicht hilft auch ein Wechsel über visibility anstatt display?

freundliche Grüße
Ingo

[Der Martin]

Hallo Ingo,

danke für das Lebenszeichen!

(sogar 1ngo war da, wenn ich richtig gesehen hab) ...
hast Du ;-)

Naja, dein User Agent ist ja auch eigenlich unverwechselbar - aber es hätte ja immer noch jemand anderes sein können. Zum Beispiel jemand, dem du mal einen PC eingerichtet hast. ;)

Ich hatte aber nicht geantwortet, weil die Seite für einen schnellen Blick doch etwas komplex war

Okay, das war ja auch nicht als Vorwurf gemeint!

und auch noch verschiedene Stylesheets eingebunden sind - alles nicht sehr problemlösungsfreundlich.

Wobei das zweite Stylesheet eigentlich nur die Farben und den Hintergrund "macht". Das können wir hier IMO ausklammern.

Nach einen Blick in die erste CSS-Datei kann ich auch keinen Grund für dieses Phänomen feststellen.

Das beruhigt mich schon mal ein bisschen. Denn vier Augen sehen ja auf jeden Fall mehr als zwei, und es ist eine bekannte Tatsache, dass man über selbstgeschriebene Fehler ohne weiteres (++n) mal hinweglesen kann, ohne sie zu bemerken.
Und wenn der Validator zufrieden ist, heißt das ja noch lange nicht, dass das Gebilde nicht doch einen Denkfehler enthalten könnte.

Der z-index dürfte eigentlich keine Rolle spielen, da der span ohnehin später im Quelltext vorkommt und daher schon in den Vordergrund müßte.

Eigentlich ja, aber da er das nicht richtig tut, habe ich versucht, mit dem z-Index nachzuhelfen - interessiert aber auch keinen.  :(

Vielleicht probierst Du mal, die Positionierung bereits im span anzugeben

Äh? Hmmm? Ach, du meinst, nicht erst im "hover"?
Nee, das macht die Sache sogar noch schlimmer, hab's gerade probiert. Im Moz/Firefox ändert sich nichts, aber der IE vergisst dann plötzlich, die Box auch wieder wegzunehmen, wenn ich die Maus wegziehe. Der Info-Text verschwindet, den leeren weißen Kasten lässt er allerdings stehen! Putzige Sache!

und vielleicht hilft auch ein Wechsel über visibility anstatt display?

Kann ich mir nicht vorstellen. Denn wenn ich bei Blocklevel-Elementen mit visibility arbeite (habe ich an anderer Stelle mal probiert), dann wird der Platz zur Anzeige des Elements trotzdem reserviert, auch wenn das Element selbst "hidden" ist. Und das SPAN muss ich hier ja zum Blocklevel erklären, da ich ihm sonst keine vernünftige Position und vor allem keine Größe (Breite) geben kann.

Wie im OP schon angedeutet: Solange sich alles in EINEM großen DIV-Container abspielt, ist die Welt in Ordnung. Schwierigkeiten gibt's ja nur mit dem benachbarten DIV.

Danke trotz allem für die Mühe und Ideen,

Martin

[Ingo Turski]

Hi,

und vielleicht hilft auch ein Wechsel über visibility anstatt display?

Kann ich mir nicht vorstellen. Denn wenn ich bei Blocklevel-Elementen mit visibility arbeite (habe ich an anderer Stelle mal probiert), dann wird der Platz zur Anzeige des Elements trotzdem reserviert, auch wenn das Element selbst "hidden" ist.

Dürfte aber eigentlich nicht passieren bei absoluter Positionierung dieses Elementes, da es ja aus dem Textfluß genommen ist. Vielleicht kombinierst Du auch mal visibility mit der Positionierungsangabe im SPAN (ohne :hover)?

freundliche Grüße
Ingo

[Detlef G.]

Hallo Martin

Wäre schön, wenn mir jemand einen guten Tip geben könnte...

gib der #navi mal z-index:-1;

Bitte frage mich aber nicht, warum dies nötig ist, warum ein z-index von 1
(was logisch wäre) nicht ausreicht, warum das (zumindest in meinen Browsern)
funktioniert.
Ich habe keine Erklärung dafür.

Auf Wiederlesen
Detlef

[Der Martin]

Hi Detlef,

danke für den Tip, das kommt der Sache schon ein kleines Stück näher.

gib der #navi mal z-index:-1;

Super, damit ist immerhin der MSIE befriedigt.
BTW, bist du derjenige, der sich heute vormittag gegen halb zwölf "probehalber" die komplette Site gerippt hat? ;))

Womit hast du dann getestet?
Mein Firefox 0.9.3 hat da nämlich eine neue Überraschung auf Lager. Er zeigt die komplette #navi dann nicht mehr an (was ja auch an sich logisch ist, sie liegt ja ihrem z-Index entsprechend jetzt *hinter* dem BODY).
Opera zeigt sich nach wie vor kooperativ, aber bei dem hat's ja von Anfang an funktioniert.

Also wie gesagt, die Richtung scheint gut zu sein, aber am Ziel bin ich damit noch nicht. Werde mal in der Richtung weiterforschen.

Bitte frage mich aber nicht, warum dies nötig ist, warum ein z-index von 1
(was logisch wäre) nicht ausreicht, warum das (zumindest in meinen Browsern)
funktioniert.
Ich habe keine Erklärung dafür.

Ich auch nicht. Trotzdem besten Dank,

Martin

[Detlef G.]

Hallo Martin,

BTW, bist du derjenige, der sich heute vormittag gegen halb zwölf "probehalber" die komplette Site gerippt hat? ;))

Ja, wenn keine offensichtlichen Fehler zu finden sind, kann ich so die
Probleme besser eingrenzen bzw. mögliche Lösungen testen.

Womit hast du dann getestet?

Mozilla 1.6, Firefox 0.8, Opera 7.23 und IE 6.0

Mein Firefox 0.9.3 hat da nämlich eine neue Überraschung auf Lager. Er zeigt die komplette #navi dann nicht mehr an (was ja auch an sich logisch ist, sie liegt ja ihrem z-Index entsprechend jetzt *hinter* dem BODY).

Für mich bestand die Überrachung eher darin, dass meine Browser das nicht
taten.

Also wie gesagt, die Richtung scheint gut zu sein, aber am Ziel bin ich damit noch nicht. Werde mal in der Richtung weiterforschen.

Auf Wiederlesen
Detlef

[Der Martin]

Guten Abend,

und erstmal herzlichen Dank allen, die sich meinetwegen den Kopf zerbrochen haben. Ich habe selbst noch weiter experimentiert, und ich habe jetzt eine Lösung. Die Erklärung kommt allerdings rein aus der Praxis: Es geht, aber keiner weiß, warum.  ;)

Im Urzustand hatte ich (stark abstrahiert) folgendes Gefüge:

<div id="navi">
 ...
 Navigation
 ...
</div>

<div id="content>
 ...
 Seiteninhalt mit einigen Tooltips
 ...
</div

Im Stylesheet hatte ich für #navi und für die Tooltips position:absolute notiert. Aber die #navi hat IMMER meine Tooltips überlagert; nicht mal mit dem z-index war da was zu machen (Detlef hatte einen Ansatz, danke, aber die Lösung war's nicht ganz).

Die Lösung ist jetzt ganz trivial: Ich notiere die beiden DIVs nicht nacheinander, sondern verschachtele sie ineinander:

<div id="content>
 <div id="navi">
  ...
  Navigation
  ...
 </div>

...
 Seiteninhalt mit einigen Tooltips
 ...
</div

Das funktioniert jetzt in MSIE 5.5, Firefox 0.9.3, und Opera 7.23 - und ich hoffe, es ist nicht auf diese Versionen beschränkt.

Jetzt wäre es nur noch interessant, warum (aus theoretischer Sicht) das so funktioniert und nicht anders.

Schönen Abend noch,

Martin