Problème de superposition de div

Bonjour,

Je galère avec un menu déroulant et une galerie photo.
Le menu déroulant est fait avec une liste li/ul couplée à jquery pour les effets.
Le menu déroulant doit se trouver au dessus de la galerie photo.
Voici un exemple : http://www.varinard.com/catalogue/mat/portematdefacade.htm (avec IE, il faut réduire un peu l'écran. Ca se voit directement avec Firefox).

J'ai essayé de modifier les z-index dans ma feuille de style, mais sans succès
Avez vous une idée du problème et/ou de la correction à apporter ?

Merci de votre aide.

Je ne saurais pas expliquer pourquoi mais le problème survient avec tous les floats, position absolue et relative de tes 4 images. Je comprend pas d'ailleurs l'utilisation de tous ces styles inutiles.

Voici un exemple beaucoup plus simple et qui ne règle ton problème ( qui n'est pas le menu ).

img { border:none; }
ul { list-style:none; float:left; }
ul li { float:left; padding:0 5px 0 0; }
ul li a { display:block; border:1px solid #000; padding:10px; }

<ul id="navigation"> 
    <li><a href="#"><img src="http://www.varinard.com/images/img_nouv/porte-mat/thumbs/hex1_tmb.jpg" /></a></li> 
    <li><a href="#"><img src="http://www.varinard.com/images/img_nouv/porte-mat/thumbs/hex0_tmb.jpg" /></a></li> 
    <li><a href="#"><img src="http://www.varinard.com/images/img_nouv/porte-mat/thumbs/hex2_tmb.jpg" /></a></li> 
    <li><a href="#"><img src="http://www.varinard.com/images/img_nouv/porte-mat/thumbs/hex0_tmb.jpg" /></a></li> 
</ul>

J'ai ajouté un clear:both au div#p7GSfs et ça fonctionne. Ton menu est par dessus et visuellement tu as le même effet.

De plus, ce serait bien de revoir ta façon de construire tes pages HTML, l'utilisation des tableaux pour la mise en page n'est pas, pour la plupart, accessible d'une part et c'est obsolète. Ça peut être valide sans que ce soit la bonne façon de faire.

Je te conseille de revoir tout ce qui concerne la sémantique et la structure de tes pages HTML et d'éviter aussi d'utiliser plusieurs méthodes qui entre en contradiction ( notamment le display:inline et la position:absolute sur le même élément. Tu peux avoir un conteneur en position absolute avec des éléments inline à l'intérieur mais pas les deux. )

Bref, la solution que je te propose fonctionnera mais si tu as du temps, à ta place je modifierais le code HTML au complet pour la validité, l'accessibilité et la sémantique ce qui nécessiterait une ré-intégration CSS complète ou presque.
Modifié par Sorano (25 Jan 2010 - 16:36)

Bonjour,

Merci pour la précision de la réponse.
En fait, en terme de gestion, il ne faudrait pas que je touche aux 4 images miniatures, car cette partie là est générée automatiquement par une extension dreamweaver (Image Gallery de PVII).
Ca deviendrait donc problématique lors des mises à jour de ces photos

Etant donné que je sèche à modifier le menu, la solution serait peut-être de trouver une autre extension Dreamweaver pour gérer facilement ces galeries photos.

Je me suis penché à nouveau sur ton cas et j'ai trouvé une solution que tu peux faire sans modifier les images et le code généré.

J'ai ajouté deux propriétés de positionnement à ton td#menu. Le float left est inutile en passant et au final on aurait le code suivant.

#menu {
background-color:#0075AE;
opacity:0.9;
padding-top:30px;
text-align:right;
width:217px;

position:relative;
z-index:300;

}

Malgré que ça fonctionnera, comme je disais, je t'encourage à revoir la méthode employée pour faire tes sites puisqu'elle n'est plus la bonne. De plus, c'est dommage que les pluggins Dreamweaver t'empêche complètement de changer le code, ce serait peut-être mieux si tu trouvais des alternatives où tu pourrais gérer par toi même ce genre de trucs.

Un grand merci, ça fonctionne désormais avec Firefox
Par contre IE 7 et 8, non ... Et pour tester ça sans Firebug, c'est bien galère.

Je crois qu'il va falloir que je trouve autre chose que mes galeries, parce que je triture ça dans tous les sens sans voir une solution qui marche partout.
Cette extension est pourtant vraiment confortable : j'ouvre mon dossier, dimensions de la miniature et de l'agrandissement, et c'est tout. C'est vraiment rapide. Mais bon, il faudra passer peut-être à autre chose