un lien href pour toute la division en HTML/CSS

Question

Voici ce que j'essaie d'accomplir en HTML/CSS :

J'ai des images de différentes hauteurs et largeurs, mais elles sont toutes inférieures à 180x235. Ce que je veux faire, c'est créer un div con border y vertical-align: middle tous. J'ai réussi à le faire, mais maintenant je suis coincé sur la façon de faire un lien href pour l'ensemble du site. div .

Voici mon code :

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

Veuillez noter que pour faciliter le copier-coller, le code de style est en ligne.

J'ai lu quelque part que je pouvais simplement ajouter un autre div parent par-dessus le code et y placer un href. Cependant, d'après certaines recherches, ce ne sera pas un code valide.

Donc, pour résumer à nouveau, j'ai besoin de la div entière ( #parentdivimage ) pour être un lien href.

Answer 1

MISE À JOUR 06/10/2014 : L'utilisation de div à l'intérieur de a est sémantiquement correcte en HTML5.

Vous devrez choisir entre les scénarios suivants :

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

ce qui est sémantiquement incorrect, mais cela fonctionnera.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

ce qui est sémantiquement correct mais implique l'utilisation de JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

qui est sémantiquement correct et fonctionne comme prévu, mais n'est plus un div.

Answer 2

Pourquoi ne pas retirer le <div> et le remplacer par un élément <a> à la place ? Ce n'est pas parce que la balise d'ancrage n'est pas un div que vous ne pouvez pas lui donner un style à l'aide de la fonction display:block une hauteur, une largeur, un fond, une bordure, etc. Vous pouvez le faire regardez comme un div mais quand même acte comme un lien. Ainsi, vous ne dépendez pas d'un code invalide ou de JavaScript qui pourrait ne pas être activé pour certains utilisateurs.

Answer 3

Faites comme ça :

La division parentale de l'image doit avoir une largeur et une hauteur spécifiées, et sa position doit être :

position: relative;

Juste à l'intérieur de la parentdivimage, à côté des autres divs que le parent contient, vous devez mettre :

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

Puis dans le fichier css :

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

La balise span remplira son bloc parent, qui est parentdiv, car la hauteur et la largeur sont fixées à 100 %. La balise span sera en haut de tous les éléments environnants, car l'index z est plus élevé que celui des autres éléments. Enfin, le span sera cliquable, car il se trouve à l'intérieur d'une balise 'a'.

Answer 4

Deux choses que vous pouvez faire :

1. Changement #childdivimage à un span et modifier #parentdivimage à une balise d'ancrage. Vous devrez peut-être ajouter un peu plus de style pour que tout soit parfait. Cette option est préférable, car elle utilise un balisage sémantique et ne repose pas sur le javascript.

2. Utilisez Javascript pour lier un événement de clic à #parentdivimage . Vous devez rediriger la fenêtre du navigateur en modifiant window.location à l'intérieur de cet événement. C'est TheEasyWay TM mais ne se dégradera pas de manière gracieuse.

Answer 5

Faites le div de id="childdivimag" a span à la place, et l'envelopper dans un a élément. Comme le span y img sont des éléments en ligne par défaut, cela reste valable, alors qu'un élément de type div est un élément de niveau bloc, et par conséquent un balisage non valide lorsqu'il est contenu dans un fichier a .