Problem mit drei div-layern übereinander und mouseover

[garby]

Hallo,

ich bin dabei ein Menue mit css zu basteln, bei dem drei div-layer übereinander liegen. Im untersten Layer steht ein Text. Darüber liegt ein Bild. Und darüber ein Linkname.
Wenn nun mit der Maus über diese layer gefahren wird. Soll das Bild transparent werden und der Text in den Vordergrund kommen.

Hier ein Beispiel

Das funktioniert auch alles wunderbar, allerdings nur im IE. Schön wäre es wenn es zumindest auch im Firefox laufen würde.
Hat jemand eine Idee warum es dort nicht funktioniert?

Viele Grüße,

Michael

[pekka]

Mmm was passiert wenn Du den Links ein Ziel gibst? (z.B. #)

[garby]

nein, das ändert leider auch nichts...

[Kropff]

du weisst, das die benutzung von "filter" ie only ist?

gruß
peter

[pekka]

Mmm, er hat ja auch opacity und -moz-opacity drin, daran kanns eigentlich nicht liegen....

[Kropff]

stimmt, übersehen. es liegt daran, dass der folgende bereich komplett über den bildern liegt:

<!-- Linkbeschreibungen zu den Bildern -->
<div style="position: absolute; top: 100px; left: 350px; width: 460px; border: 1px solid #f00;">
<div id="link">...
</div> 

habe eine border zur veranschaulichung gesetzt. da kann das mit dem hovern nicht funktionieren. wenn der bereich weg ist, funktioniert es auch im ff.

gruß
peter

[garby]

Danke für Eure Antworten,

aber kann man das denn nicht irgendwie hinbekommen? Auch mit drei divs übereinander? Die Linkbeschriebung sollte nämlich schon drin bleiben. Im IE funktioniert es ja mit dem hovern trotz dem die Linkbeschreibung über allem liegt. Kann man da nichts für den ff tricksen?

Viele Grüße,

Michael

[pekka]

z-index?

[garby]

nutze ich ja schon, aber das funktioniert im ff irgendwie nicht...

[Kropff]

pach den linktext und das bild in ein element.

gruß
peter

[garby]

Das war schon mal eine sehr gute Idee! Im Ansatz geht es jetzt schon mal...
Vielen Dank!
Nun ist sind allerdings die Linknamen nicht mehr im Vordergrund und um eine Zeile nach unten verschoben. Ich bekomme es irgendwie nicht hin das die dort liegen wo sie hinsollen. Habt Ihr hierzu vielleicht auch noch eine Idee?

Viele Grüße,

Michael

[Kropff]

nicht mit div-suppe arbeiten, sondern z.b. mit <p> und das entsprechend formatieren.

gruß
peter

[garby]

Hmm, ich habe jetzt mit span und p gearbeitet. Aber wie formatiere ich es so, dass die Linkbeschriebung im Vordergrund ist und richtig ausgerichtet?

Link

[garby]

Ich bin jetzt noch mal ein wenig weiter gekommen. Die Linkbeschreibung liegt nun über dem Bild, aber leider immer noch um eine Zeile nach untern verschoben.

siehe hier

Sieht jemand woran das liegt? Ich kann es mir nicht erklären...

[Kropff]

<span id="bild">...<p id="link_name">...</p></span>

du darfst ein block-element (p) nicht in ein inline-element packen. des weiteren darf eine id pro seite nur einmal(!) vorkommen.setz mal <p class="bild"> und <span class="link_name"> und spiel ein wenig herum.

gruß
peter