Superposition de div et liens

[djef61]

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.

[calimo]

Hello,

Concernant la superposition, il faut jouer avec les z-index, mais es-tu sûr que ce n'est pas plutôt un problème de design si des blocs se superposent ainsi ?

PS : le onclick est-il sur un lien ou sur le div? Pense aux utilisateurs naviguant uniquement au clavier : ils ont besoin d'un élément actif (lien, formulaire).

[djef61]

Bonjour,
En fait il s'agit d'un CMS développé il y a plus de 5 ans, code... ne pas regarder et pas prévu pour ça. Basic, il est adapté selon les besoins.
http://test.delaroque.eu/ Les div sont bordées pour voir ce qui se passe. Au survol, la photo elle passe au premier plan et affiche la bulle.
http://perche-canada2.delaroque.eu/accueil.php Le problème est contourné, mais plus de mise en avant.
Question design ce n'est pas un modèle, mais c'est la demande. Le onclick est sur la div ; prévu pour ordi de bureau - avec souris.

[~HP]

Question design ce n'est pas un modèle, mais c'est la demande. Le onclick est sur la div ; prévu pour ordi de bureau - avec souris.

Ouais… sauf que logiquement on met des onclik sur des éléments cliquables, ça n'a pas de rapport avec la demande puisque c'est une simple question de bon sens voire de sémantique ; et ainsi, on s'affranchit de savoir pour quel type d'équipement est prévu le balisage…

Par contre, pour moi ça ressemble plus à un hover qu'à un onclick ; enfin, ça se peut que j'ai pas tout compris .

[calimo]

Bonjour,
En fait il s'agit d'un CMS développé il y a plus de 5 ans, code... ne pas regarder et pas prévu pour ça. Basic, il est adapté selon les besoins.

Cinq ans ou pas, des onclick sur des div pour faire un lien…
Si le besoin est d'exclure systématiquement les handicapés, alors effectivement le site est parfaitement adapté : ne change rien

http://test.delaroque.eu/ Les div sont bordées pour voir ce qui se passe. Au survol, la photo elle passe au premier plan et affiche la bulle.
http://perche-canada2.delaroque.eu/accueil.php Le problème est contourné, mais plus de mise en avant.
Question design ce n'est pas un modèle, mais c'est la demande. Le onclick est sur la div ; prévu pour ordi de bureau - avec souris.

Il y a beaucoup trop de <div> pour pouvoir débugguer le truc (j'en compte une vingtaine rien que dans la zone centrale où le problème intervient… 5 de trop - et le survol en crée 3 supplémentaires, 2 de trop !). Effectivement Opera permet de survoler tous les éléments, mais impossible de comprendre pourquoi (ou pas) avec tous ces div.

Le deuxième exemple me parait beaucoup plus clair et simple. Et la clarté et la simplicité sont des règle d'or sur le web. Il est bien souvent profitable de sacrifier un effet inutile pour rendre une interface plus facile à utiliser : n'oublie pas que tes utilisateurs ne savent pas qu'ils doivent cliquer sur l'infobulle pour la faire disparaitre (moi-même je l'ai découvert dans le code), donc ne parlons même pas des contorsions de la souris nécessaires pour passer d'une image à l'autre.

À toi de voir

[djef61]

C'est un CMS, c'est a dire qu'une même procédure répond à de nombreux cas de figure. Exemple : margon.fr/patrimoine.php ou le symbole en haut à droite affiche un menu contextuel, ou le survol des vignettes change l'image principale. Dans le cas le plus simple, certaines div sont inutiles. Quand j'ai débuté, j'étais déjà content de faire cela ; aujourd'hui je reprend tout.
Le problème : Il n'était pas prévu de superposer 2 ou plusieurs éléments comportant cette procédure. Opéra et IE permettent la "transparence" d'une div pour les pointeurs et je cherchais à utiliser cette fonctionnalité avec Firefox. C'était sans doute une mauvaise idée.
Effectivement, l'approche handicape, non traitée dans ce premier temps, est prévue dans cette refonte et va sans doute limiter les fonctionnalités utilisables. En tant que développeur, je doit répondre à la demande. Ce sera un peu plus professionnel si je préviens le demandeur des problème que cela cause.
En développement à façon, il n'y a pas trop de difficultés ; construire son CMS, c'est un autre débat.
NOTE : les 2 URL précédentes sont mises à disposition temporairement.