Transformez un div en lien

J'ai un <div>bloc avec un contenu visuel de fantaisie que je ne veux pas changer. Je veux en faire un lien cliquable.

Je cherche quelque chose comme <a href="…"><div> … </div></a>, mais c'est XHTML 1.1 valide.

Je suis venu ici dans l'espoir de trouver une meilleure solution que la mienne, mais je n'aime aucune des solutions proposées ici. Je pense que certains d'entre vous ont mal compris la question. L'OP veut faire qu'une div remplie de contenu se comporte comme un lien. Un exemple de cela serait les publicités Facebook - si vous regardez, elles sont en fait un bon balisage.

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.

C'est essentiellement cela:

• Créez votre panneau à l'aide de techniques CSS normales et d'un code HTML valide.
• Quelque part, placez un lien que vous souhaitez être le lien par défaut si l'utilisateur clique sur le panneau (vous pouvez également avoir d'autres liens).
• À l'intérieur de ce lien, placez une balise span vide ( <span></span>, pas<span /> - 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 est à l'intérieur d'un <A> balise, c'est un lien cliquable

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

Vous ne pouvez pas faire le divlien lui-même, mais vous pouvez faire en sorte qu'un <a>tag agisse comme un block, le même comportement qu'un <div>a.

a {
    display: block;
}

Vous pouvez ensuite définir la largeur et la hauteur dessus.

C'est une question ancienne, mais j'ai pensé 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 -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

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

Nécessite un peu de javascript. Mais, votre divserait cliquable.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

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

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

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é sur http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Il s'agit d'une solution "valable" pour réaliser ce que vous voulez.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

Mais le plus probable, ce que vous voulez vraiment, c'est d'avoir une <a>balise affichée en tant qu'élément de niveau bloc.

Je ne conseillerais pas d'utiliser JavaScript pour simuler un lien hypertexte car cela va à l'encontre du but de la validation du balisage, qui est finalement de promouvoir l'accessibilité (la publication de documents bien formés suivant des règles sémantiques appropriées minimise la possibilité qu'un même document soit interprété différemment par différents navigateurs).

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

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 balise que vous souhaitez. Définissez d'abord la balise (par exemple, div) avec une balise de liaison de données:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Vous pouvez maintenant styliser le div comme vous le souhaitez. Et vous devez également créer le style pour le comportement de type "lien":

[data-link] {
  cursor: pointer;
}

Et enfin mettez cet appel jQuery à la page:

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

Avec ce code, jQuery applique un écouteur de clics à chaque balise de la page qui a un attribut "liaison de données" et redirige vers l'URL qui se trouve dans l'attribut de liaison de données.

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

Le code :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

Pour que la réponse du peintre fonctionne dans IE 7 et versions ultérieures, il a besoin de quelques ajustements.

1. IE n'honorera pas l'index z si l'élément n'a pas de couleur d'arrière-plan, donc le lien ne chevauchera pas les parties de la div contenant qui a du contenu, seulement les parties vides. Pour résoudre ce problème, 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 portée dans une approche de lien. Cependant, si le lien lui-même reçoit le style, il 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;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

vous pouvez également essayer d'envelopper une ancre, puis de tourner sa hauteur et sa largeur pour qu'elles soient identiques à celles de son parent. Cela fonctionne parfaitement pour moi.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

pourquoi pas? use <a href="bla"> <div></div> </a>fonctionne bien en HTML5

Ce message est ancien, je sais, mais je devais juste résoudre le même problème parce que le simple fait d'écrire une balise de lien normale avec l'affichage réglé sur block ne rend pas la div entière 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 rendra pas un div vide cliquable, il ne fera que le texte / l'image dans ce div / une balise cliquable.

Solution: remplissez le div avec une image bakground et cachez-la au spectateur.

Comment? Vous posez de bonnes questions, écoutez maintenant. ajouter ce style d'arrière-plan à la balise a

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

Et voilà, tout le div est maintenant cliquable. C'était le meilleur moyen pour moi car je l'utilisais pour ma galerie de photos pour permettre à l'utilisateur de cliquer sur une moitié de l'image pour se déplacer vers la gauche / droite, puis de placer une petite image également pour les effets visuels. donc pour moi j'ai quand même utilisé les images gauche et droite comme images de fond!

Ayez simplement le lien dans le bloc et améliorez-le avec jquery. Il se dégrade gracieusement à 100% pour toute personne sans javascript. Faire cela avec html n'est pas vraiment la meilleure solution à mon humble avis. Par exemple:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Utilisez ensuite jquery pour rendre le bloc cliquable (via le mur du concepteur Web ):

$(document).ready(function(){

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

});

Ensuite, tout ce que vous avez à faire est d'ajouter des styles de curseur à la div

    #div_link:hover {cursor: pointer;}

Pour les points bonus, n'appliquez ces styles que si javascript est activé en ajoutant une classe 'js_enabled' à la div, au corps ou autre.

Cet exemple a fonctionné pour moi:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

Cela a fonctionné pour moi:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

Cela ajoute un élément invisible (le span), qui couvre votre div entier, et est au - dessus de votre div entier sur l'index z, donc quand quelqu'un clique sur ce div, le clic est essentiellement intercepté par votre couche "span" invisible, qui est lié.

Remarque: Si vous utilisez déjà des z-index pour d'autres éléments, assurez-vous simplement que la valeur de ce z-index est supérieure à tout ce dont vous voulez qu'il repose "au-dessus" de.

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

mais il existe un moyen difficile d'y parvenir en utilisant un code CSS, vous devez imbriquer une balise d'ancrage à l'intérieur de votre balise div et vous devez lui appliquer cette propriété,

display:block;

lorsque vous avez fait cela, cela rendra toute la zone de largeur cliquable (mais dans la hauteur de la balise d'ancrage), si vous voulez couvrir toute la zone div, vous devez définir la hauteur de la balise d'ancrage exactement à la hauteur de la balise div, par exemple:

height:60px;

ça va rendre toute la zone cliquable, alors vous pouvez appliquer text-indent:-9999px une balise d'ancrage pour atteindre l'objectif.

c'est vraiment délicat et simple et il vient d'être créé en utilisant du code CSS.

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

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

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

voici le html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

voici 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);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></a>

Ce travail pour moi:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

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

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

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 divbloc que je veux rendre cliquable:

<div class="inner_headL"></div>

Mettez donc un hrefcomme suit:

<a href="#">
 <div class="inner_headL"></div>
</a>

Considérez simplement le divbloc comme un élément html normal et activez la hrefbalise a habituelle .
Cela fonctionne au moins sur FF.

Bien que je ne recommande pas de le faire en aucune circonstance, voici un code qui transforme un DIV en lien (remarque: cet exemple utilise jQuery et certaines balises sont supprimées pour plus de simplicité):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

Une option qui n'a pas été mentionnée utilise flex. En appliquant flex: 1à la abalise, elle se développe pour s'adapter au conteneur.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

J'ai ajouté une variable car certaines valeurs de mon lien changeront en fonction de l'enregistrement dont l'utilisateur provient. Cela a fonctionné pour les tests:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

et cela fonctionne aussi:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

Mon pantalon smarty répond:

"Réponse évasive à:" Comment faire de l'élément de niveau bloc un lien hypertexte et valider dans XHTML 1.1 "

Utilisez simplement la DTD HTML5 DOCTYPE. "

N'était pas vrai pour ie7

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

Fonctionne IE7-9, Chrome, Safari, Firefox,

si tout pouvait être aussi 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;}



<div id="logo"><a href="../../index.html"></a></div>

pensez juste un peu en dehors de la boîte ;-)