Comment est-ce que je réécris ce HTML pour valider à XHTML 1.0 Strict?

Comment est-ce que je réécris ce HTML pour valider à XHTML 1.0 Strict?Comment est-ce que je réécris ce HTML pour valider à XHTML 1.0 Strict?

<div> 
    <a href="link.html"> 
     <p>Some text</p> 
     <ul> 
      <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     </ul> 
    </a> 
</div>

Mon intention est d'avoir le div entier comme un lien cliquable. Le contenu décrit simplement le contenu de la page de destination. W3 Validator dit que je ne peux pas avoir un élément de bloc (<p>) à l'intérieur d'une balise span (<a>).

Comment puis-je réorganiser ceci pour que mes DIV restent des liens de bloc?

Source

2010-09-10 Drew

Est-il possible de définir display: block en CSS pour le tag a? Cela fonctionnerait-il? –

La balise 'a' est déjà définie pour afficher le bloc, c'est pourquoi il fonctionne comme je le veux. Il ne valide pas si ... – Drew

Vous n'êtes pas autorisé à envelopper un élément de niveau bloc dans un élément de niveau en ligne afin de disposer de quelques alternatives.

Vous pouvez envelopper chaque ligne que vous voulez lié dans le <a href="link.html">...</a>

<div> 
    <p><a href="link.html">Some text</a></p> 
    <ul> 
     <li><a href="link.html">Item 1</a></li> 
     <li><a href="link.html">Item 2</a></li> 
     <li><a href="link.html">Item 3</a></li> 
    </ul> 
</div>

Vous pouvez ajouter une fonction javascript onclick pour reproduire les mêmes résultats.

//jQuery 
$('div').click(function() { 
    window.location = 'link.html'; 
}); 

//Non jQuery 
document.getElementById('yourDiv').onclick = function() { 
    window.location = 'link.html'; 
}

Si vous utilisez le Javascript, assurez-vous d'utiliser les CSS pour rendre évident que le contenu des liens. Je recommande des classes pseudo

div { 
    text-decoration: underline; 
    color: #0000FF;//or whatever your link color is 
} 
div li:hover, p:hover { 
    color: #CC00FF; 
    cursor: pointer; 
}

Source

2010-09-10 00:45:28 Robert

Vous devriez mentionner que cette solution dépend de jQuery. – jigfox

@jigfox Fait sens, mis à jour. – Robert

Salut Robert! Si j'utilise la fonction jQuery, où dois-je la mettre? La page en question a entre 5 et 30 de ces blocs div, chacun allant à une page différente. – Drew

Vous ne pouvez pas réorganiser pour faire le bloc un lien. Ce que vous pouvez faire est de faire de chaque élément du bloc un lien, ou vous pouvez utiliser javascript.

<div style="cursor:pointer" onclick="location.href='link.html'"> 
    <!-- ... --> 
</div>

Source

2010-09-10 00:46:31 jigfox

Je déconseillerais généralement l'utilisation de 'onclick' comme attribut, mais j'approuve votre utilisation de' cursor: pointer' qui a été négligé dans les autres publications. +1 –

@LeguRi, je suis d'accord avec vous, normalement je ne l'utilise pas trop, mais je voulais présenter une solution rapide et courte. Et Robert a déjà présenté la meilleure solution. – jigfox

Votre <UL> est également un élément de bloc, de sorte qu'il n'y fonctionnera pas non plus. Comment:

<div onclick="location.href = 'link.html'"> 
    <p>Some text</p> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div>

Source

2010-09-10 00:52:36 gilly3

En l'état, votre fragment est valide HTML5. Utilisez cela à la place et votre problème disparaît. Tout ce que vous avez à faire est de changer le doctype en <!doctype html>.

Source

2010-09-10 01:07:40 zwol

Vraiment !? Avez-vous des liens à citer? Ont-ils abandonné tout le «niveau de bloc par rapport au niveau en ligne» en HTML5? –

Yup. Voir http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html - en particulier la description du «contenu des flux», qui semble avoir englobé les deux catégories; également, à http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element, l'élément '' est spécifiquement autorisé à contenir flux de contenu "mais pour être encore traité comme" phrasé contenu "si son contenu est entièrement" phrasé contenu ". – zwol

En outre, http://validator.nu/ est un validateur HTML5. J'ai déterminé ma réponse originale en collant le fragment OP dans le document squelette qu'il vous donne. Pas d'erreurs – zwol

Comment est-ce que je réécris ce HTML pour valider à XHTML 1.0 Strict?

Répondre

Questions connexes