un lien href pour toute la div en HTML / CSS

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

J’ai des images dans différentes hauteurs et largeurs, mais elles sont toutes sous 180×235. Donc, ce que je veux faire, c’est créer un div avec border et vertical-align: middle tous. Je l’ai fait avec succès, mais maintenant je suis coincé sur la façon de lier correctement un href à toute la div .

Voici mon code:

 

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

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

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

UPDATE 06/10/2014: l’ utilisation de div à l’intérieur d’un a est sémantiquement correcte dans HTML5.

Vous devrez choisir entre les scénarios suivants:

  
Hello world

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

 
Hello world

ce qui est sémantiquement correct mais cela implique d’utiliser JS.

   Hello world   

ce qui est sémantiquement correct et fonctionne comme prévu mais n’est plus une div.

Pourquoi ne pas supprimer l’élément

et le remplacer par un ? Le fait que la balise d’ancrage ne soit pas une div ne signifie pas que vous ne pouvez pas la styliser avec display:block , a height, width, background, border, etc. Vous pouvez la faire ressembler à un div mais agir comme un lien . Ensuite, vous ne vous fiez pas à du code invalide ou à du code JavaScript qui pourrait ne pas être activé pour certains utilisateurs.

Fais-le comme ça:

Parentdivimage doit avoir spécifié la largeur et la hauteur, 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:

  

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 à 100%. Span sera au sumt de tous les éléments environnants en raison de la définition de z-index plus élevée 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. Remplacez #childdivimage par un élément span et remplacez #parentdivimage par une balise d’ancrage. Cela peut vous obliger à append un peu plus de style pour que tout soit parfait. Ceci est préférable, car il 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 redirect la fenêtre du navigateur en modifiant window.location dans cet événement. Ceci est TheEasyWay TM , mais ne se dégradera pas gracieusement.

En allant au-delà de ce que Surreal Dreams a dit, il est sans doute préférable de mettre l’étiquette d’ancrage dans mon expérience, mais cela dépend vraiment de ce que vous faites. Voici un exemple:

Html:

  

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

Rendez la div de id="childdivimag" un span place, et enveloppez cela dans a élément. Comme le span et l’ img sont des éléments en ligne par défaut, cela rest valide, alors qu’un div est un élément de niveau bloc, et donc un marquage invalide lorsqu’il est contenu dans a .

put display:block sur l’élément d’ancrage. et / ou zoom:1 ;

mais vous devriez juste vraiment faire ceci.

 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} 

 whatever your alt atsortingbute was 

Ce que je ferais, c’est de placer une balise à l’intérieur de la balise , de définir la plage à bloquer et d’append de la taille à la plage, ou d’appliquer simplement le style à la balise . Manipulez définitivement le positionnement dans le style de balise . Ajoutez un onclick event à a where JavaScript intercepte l’événement, puis retournez false à la fin de l’événement JavaScript pour empêcher toute action par défaut du href et de la diffusion du clic. Cela fonctionne dans les cas avec ou sans JavaScript activé, et tout AJAX peut être manipulé dans l’écouteur Javascript.

Si vous utilisez jQuery, vous pouvez l’utiliser comme écouteur et omettre le onclick dans le tag.

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

Cela vous permet d’attacher des écouteurs à tous les éléments modifiés si nécessaire.