Embrasse le lien <a> autour de <div>

Cette structure serait valide en HTML5 car dans les ancrages HTML5, on peut envelopper presque n'importe quel élément sauf pour les autres ancrages et les contrôles de formes. La plupart des navigateurs disposent aujourd'hui d'un support et analyseront le code dans la question en tant que HTML valide. La réponse ci-dessous a été écrite en 2011 et peut être utile si vous soutenez les navigateurs existants (* toux * Internet Explorer * toux *).

Les navigateurs plus anciens sans analyseurs HTML5 (comme, par exemple, Firefox 3.6) vont toujours se confondre avec cela, et éventuellement gâcher la structure DOM.

Trois options pour HTML4: utilisez tous les éléments en ligne:

 <a href=etc etc> <span class="layout"> <span class="title"> Video Type <span class="description">Video description</span> </span> </span> </a> 

Ensuite, style avec display: block

Utilisez JavaScript et :hover :

 <div class="layout"> <div class="title"> Video Type <div class="description">Video description</div> </div> </div> 

Et (en supposant jQuery)

 $('.layout').click(function(){ // Do something }): 

Et

 .layout:hover { // Hover effect } 

Ou utilisez enfin le positionnement absolu pour placer une ancre avec CSS pour couvrir l'ensemble de .layout

 <div class="layout"> <div class="title"> Video Type <div class="description">Video description</div> </div> <a class="more_link" href="somewhere">More information</a> </div> 

Et CSS:

 .layout { position: relative; } .layout .more_link { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; text-indent: -9999px; z-index: 1000; } 

Cela ne fonctionnera pas avec les anciennes versions d'IE, bien sûr.

Bien que la balise <a> ne soit pas autorisée à contenir l'élément <div> , elle est autorisée à contenir d'autres éléments en ligne tels que <span> .

Lorsque j'ai rencontré le problème, j'ai échangé la balise div avec un <span> . Étant donné que l'étiquette d'extension est un élément en ligne, vous devez appliquer un display:block au css de votre élément <span> , afin de le faire se comporter comme l'élément de bloc <div> . Cela devrait être valide xhtml et ne nécessite aucun javascript.

Voici un exemple:

 <a href="#"> <span style="display:block"> Some content. Maybe some other span elements, or images. </span> </a> 

La solution de Timothy est correcte … au lieu d'envelopper une ancre autour d'une div … vous simplement donner une disposition à l'élément d'ancrage avec affichage: bloquer et ajouter la taille et la largeur de l'ancre …

 .div_class { width: 100px; height: 100px; } .div_class a { width: 100px; height: 100px; display: block; } <div class='div_class'><a href="#"></a></div> 

Une autre solution simple: ajoutez simplement un gestionnaire d'événements onclick à la division:

 <div class="layout" onclick="location.href='somewhere'"> <div class="title"> Video Type <div class="description">Video description</div> </div> </div> 

Cela fonctionne très bien pour moi, mais il y a une petite gueule. Je ne suis pas sûr de la façon dont le moteur de recherche est amical. Je crains que les crawlers Web de Google ne trouvassent pas ce lien, donc j'ai aussi tendance à inclure un lien HREF traditionnel dans le bloc comme celui-ci:

 <div class="layout" onclick="location.href='destination_url'"> <div class="title"> Video Type <div class="description">Video description</div> </div> <a href="destination_url">This is a link</a> </div> 

Vous souhaitez simplement style de la balise "a" comme display: block;

Eclipse vous indique de manière appropriée que votre HTML n'est pas une spécification (car une balise div n'est pas autorisée dans une balise d'ancrage).

Mais, puisque vous semblez vouloir visualiser l'apparence de l'ancre comme une grosse boîte, il suffit de la considérer comme telle 🙂