Question Faire un div dans un lien


j'ai un <div> bloquer 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.


493
2018-04-28 03:15


origine


Réponses:


Je suis venu ici dans l'espoir de trouver une meilleure solution que la mienne, mais je n'aime pas ceux qui sont proposés ici. Je pense que certains d'entre vous ont mal compris la question. L'OP veut faire une div pleine de contenu se comporter comme un lien. Un exemple de ceci serait des publicités Facebook - si vous regardez, ils 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 invalide.

En substance, c'est ceci:

  • Construisez votre panneau en utilisant des techniques CSS normales et HTML valide.
  • Quelque part dans là mettez un lien que vous voulez être le lien par défaut si l'utilisateur clique sur le panneau (vous pouvez avoir d'autres liens aussi).
  • Dans ce lien, placez une balise span vide (<span></span>, ne pas <span /> - merci @Campey)
  • donne la position du panel: 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> tag, c'est un lien cliquable

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

698
2017-08-16 14:32



Vous ne pouvez pas faire le div un lien lui-même, mais vous pouvez faire un <a> tag agir comme block, le même comportement a <div> a.

a {
    display: block;
}

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


238
2018-04-28 03:20



Ceci est une question ancienne, mais je pensais 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 cela soit valide. Si c'est le raisonnement derrière les solutions parlées, alors je m'excuse ...


63
2018-04-14 01:12



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

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

49
2018-02-27 16:25



Cette option ne nécessite pas de fichier.gif comme dans la réponse la plus surclassé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é à http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/


28
2018-04-28 03:52



Ceci est une solution "valable" pour atteindre ce que vous voulez.

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

Mais très probablement ce que vous voulez vraiment, c'est avoir un <a> étiquette affichée en 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 rend et fonctionne correctement sur tous les navigateurs, y compris ceux avec JavaScript désactivé. En outre, en utilisant onclick ne fournit pas l'information sémantique pour un lecteur d'écran pour déterminer que la div fonctionne comme un lien.


23
2018-02-12 04:35



Je ne sais pas si cela est valable mais ça 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>


13
2017-09-26 14:13



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 l'étiquette (par exemple, div) avec une balise de lien de données:

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

Maintenant, vous pouvez styler la div comme vous voulez. Et vous devez également créer le style pour le 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 attribut "data-link" et redirige vers l'URL figurant dans l'attribut data-link.


10
2017-11-06 21:00



Pour que la réponse de thepeer 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 résoudre ce problème, un fond est ajouté avec l'opacité 0.

  2. Pour une raison quelconque IE7 et divers modes de compatibilité échouent complètement lorsque vous utilisez le span dans une approche de lien. 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;  
}
<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

9
2017-08-23 17:25



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.

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

7
2017-08-11 15:23



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 cachez-le à la visionneuse.

Comment? Vous posez de bonnes questions, maintenant écoutez. ajouter 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!


4
2018-02-19 13:17