Faire un div en un lien

Je suis venu ici dans l’espoir de trouver une meilleure solution que la mienne, mais je n’aime pas les offres proposées ici. Je pense que certains d’entre vous ont mal compris la question. L’OP veut faire qu’un div plein de contenu se comporte comme un lien. Un exemple de ceci serait les annonces facebook – si vous regardez, ils sont en fait un balisage correct.

Pour moi, les no-nos sont: javascript (ne devrait pas être nécessaire uniquement pour un lien, et très mauvais référencement / accessibilité); HTML non valide.

En essence c’est ça:

• Construisez votre panel en utilisant des techniques CSS normales et du code HTML valide.
• Quelque part, un lien que vous voulez être le lien par défaut si l’utilisateur clique sur le panneau (vous pouvez aussi avoir d’autres liens).
• Dans ce lien, placez une balise span vide ( , pas – merci @Campey)
• donner la position du panneau: relative

• appliquer le CSS suivant à la plage vide:

   { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ background-image: url('empty.gif'); } 

  Il va maintenant couvrir le panneau, et comme il se trouve dans une balise , c’est un lien cliquable

• donner tout autre lien à l’intérieur de la position du panneau: relatif et un index z approprié (> 1) pour les placer devant le lien par défaut

Vous ne pouvez pas faire du div un lien lui-même, mais vous pouvez faire en sorte qu’une balise agisse comme un block , le même comportement qu’un

a.

 a { display: block; } 

Vous pouvez ensuite définir la largeur et la hauteur sur celui-ci.

C’est une question ancienne, mais je pensais pouvoir y répondre car tout le monde ici a des solutions folles. C’est en fait très très simple …

Une balise d’ancrage fonctionne comme ceci –

  EVERYTHING IN HERE TURNS INTO A LINK  

Sooo …

Bien que je ne sois pas sûr que cela soit valide. Si c’est le raisonnement derrière les solutions parlées, alors je m’excuse …

Nécessite un petit javascript. Mais votre div serait cliquable.

Cette option ne nécessite pas de fichier.gif comme dans la réponse la plus relevée:

HTML:

CSS:

  div.feature { position: relative; } div.feature a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* No underlines on the link */ z-index: 10; /* Places the link above everything else in the div */ background-color: #FFF; /* Fix to make div clickable in IE */ opacity: 0; /* Fix to make div clickable in IE */ filter: alpha(opacity=1); /* Fix to make div clickable in IE */ } 

Comme proposé à http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Ceci est une solution “valide” pour atteindre ce que vous voulez.

  text 

Mais très probablement, ce que vous voulez vraiment, c’est afficher une balise tant qu’élément de niveau bloc.

Je ne conseillerais pas d’utiliser JavaScript pour simuler un lien hypertexte, car cela irait à l’encontre de la validation de balisage (la publication de documents bien formés en respectant les règles sémantiques minimise la possibilité d’interpréter différemment un même document).

Il serait préférable de publier une page Web qui ne valide pas, mais qui rend et fonctionne correctement sur tous les navigateurs , y compris ceux avec JavaScript désactivé. De plus, l’utilisation d’ onclick ne fournit pas d’informations sémantiques à un lecteur d’écran pour déterminer que le div fonctionne comme un lien.

Je ne sais pas si cela est valable mais ça a fonctionné pour moi.

Le code :

 
 
 Whatever 
   

La manière la plus propre serait d’utiliser jQuery avec les balises de données introduites en HTML. Avec cette solution, vous pouvez créer un lien sur chaque tag souhaité. Définissez d’abord la balise (par exemple div) avec une balise de lien de données:

 HTML: ------------- 
Some content in the div which is arbitrary 

Maintenant, vous pouvez styler la div comme vous voulez. Et vous devez aussi créer le style du comportement “link”:

 CSS: ------------- [data-link] { cursor: pointer; } 

Et enfin mettre cet appel jQuery à la page:

 JAVASCRIPT: ------------- $(document).ready(function() { $("[data-link]").click(function() { window.location.href = $(this).attr("data-link"); return false; }); }); 

Avec ce code, jQuery applique un écouteur de clic à chaque balise de la page qui possède un atsortingbut “data-link” et redirige vers l’URL figurant dans l’atsortingbut data-link.

Pour que la réponse du forgeron fonctionne dans IE 7 et les versions ultérieures, il faut y apporter quelques modifications.

1. IE ne respecte pas z-index si l’élément n’a pas de couleur d’arrière-plan. Le lien ne recouvre donc pas les parties du conteneur contenant le contenu, mais uniquement les parties vides. Pour corriger cela, un arrière-plan est ajouté avec l’opacité 0.

2. Pour une raison quelconque, IE7 et divers modes de compatibilité échouent complètement lors de l’utilisation de la scope dans une approche de liaison. Toutefois, si le lien lui-même reçoit le style, cela fonctionne très bien.

 .blockLink { position:absolute; top:0; left: 0; width:100%; height:100%; z-index: 1; background-color:#ffffff; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; } 

Vous pouvez également essayer en enroulant une ancre, puis en faisant en sorte que sa hauteur et sa largeur soient identiques à celles de son parent. Cela fonctionne parfaitement pour moi.

Cet article est ancien, je sais, mais je devais juste résoudre le même problème car écrire une balise de lien normale avec l’affichage bloqué ne rend pas l’intégralité de la partition cliquable dans IE. donc pour résoudre ce problème beaucoup plus simple que d’avoir à utiliser JQuery.

Tout d’abord, laissez-nous comprendre pourquoi cela se produit: IE ne fera pas de clic sur un div vide, il ne peut que faire un clic sur le texte / l’image dans ce div / un tag.

Solution: Remplissez le div avec une image bakground et masquez-la à l’utilisateur.

Comment? Vous posez de bonnes questions, maintenant écoutez. append ce style backround à la balise

 > "background:url('some_small_image_path') > -2000px -2000px no-repeat;" 

Et voilà que tout le div est maintenant cliquable. C’était la meilleure façon pour moi de l’utiliser pour ma galerie de photos afin que l’utilisateur clique sur la moitié de l’image pour se déplacer de gauche à droite et placer une petite image pour les effets visuels. donc pour moi, j’ai utilisé les images de gauche et de droite comme images de fond de toute façon!

pourquoi pas? use

fonctionne use

en HTML5

Il suffit d’avoir le lien dans le bloc et de l’améliorer avec jquery. Il dégrade de 100% avec grâce pour toute personne sans javascript. Faire cela avec HTML n’est pas vraiment la meilleure solution à mon avis. Par exemple:

 
 
The Link and Headline
 
Some more stuff and maybe another link.
  

Ensuite, utilisez jquery pour rendre le bloc cliquable (via le Web Designer Wall ):

 $(document).ready(function(){ $("#div_link").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); 

Ensuite, il suffit d’append des styles de curseur au div.

  #div_link:hover {cursor: pointer;} 

Pour les points bonus, appliquez ces styles uniquement si javascript est activé en ajoutant une classe ‘js_enabled’ au div, ou au corps, ou peu importe.

Cet exemple a fonctionné pour moi:

En fait, vous devez inclure le code JavaScript pour le moment, consultez ce tutoriel pour le faire.

mais il existe un moyen délicat d’y parvenir en utilisant un code CSS: vous devez imbriquer une balise d’ancrage dans votre balise div et vous devez lui appliquer cette propriété,

 display:block; 

Lorsque vous avez fait cela, la zone entière de la largeur peut être cliquée (mais dans la hauteur de la balise d’ancrage), si vous souhaitez couvrir toute la zone div, vous devez définir la hauteur de la balise d’ancrage exactement à la hauteur de la balise d’ancrage. balise div, par exemple:

 height:60px; 

Cela va rendre toute la zone cliquable, puis vous pouvez appliquer un text-indent:-9999px à la balise d’ancrage pour atteindre l’objective.

Ceci est vraiment compliqué et simple et il est juste créé en utilisant le code CSS.

voici un exemple : http://jsfiddle.net/hbirjand/RG8wW/

Bien que je ne recommande pas de le faire sous aucune circonstance, voici un code qui crée un DIV dans un lien (note: cet exemple utilise jQuery et certains marquages ​​sont supprimés pour plus de simplicité):

   
 My Div Link  

Encore une fois, je ne ferais pas ça, alors s’il vous plait, ne me votez pas. J’essaie simplement de répondre à la question.

Ce travail pour moi:

 
... 

Vous pouvez donner un lien vers votre div en suivant la méthode suivante:

 
google
  

Vous pouvez faire entourer l’élément avec des balises href ou vous pouvez utiliser jquery et utiliser

 $('').click(function(e){ e.preventDefault(); //DO SOMETHING }); 

C’est le moyen le plus simple.

Dis, c’est le bloc div je veux rendre cliquable:

Alors mettez un href comme suit:

Considérez simplement le bloc div comme un élément HTML normal et activez la balise href habituelle.
Cela fonctionne sur FF au moins.

C’est le meilleur moyen de le faire, tel qu’il est utilisé sur le site Web de la BBC et du Guardian:

J’ai trouvé la technique ici: http://codepen.io/IschaGast/pen/Qjxpxo

heres le html

 
 
I am an example header
 
This entire box links somewhere, thanks to faux block links. I am some example text with a custom link that sits within the block
  

heres le CSS

 /** * Block Link * * A Faux block-level link. Used for when you need a block-level link with * clickable areas within it as directly nesting a tags breaks things. */ .block-link { position: relative; } .block-link a { position: relative; z-index: 1; } .block-link .block-link__overlay-link { position: static; &:before { bottom: 0; content: ""; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; white-space: nowrap; z-index: 0; } &:hover, &:focus { &:before { background: rgba(255,255,0, .2); } } } 

J’ai saisi une variable parce que certaines valeurs de mon lien changeront en fonction de l’enregistrement d’origine de l’utilisateur. Cela a fonctionné pour tester:

  
... 

et cela fonctionne aussi:

  
... 

si tout pouvait être si simple …

 #logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px} #logo a {padding-top:48px; display:block;} 
 

il suffit de penser un peu hors des sentiers battus 😉

Mon pantalon smarty répond:

“Réponse évasive à:” Comment créer un lien hypertexte avec un élément de niveau bloc et le valider dans XHTML 1.1 ”

Il suffit d’utiliser HTML5 DOCTYPE DTD. ”

N’a pas réellement tenu pour vrai7

onclick="location.href='page.html';"

Works IE7-9, Chrome, Safari, Firefox,