Discussion :

[shinjoku]

bonjour,

pour un projet, j'ai été amené à devoir rendre un div cliquable

je rencontre un probleme lorsque j'indique une largeur, une hauteur ou une position dans le style du div:
l'image cesse alors d'être cliquable

code qui fonctionne ( on a pas encore indiqué de largeur au div) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<a style="display:block;hand:hover;border:solid 3px blue;width:50px;padding:0px;" href="http://www.google.fr" target="_blank">  
 
    <div>
      <img border=0 SRC='http://blonville.unblog.fr/files/2007/11/google.gif'>
    </div>
</a>

code qui plante ( on a indiqué une largeur au div ) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<a style="display:block;hand:hover;border:solid 3px red;width:50px;padding:0px;" href="http://www.google.fr" target="_blank">  
 
    <div style="width:50px;">
      <img border=0  SRC='http://blonville.unblog.fr/files/2007/11/google.gif'>
    </div>
</a>

Sauriez vous pourquoi l'image cesse d'être cliquable lorsque qu'une largeur est ajoutée au style du div ?
Connaitriez vous une "bidouille" pour que l'image reste cliquable?
probleme: je ne peux pas utiliser de javascript ou creer un div avec l'image en background

PS: je sais que normalement il ne faut pas entourer un div par un lien mais dans le cadre
de mon projet je suis obligé de proceder de cette maniere, je sais que ce que je demande
n'est pas du code html valide mais uniquement une bidouille alors les puristes, ne vous formalisez pas !!

merci d'avance

[Erwan31]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<a style="display:block;hand:hover;border:solid 3px red;width:50px;padding:0px;" href="http://www.google.fr" target="_blank">  
 
    <div style="width:50px;">
      <img border=0  SRC='http://blonville.unblog.fr/files/2007/11/google.gif'>
    </div>
</a>

PS: je sais que normalement il ne faut pas entourer un div par un lien mais dans le cadre
de mon projet je suis obligé de proceder de cette maniere, je sais que ce que je demande
n'est pas du code html valide mais uniquement une bidouille alors les puristes, ne vous formalisez pas !!

En effet Pour commencer la déclaration hand:hover ne rime à rien et les pseudo-classes ne sont pas applicables dans un style local.

La question est de savoir pourquoi tu es OBLIGE de procéder de la sorte.

Chaque navigateur traite un code invalide selon un mécanisme qui lui est propre, on s'en remet donc un peu au hasard concernant résultat final qui n'est par conséquent pas toujours anticipable.

Même si tu dois conserver ce code, le mieux serait que tu puisses fournir la totalité du code HTML sans pouvoir garantir que cela résoudra ton problème.

Au passage les valeur d'attribut doivent être placées entre doubles quotes (border="0") et le padding:0px est inutile à moins que tu aies définit un padding pour tous les div en amont et que tu souhaites les annuler localement.