Balise a en bloc pose problème lors de la validation

Bonjour,

Je viens de refaire une partie de mon site et lors de la validation je me suis rendu compte qu'il n'aimait pas trop mes balises <a> dont le display est à block et qui contiennent des <h2></h2> ou <p></p>.

Je comprends bien pourquoi ce n'est pas valide, mais je voulais savoir s'il y avait une astuce, ou quelque chose qui m'échappe. J'aimerai conserver le fait de pouvoir cliquer n'importe ou dans la case ( pour l'occasion et pour les actus). Le problème intervient sur la page d'accueil :

Prestigeauto.fr, partie Chrysler

Lien de la validation.

Désolé, si ce sujet a déjà été débattu mais je n'ai pas trouvé .

D'avance merci.
Modifié par Gonab (17 Dec 2009 - 11:35)

Salut,

L'astuce est juste de répéter le lien à chaque fois que tu en as besoin dans des éléments block.
Ce n'est pas en modifiant le type de rendu d'un élément que tu en modifies le modèle de contenu, qui sont deux choses différentes, un lien ne pourra pas contenir des éléments de type de rendu block.
Pour te rendre compte de la différence entre les deux notions, l'élément <p> est de type de rendu block, mais de modèle de contenu inline. En effet, il s'affiche comme un block mais ne peut contenir que des éléments inline.
Le type de rendu peut être modifié (en CSS) alors que le modèle de contenu ne peut pas et est défini dans les DTD.
Modifié par Agylus (17 Dec 2009 - 12:03)

Pour compléter ou plutôt simplifier ce qu'a dit Agylus :
les liens <a> sont des balises de type inline. Ils ne pourront en aucun cas contenir des balises de type block (<p> ou <h...> par exemple) même si tu leurs affectes un rendu (affichage) de type block.

Merci pour vos réponses.

En fait, j'avais bien saisi que mettre des balises de type blocs dans des balises de type inline "c'est mal". J'ai donc répété le lien sur mes éléments comme décrit par Agylus et adapté mon CSS, mais je n'obtiens pas le résultats escompté. J'aimerai que l'ensemble de la cellule selection occasion soit cliquable.

Je vous mets le lien : Test !

Je vais essayer de changer mes éléments de type block en inline, avec des span... a moins que cela soit pas la meilleure solution.

Bon,

je viens de faire comme évoqué plus haut. Je me suis servi de balise <span> afin de conserver mon lien sur la cellule complète. Le résultat n'est pas trop mal.

c'est valide. Par contre, j'ai vraiment du mal à mettre en forme ces balises et les placer correctement par rapport à mon image. Elles n'ont pas l'air de réagir à certains attribut de ma feuille CSS...
Modifié par Gonab (17 Dec 2009 - 14:34)

Gonab a écrit :
Je vais essayer de changer mes éléments de type block en inline, avec des span... a moins que cela soit pas la meilleure solution.

Ce n'est effectivement pas la meilleure solution.

Il faudrait commencer par se demander pourquoi ce type de construction (lien contenant des paragraphes de texte) n'est pas valide en HTML4. Ça peut être une imprécision de la spécification ou une limitation excessive, mais dans ce cas précis c'est plutôt l'application du principe suivant: un lien a un intitulé clair. En HTML4, un lien est considéré comme un texte décrivant une ressource et auquel est associé l'URL de la ressource. Un lien n'est PAS une «zone cliquable» ou «zone réactive».

Un lien qui contient un contenu de type «teaser» complet n'est pas un lien explicite. C'est donc, dans l'esprit d'HTML4, quelque chose à éviter. Par ailleurs, ce type de lien au contenu extrêmement long mets à mal l'accessibilité de la page (bonjour la lecture du lien dans un lecteur d'écran!).

Le mieux est donc de gérer séparément:
- le contenu avec des liens toujours pertinents (par exemple un lien sur le titre et un autre en rappel sur un intitulé générique du type "lire la suite");
- le comportement souhaité avec JavaScript (et un soupçon de CSS pour affichage du bon curseur lors du survol de la zone cliquable).

En JavaScript, tu peux, pour un conteneur donné, récupérer l'URL de destination d'un lien dans ce conteneur, puis utiliser cette URL comme destination lors du clic sur l'ensemble du conteneur. Avec jQuery que tu utilises, c'est extrêmement facile à faire.

Gonab a écrit :
c'est valide.

Et c'est pire que ton code d'origine. Comme quoi, la validité ne fait pas la qualité.

Florent V. a écrit :

Et c'est pire que ton code d'origine. Comme quoi, la validité ne fait pas la qualité.

Entièrement d'accord.

Je vais essayer de voir ce que je peux faire avec tes conseils et jQuery.

Merci.