[resolu] Placer des éléments en block dans un lien a href

Bonjour,

J'ai un problème de validation html concernant des imbrications de block dans une "a href".

J'ai créée une zone "a href" dans laquelle j'ai placé des balises "p". En fait, mon but est de faire en sorte que lorsque je passe en hover sur une zone contenant du texte et des images, le background change de couleur.

J'ai tenté d'utilisé des "span" à la place des "p", mais le validateur continue à m'afficher des erreurs. Quelle solution puis-je utiliser ?

Merci !

Voici mon html :

<a href="#" class="globallink">
	<div class="grid_4">
		  <img src="monimage.jpg" />
		   <h4>titre</h4>
		   <h5>mots clefs</h5>
		   <p>texte</p>
		   <p class="type">type</p>
	 </div>
</a>

Modifié par nforum (17 Nov 2010 - 14:22)

Bonjour,

L'élément a ne peut pas contenir d'éléments de type bloc, donc exit div, hn et p.

Tu as donc deux solutions : soit tu places des liens dans chacun des éléments sus-cités, soit tu les remplaces par des span (avec display bloc).

Tu peux aussi avoir des liens uniquement sur les titres, et utiliser JavaScript pour «capter» les clics sur l'ensemble du conteneur et simuler un clic sur le lien dans le titre. Ce type de solution n'est pas optimal, il me semble que ça réagit mal avec certains raccourcis pour l'ouverture d'un nouvel onglet par exemple.

En HTML5 le fait de mettre certains éléments de type bloc dans un lien est valide, mais ça reste déconseillé pour l'accessibilité.

La solution de Laurie-Anne avec des span (+ display bloc) devrait être la bonne...

je vais tester et reviendrai sur le forum en cas de nouvelles questions.

Merci pour vos réponses !

apparemment c'est résolu

merci