lien entourant un div -> image non cliquable

shinjoku · 27 Février 2008

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) :

Bloc de code:

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

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

Bloc de code:

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

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

Anonyme · 27 Février 2008

Un div est un élément de type bloc, qui ne peut pas se trouver dans un élement A (en ligne), tu devrais utiliser un <span>, je suis sûr que tu auras beaucoup moins de problèmes. Et puis pourquoi ne pas utiliser des classes avec tes éléments?

Bloc de code:

[LEFT]<a class="liengoogle" href="[URL="http://www.google.fr/"]http://www.google.fr[/URL]" target="_blank">  [/LEFT]
 
[LEFT]   <span>
     <img border=0  SRC='http://blonville.unblog.fr/files/2007/11/google.gif' alt="Google">
   </span>
</a>  
[/LEFT]

avec la css :

Bloc de code:

a.liengoogle {display:block;hand:hover;border:solid 3px red;width:50px;padding:0px;}

J'espère que tu peux modifier les css.

P.S. : j'ai mis un span mais il ne sert à rien avec l'exemple que je t'ai donné, à toi de voir...

fredmac75 · 27 Février 2008

Salut,
tu as également cette solution très économique en code

Bloc de code:

<style type="text/css">
MaDiv:hover{
  background-color:red;
}
</style>
</head>
<body>
...
<div id="MaDiv"> <a href="#" title="">blabla ...</a></div>

lien entourant un div -> image non cliquable

shinjoku

Membre enregistré

Anonyme

Invité

fredmac75

Membre expert

Sujets similaires