[Résolu] Equivalent valide [W3C] pour un <div> dans un <a>

Bonjour,

j'ai un petit soucis avec le validateur,
en effet il n'est pas d'accord avec les codes qui suivent:

<a href="/">
<div id="bo2">
</div>
</a>

il affiche alors:

a écrit :
document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

et m'explique qu'on ne peut pas encadrer un "block" avec un "inline".

J'ai le même soucis avec un tableau encadrer par un script:

<a href="javascript:switchDisplay_2();" title="Afficher/cacher le menu choix animés">
<table>
<tr>
<td>
Objet
</td>
</tr>
</table>

Je comprends parfaitement où il veut en venir mais le soucis c'est que je veux absolument pouvoir atteindre une url ou déclencher l'action du javascript au clic sur ces <div>.

Y aurait-il une possibilité pour rendre le code valide ?
Modifié par Nheavy (24 May 2011 - 16:08)

Et bien pour le premier code, c'est juste d'atteindre une page lors du clic sur la <div>,

pour le second c'est afficher une <div> non visible sur la page lors du clic sur une <div> qui elle est visible forcément.

Voila une illustration sur mon site: www.funeralforamanga.com

Vous cliquez sur "choix animés" en bas à gauche de votre écran et vous verrez ce qui se passe ^^ .

Voici votre code:

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>

J'ai pas l'impression de pouvoir avoir le même résultat qu'actuellement, sur mon script, j'ai fait en sorte que la <div> cliqué ne disparaisse pas de cette façon:

HTML

<a href="javascript:switchDisplay_2();" title="Afficher/cacher le menu choix animés">
<div id="bo1">
</div>
<div id="cacherbo1" style="display:none;">
<div id="menuder" class="menuder">
<table>
<tr>
<td>Contenu du tableau</td>
</tr>
</table>
</div>
</div>
</a>

où <div id="bo1"> est la <div> cliqué (donc là c'est comme si elle disparaissait pour réapparaitre).

JAVASCRIPT

function switchDisplay_2(){
var defaut = document.getElementById('bo1');
var autre = document.getElementById('cacherbo1');

defaut.style.display = (defaut.style.display == '' ? '' : '');
autre.style.display = (autre.style.display == 'none' ? '' : 'none');
}

Donc ce que je trouve bizarre c'est que votre code ne fait apparaitre que du texte.



Aussi pour:

<a href="/">
<div id="bo2">
</div>
</a>

j'ai trouvé une solution qui consiste en ceci:

<div id="bo2">
<a href="/">
<img src="image_url" alt="" height="100%" width="100%" />
</a>
</div>

Où "image_url" est un gif transparent de 1px sur 1.
Et ça marche du tonnerre, ce n'est malheureusement pas adaptable sur les <div> soumis à un javascript, en tout cas ça ne les rends pas plus valide qu'avant.
Modifié par Nheavy (20 May 2011 - 15:10)