Enrouler le lien <a> autour de <div>

Question

Est-il possible d'envelopper un <a> tag autour <div> comme suit :

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

Eclipse me dit que les div sont au mauvais endroit ? Si ce n'est pas autorisé. Comment faire pour que toute la classe 'layout' devienne un lien ?

Answer 1

Cette structure serait valide en HTML5, puisque les ancres peuvent envelopper presque tous les éléments, à l'exception des autres ancres et des contrôles de formulaires. La plupart des navigateurs actuels prennent en charge ce type de structure et analyseront le code de la question comme du HTML valide. La réponse ci-dessous a été écrite en 2011, et peut être utile si vous supportez des navigateurs anciens (*tousse* Internet Explorer *tousse*).

---

Les navigateurs plus anciens qui n'ont pas d'analyseur HTML5 (comme, par exemple, Firefox 3.6) ne s'y retrouveront pas et risquent de perturber la structure du DOM.

Trois options pour HTML4 - utiliser 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, le style avec display: block

---

Utiliser JavaScript et :hover :

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

Et (en supposant que jQuery)

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

Et

.layout:hover {
    // Hover effect
}

---

Enfin, il est possible d'utiliser le positionnement absolu pour placer un a avec CSS pour couvrir l'ensemble de la .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 entendu.

Answer 2

Alors que la <a> n'est pas autorisée à contenir des <div> il est autorisé à contenir d'autres éléments en ligne tels que <span> .

Lorsque j'ai rencontré le problème, j'ai remplacé la balise div par une balise <span> . Comme la balise span est un élément en ligne, vous devez appliquer une balise display:block à la css de votre <span> afin qu'il se comporte comme l'élément <div> élément du bloc. Il doit s'agir d'un code xhtml valide qui ne nécessite pas de javascript.

En voici un exemple :

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

Answer 3

Une autre solution simple consiste à ajouter un gestionnaire d'événement "onclick" à la div, comme suit :

<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 un petit problème. Je ne suis pas sûr que cela soit adapté aux moteurs de recherche. Je crains que les robots d'indexation de Google ne trouvent pas ce lien et j'ai donc tendance à inclure un lien A HREF traditionnel quelque part dans le bloc, comme ceci :

<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>

Answer 4

La solution de Timothy est correcte ... au lieu d'enrouler une ancre autour d'une div ... vous donnez simplement une mise en page à l'élément d'ancre avec display:block et ajoutez 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>

Answer 5

Il suffit de styliser la balise "a" comme suit display: block;

Eclipse vous indique que votre HTML n'est pas conforme aux spécifications (car une balise div n'est pas autorisée dans une balise d'ancrage).

Mais, puisque vous semblez vouloir être visuellement pour que l'ancre ressemble à une grosse boîte, il suffit de la styliser comme telle :)