"anklickbare Karte" auf a/hover/span-Basis: Z-index-Problem (?)
Nicola
- css
Hallihallo!
Hier bei Euch habe ich etwas gelernt, was ich gern für
Kartenübersichten nutze, um dort bei Mouseover Sehenswertes
einzublenden.
Ich nutze lege dazu die Karte als Hintergrund-Bild
in die Seite und lassen die Links darüber "malen"
und bei hover per span ein Infokästchen aufblenden.
Das klappt sehr schön und ich finde es elegant ;-)
Nun habe ich aber ein 'gewachsenes' Problem:
http://www.holzroute.de/karte-region.php?region=koelnbonn
Bei "alten" Standorten, z.B. dem gelben Kästchen
in Köln direkt über 'ln' von Köln) treten die
anderen Link-Kästchen _IM IE7_ nicht in den Hinter-
grund, wenn das hover-span aufgeht, sondern leuchten
hindurch. Das ist leider wenig elegant ;-((
Ich habe versuchsweise z-index (10 bei div#Karte a vs. 2000
bei a:hover span) gesetzt, aber ohne sichtbare positive
Wirkung. Zudem stehen die ganzen hover-spans im
Quelltext doch eh weit hinter den Link-DIVs...(???)
(Der Firefox scheint das auch so zu verstehen und malt
die hover-spans _über_ die Kästchen.)
Vielen Dank für Euren Input!
Nicola
PS: Zusatzfrage: Ich habe mittlerweile mehrere Standorte,
die dich liegen, dass ich sie zusammenfassen musste, damit
sie noch anklickbar sind. Dann aber gibt es natürlich nur
EINEN Link, so dass die zusammengefassten Standorte nicht
alle erreichbar sind. Gibt es dafür eine Lösung? Mir
fällt leider keine vernünftige Lösung ein. (Außer vielleicht,
bei den hinterlegten Standort-Koordinaten zu "tricksen",
aber dann stimmen auch die Entfernungsberechnungen nicht
etc... *seuftz*
Wenn Du das übergeordnete Element mit einem z-index versehen hast, gilt der auch für untergeordnete Elemente. Der 2000er z-index für die Spans kann damit nicht mehr funktionieren. Du wirst Dein HTML-Layout umstellen müssen.
Gruß, LX
Wenn Du das übergeordnete Element mit einem z-index versehen hast, gilt der auch für untergeordnete Elemente. Der 2000er z-index für die Spans kann damit nicht mehr funktionieren.
Eigentlich habe ich gar keine z-indices vergeben (die testweise eingefügten habe ich wieder rausgenommen). Der Firefox macht es ja auch "für mich logisch nachvollziehbar" - nur der IE nicht. Warum stuft er die weiter oben definierten "Kästchen" höher ein, als die weiter unten definierten spans?
Du wirst Dein HTML-Layout umstellen müssen.
Wie würde es denn gehen, so dass es auch der IE richtig macht?
Herzliche Grüße
Nicola
Der Firefox macht es ja auch "für mich logisch nachvollziehbar" - nur der IE nicht. Warum stuft er die weiter oben definierten "Kästchen" höher ein, als die weiter unten definierten spans?
z-index-kurzfassung:
kinder liegen immer über ihren eltern
folgende geschwister ohne z-index liegen immer über den vorhergehenden
z-index gilt in jedem ast unabhängig - sprich es ist kein absoluter zahlwert, ein größerer z-index heisst nicht, dass das element automatisch über jenen mit kleinerem wert liegt
hierbei verhalten sich im standardkonformen modus alle browser gleich
allerdings gibts ein paar ie bugs, bei denen absolut positionierte elemente verschwinden, wenn sie an floatende elemente angrenzen
z-index-kurzfassung:
kinder liegen immer über ihren eltern
folgende geschwister ohne z-index liegen immer über den vorhergehenden
Okidoki. So hatte ich das auch verstanden.
Dann muesste doch der IE das so sehen, wie
auch der FF??
z-index gilt in jedem ast unabhängig - sprich es ist kein absoluter zahlwert, ein größerer z-index heisst nicht, dass das element automatisch über jenen mit kleinerem wert liegt
Also ich vergebe selbst ja keine z-indices, sondern
dachte bisher, dass es sich allein 'regelt'. Soviel
vorweg (hatte es nur mal getestet, welche zu setzen).
Ich glaube, Du legst dem Ast-Hinweis den Finger in
die Wunde...
WAS genau ist denn ein Ast?
Sind alle 'div#Karte a's ein Ast und die 'a:hover span's
ein anderer?
Oder ist jeder einzelne div#Karte a _zusammen_ mit seinem
span ein Ast?
http://www.holzroute.de/karte-region.php?region=koelnbonn
hierbei verhalten sich im standardkonformen modus alle browser gleich
Offensichtlich nicht. Denn der FF macht es in meinem
Sinne, der IE anders. Und ich habe mich sehr bemueht,
den IE NICHT quirksen zu lassen ;-)
allerdings gibts ein paar ie bugs, bei denen absolut positionierte elemente verschwinden, wenn sie an floatende elemente angrenzen
Das ist es nicht - ich wünschte ja, die Boxen würden
verschwinden bei hover-span-Aktivität "darüber". Aber
sie gucken penetrant hindurch!
Ich kann doch nicht extra ein Skript erstellen, das
die Standorte von West nach Ost sortiert und dann in
eine 'passende' Reihenfolge in den Seitentext
stellt...! Gibt es keine andere Lösung, den IE dazu
zu überreden, es dem FF nachzutun?
Herzliche Grüße und Dank für die versuchte Hilfestellung
Nicola