Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: djef61 le le 21-12-2010 a 21:35:58

Titre: Superposition de div et liens
Posté par: djef61 le le 21-12-2010 a 21:35:58

Bonjour,
J'ai plusieurs div avec un affichage dynamique (contenant un "onClick") ; elles se superposent. Avec Opéra et IE, j'accède aux liens dans les parties vides. Avec Firefox, la dernière div recouvre tout en empêche l'accès à ce qui est en dessous ; c'est sans doute lui que respecte la norme mais je cherche à une solution.

Titre: Re:Superposition de div et liens
Posté par: MarvinLeRouge le le 22-12-2010 a 13:46:55

Bonjour djef,

Donne une url de test, ce sera beaucoup plus facile de te répondre.

Titre: Re:Superposition de div et liens
Posté par: djef61 le le 22-12-2010 a 18:47:57

Bonjour Marvin,
Il s'agit d'un CMS personnel qui évolue selon la demande. Basic, facile à utiliser, mais le code... faut pas regarder (plus de 5 ans et jamais refait),
URL1 :http://test.delaroque.eu (http://test.delaroque.eu)
Les div sont bordées pour le test de façon à voir ce qui ce passe. Un photo survolée passe au 1er plan (avec la div) et affiche une bulle.
URL2 :http://perche-canada2.delaroque.eu (http://perche-canada2.delaroque.eu)
Le problème est contourné pour l'affichage des bulles, mais plus de mise en avant des photos.

Titre: Re:Superposition de div et liens
Posté par: MarvinLeRouge le le 23-12-2010 a 12:59:32

J'ai du mal à comprendre : l'élément survolé et son texte passent forcément au premier plan : sinon comment tu veux voir le texte s'il est sous l'image d'à côté.
J'ai l'impression de ne pas bien comprendre ton problème.

Titre: Re:Superposition de div et liens
Posté par: djef61 le le 23-12-2010 a 13:58:31

Justement comme les div se superposent, je n'ai plus accès à la div du dessous pour la faire passer au 1er plan. Opéra et IE sont "transparents" pour le pointeur, pas Firefox.
Ce sont différents conteneurs dont la "bulle" est enfermée avec le reste, donc ils se chevauchent dans cet exemple.
C'est sans doute un montage peu recommandable que j'ai essayé (il n'était pas prévu initialement). Comme cela fonctionne dans certains cas, je cherchais à généraliser mon code (je prépare une refonte). Je pressent une impasse, sur le plan technique, mais aussi sur le plan ergonomique (accès handicap...). Le mieux serait sans doute d'éviter cette situation non conforme, surtout que j'ai une solution de rechange (exemple 2).

Titre: Re:Superposition de div et liens
Posté par: MarvinLeRouge le le 24-12-2010 a 11:14:32

Bon alors, je vais te répondre au feeling, étant donné que je ne suis pas certain de mon interprétation de ton besoin :
Ce que tu devrais faire, c'est donner à tous les éléments en question (les éléments englobant image + bulle, donc probablement un lien) un positionnement (relatif, absolu ou fixe), ainsi qu'un z-index à 1. Et sur le hover, tu passes le z-index à 2.
Ainsi, l'élément survolé passe au-dessus du reste, et redescend au même niveau quand tu le quittes.

Ça répond à ta question ?

Titre: Re:Superposition de div et liens
Posté par: djef61 le le 24-12-2010 a 12:18:09

C'est exactement ce que j'ai fait, et cela fonctionne très bien lorsque la partie "réactive" n'est pas masquée par une autre div (dans Firefox). En fait il me faut une procédure ou toutes les images et leurs "bulles" soient dans une seule et même div. Ce sera plus propre à tous niveaux.
J'ai fait mon test dans Opéra, sans y croire car c'était trop tordu ; comme cela fonctionnait je voulais essayer de l'adapter à tous les navigateurs.

La technique a des limites et c'est très bien car souvent il suffit de faire fonctionner un peu plus ses méninges pour mieux utiliser ce qui existe et obtenir de meilleurs résultats qu'en construisant des usines à gaz.
Savoir jusqu'où on peut aller et ne pas aller fait partie de tout métier. Repousser les limites c'est bien quand ce n'est pas faire n'importe quoi et parfois le regard et la critique de quelqu'un d'extérieur aide à prendre conscience plus rapidement de son erreur.


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.