Réécrire ce code: divs cliquables

Question

Je voudrais changer ceci:

<a href='foo'> 
    <div> Moo </div>
</a>

être conforme aux normes (vous n'êtes pas censé avoir des éléments de bloc dans les éléments en ligne). Connecter javascript aux divs juste pour la navigation semble être un hack et dégrade l’accessibilité. Dans ce cas, mes exigences concernent 2 ensembles de bordures sur mes liens à dimension fixe. Le code non conforme ci-dessus fonctionne donc parfaitement après l’application de styles. / p>

De plus, " a { display:block; } " un moyen légal de contourner la validation?

Answer 1

Pourquoi ne pas utiliser un < span > plutôt qu'un < div > et définir display: block sur les deux éléments?

De plus, pour répondre à votre dernière question: je ne pense pas que l'ajout de display: block; à votre ancre lui permettra de passer avec succès la validation. Le validateur vérifie si vous suivez les règles (X) HTML et non comment présenter la page à l'utilisateur.

Answer 2

Vous pouvez envisager de placer le div en dehors du a s'il est uniquement destiné à l'affichage, sauf s'il est important que la bordure extérieure soit cliquable. Soit ceci:

<div class="dbl_border_links"><a href="blah">Blah text</a></div>

ou ceci:

<a class="dbl_border_links" href="blah"><span>Blah text</span></a>

fonctionnera et vous pouvez utiliser quelque chose comme ceci:

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

pour spécifier les styles. Personnellement, je choisirais le <=> contenant le <=>, mais l’une ou l’autre méthode fonctionne.

Answer 3

Je considère normalement que la balise <a > constitue un cas particulier à cette fin. Vous devriez pouvoir appliquer cela à peu près à n'importe quoi - c'est après tout le sens de l'hypertexte (<tr > vient comme un bon exemple). Mais si vous devez passer un validateur quelque part, je comprends.

Pourriez-vous utiliser un gestionnaire javascript onclick pour la div et éliminer complètement l'ancre?

Answer 4

Premièrement, il n’ya rien de mal à donner un affichage d’ancre: block; Je dirais que c'est l'une des choses les plus communes que les gens font avec CSS et qu'il est parfaitement conforme aux normes. Deuxièmement, il existe plusieurs façons de créer une double bordure sur un élément HTML. Premièrement, consultez le & Quot; contour & Quot; propriété:

http://webdesign.about.com/od/advancedcss/a /outline_style.htm

Certes, cela ne fonctionnera que sur les navigateurs plus modernes, mais devrait se dégrader gracieusement car le contour ne prend pas de place dans la page. Si le contenu du lien doit être une image, vous pouvez simplement donner à & Lt; a & Gt; un peu de rembourrage et une couleur de fond ainsi qu'une bordure normale (dans une autre couleur) pour créer l'impression d'une bordure double. Ou donnez à l'image une bordure qui lui est propre. Bien sûr, vous pouvez également faire quelque chose dans le sens de votre idée initiale, tout en imbriquant votre code HTML et en affectant simplement une bordure différente à chaque élément. Ou vous pouvez utiliser un élément en ligne dans le lien (comme un & Lt; span & Gt; ou un & Lt; em & Gt; ou quelque chose) que vous avez également défini pour afficher: block; (oui, cela est également valable!). Bonne codage!

Answer 5

Si je comprends bien vos intentions, placez, comme déjà mentionné, la div en dehors de l'ancre et, pour obtenir la même présentation, effectuez l'ancre width:100%;height:100%. La distance parcourue dans le navigateur peut varier. En outre, vous pouvez vider complètement la div et donner l’ancre display:block;

Qu'est-ce que vous essayez exactement de faire?