PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   Problem mit drei div-layern übereinander und mouseover (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/78459-problem-mit-drei-div-layern-uebereinander-und-mouseover.html)

garby 25-11-2006 11:26

Problem mit drei div-layern übereinander und mouseover
 
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 25-11-2006 14:22

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

garby 26-11-2006 08:57

nein, das ändert leider auch nichts...

Kropff 26-11-2006 17:02

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

gruß
peter

pekka 26-11-2006 17:04

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

Kropff 26-11-2006 17:13

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

<!-- 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 26-11-2006 21:40

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 26-11-2006 21:52

z-index?

garby 26-11-2006 22:46

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

Kropff 27-11-2006 11:47

pach den linktext und das bild in ein element.

gruß
peter

garby 27-11-2006 19:52

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 27-11-2006 21:00

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

gruß
peter

garby 28-11-2006 19:27

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 29-11-2006 12:58

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 29-11-2006 13:23

Zitat:

<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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:06 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG