un lien href pour l'ensemble du div en HTML / CSS

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

J'ai des images de différentes hauteurs et largeurs, mais elles sont toutes inférieures à 180x235. Donc ce que je veux faire, c'est créer un divavec borderet vertical-align: middletout le monde. J'ai réussi à faire cela, mais maintenant je suis coincé sur la façon de correctement un lien href l'ensemble 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 par souci de copier-coller ici facilement, le code de style est en ligne.

J'ai lu quelque part que je peux simplement ajouter un autre div parent au-dessus du code, puis faire un href à l'intérieur. Cependant, sur la base de certaines recherches, ce ne sera pas un code valide.

Donc, pour résumer à nouveau, j'ai besoin que le div ( #parentdivimage) entier soit un lien href.

MISE À JOUR 10/06/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.

Pourquoi ne pas enlever l' <div>élément et le remplacer par un à la <a>place? Ce n'est pas parce que la balise d'ancrage n'est pas une div que vous ne pouvez pas la styliser avec display:blockune hauteur, une largeur, un arrière-plan, une bordure, etc. Vous pouvez la faire ressembler à une div mais agir comme un lien. Ensuite, vous ne comptez pas sur du code invalide ou du JavaScript qui peut ne pas être activé pour certains utilisateurs.

Fais-le comme ça:

Parentdivimage doit avoir une largeur et une hauteur spécifiées, et sa position doit être:

position: relative;

Juste à l'intérieur de l'image parentdiv, à 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, en raison de la hauteur et de la largeur définies sur 100%. Span sera au-dessus de tous les éléments environnants en raison du réglage de z-index plus élevé que les autres éléments. Enfin, span sera cliquable, car il se trouve à l'intérieur d'une balise «a».

Deux choses que vous pouvez faire:

1. Passez #childdivimageà un spanélément et changez #parentdivimageen une balise d'ancrage. Cela peut vous obliger à ajouter un peu plus de style pour que les choses soient parfaites. Ceci est préféré, car il utilise un balisage sémantique et ne repose pas sur javascript.

2. Utilisez Javascript pour lier un événement de clic à #parentdivimage. Vous devez rediriger la fenêtre du navigateur en modifiant à l' window.locationintérieur de cet événement. Ceci est TheEasyWay ^TM , mais ne se dégradera pas gracieusement.

En partant de ce que Surreal Dreams a dit, il est probablement préférable de styliser l'étiquette d'ancrage dans mon expérience, mais cela dépend vraiment de ce que vous faites. Voici un exemple:

Html:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

Puis le CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Faites plutôt le divd' id="childdivimag"un spanet enveloppez-le dans un aélément. Comme les éléments spanet imgsont en ligne par défaut, cela reste valide, alors que a divest un élément de niveau bloc, et donc une balise invalide lorsqu'elle est contenue dans un a.

mettre display:blockl'élément d'ancrage. et / ou zoom:1;

mais tu devrais vraiment faire ça.

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

Ce que je ferais, c'est mettre une étendue à l'intérieur de la <a>balise, définir la portée sur bloquer et ajouter de la taille à la portée, ou simplement appliquer le style à la <a>balise. Gérez définitivement le positionnement dans le <a>style de balise. Ajouter un onclick eventau a whereJavaScript capturera l'événement, puis retournera false à la fin de l'événement JavaScript pour empêcher l'action par défaut hrefet le bouillonnement du clic. Cela fonctionne dans les cas avec ou sans JavaScript activé, et tout AJAX peut être géré dans l'écouteur Javascript.

Si vous utilisez jQuery, vous pouvez l'utiliser comme écouteur et omettre le onclickdans la abalise.

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

cela vous permet d'attacher des écouteurs à tout élément modifié si nécessaire.

Un lien avec des <div>balises:

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

Un lien avec des <a>balises:

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>

Cela peut être fait de plusieurs manières. une. Utilisation imbriquée dans une balise.

<a href="link1.html">
   <div> Something in the div </div>
 </a>

b. Utilisation de la méthode JavaScript en ligne

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

c. Utilisation de jQuery à l'intérieur de la balise

HTML:

<div class="demo" > Some text here </div>

jQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });