[RESOLU] Rendre une div cliquable en respectant les normes W3C

Bonjour,
je faut un site web dans lequel je suis obligé de rendre cliquable une div en l'entourant de deux balises <a></a>mais apparement cette méthode n'est pas valide, je suis en xhtml1.0 transitional.

J'ai pas trouvé d'autres solutions pour avoir cet effet.

Auriez-vous une solution ?

Bien cordialement,

J
Modifié par stardy (04 May 2011 - 16:22)

Et elle contient quoi cette div ?

Sinon tu peux peut-être definir un onclick javascript et jouer sur cursor en CSS

Bonjour,

Oui, il suffit de passer par Javascript. Utilises-tu déjà la librairie JQuery? Si oui, je connais un moyen de le faire très proprement.

Sinon, tu peux aussi y aller d'un simple onclick sur le div.

Bonjour,
je dirais que tout dépend du contenu.

Mais si elle contient que du texte tu peux imaginer un truc du genre :

<a href=""...>
<span> mon premier contenu </span>
<span> mon autre contenu </span>
</a>

Et passer tout ce joli monde (a et span) en display:block pour se comporter comme une div ? Même si je suis pas sûre que ce soit sémantiquement super.

Si elle contient plus (ou que tu peux pas changer le html) le javascript reste encore la meilleur solution.

Sinon tu peux passer le doctype en html5 et la div dans le a devient valide de mémoire, mais à voir si tu peux te permettre ce changement ou non (changer tout un doctype pour juste valider un élément c'est peut-être too much, tout dépend de l'avancé dans ton projet aussi)

De mémoire :

Javascript

$(document).ready(function() {
   $("div.maclasse").click(function(){
      window.location=$(this).find("a").attr("href");
      return false;
   });
});

HTML

<div class="maclasse">
<h1>Mon titre</h1>
<p>Mon paragraphe</p>
<p><a href="details.htm">Plus de détails...</a></p>
</div>

Sans Javascript, l'utilisateur peut cliquer sur le lien Plus de détails. Avec Javascript, il peut cliquer directement sur le div. Libre à toi ensuite d'adapter ce bout de code comme ajouter un effet de hover, changer le curseur, dissimuler le lien si Javascript activé pour des raisons esthétiques, etc.
Modifié par Tony Monast (04 May 2011 - 15:53)