Faire une div dans un lien

est Venu ici dans l'espoir de trouver une meilleure solution que la mienne, mais je n'aime pas l'un de ceux proposés ici. Je pense que vous avez mal compris la question. L'OP veut qu'une div pleine de contenu se comporte comme un lien. Un exemple de cela serait les annonces facebook-si vous regardez, ils sont en fait le markup approprié.

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

en substance, c'est ceci:

• Construisez votre panneau en utilisant les techniques CSS normales et HTML valide.
• quelque part dans là mettre 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).
• à L'intérieur de ce lien, mettez une étiquette de portée vide ( <span></span> , pas <span /> - merci @Campey)
• donner la position du panneau: relative

• appliquer le CSS suivant à la portée 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'une étiquette <A> , 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 amener devant le lien de portée par défaut

Vous ne pouvez pas faire la div un lien lui-même, mais vous pouvez faire un <a> tag "à l'151930920" , le même comportement qu'un <div> .

a {
    display: block;
}

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

c'est une question ancienne, mais j'ai pensé que j'y répondrais puisque tout le monde ici a des solutions folles. C'est vraiment très très simple...

une étiquette 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 valable. Si c'est le raisonnement derrière les solutions parlées, alors je m'excuse...

nécessite un peu de javascript. Mais, votre div serait 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 plupart des upvoted réponse:

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/

c'est une solution "valide" pour réaliser 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 est d'avoir une étiquette <a> affichée comme un élément de niveau de bloc.

Je ne conseillerais pas D'utiliser JavaScript pour simuler un lien hypertexte car cela va à l'encontre de l'objectif 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é de la même document sera interprété différemment par différents navigateurs).

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é. De plus, l'utilisation de onclick ne fournit pas l'information sémantique pour un lecteur d'écran afin de déterminer que le div fonctionne comme un lien.

Je ne sais pas si c'est valable, mais ça a marché 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>

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

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

maintenant vous pouvez styliser la div comme vous voulez. Et vous devez également créer le style du "lien"-comme comportement:

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 applys un clic écouteur à chaque étiquette sur la page qui a un attribut "data-link" et redirige à L'URL qui est dans l'attribut data-link.

pour que la réponse de thepeer fonctionne dans IE 7 et forward, il faut quelques retouches.

1. IE ne respecteraient pas les z-index si l'élément n'a pas de couleur d'arrière-plan, de sorte que le lien ne se chevauchent pas parties de la div contenant que le contenu, seul le vide des pièces. Pour corriger ceci, un arrière-plan est ajouté avec 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. Toutefois, si le lien lui-même est donné 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 en enveloppant une ancre, puis en tournant sa hauteur et la largeur d'être le même avec 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>

ce post est vieux je sais mais j'ai juste eu à corriger le même problème parce que simplement écrire une étiquette de lien normale avec l'affichage défini pour bloquer ne rend pas le tout div 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: C'est-à-dire ne fera pas un vide div cliquable il faire seulement le texte/l'image dans ce div/une étiquette cliquable.

Solution: remplir le div d'une image bakground et cacher de l'observateur.

comment? Vous posez de bonnes questions, Maintenant écoutez. ajouter ce style de backround à l'étiquette a

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

et là vous avez le div entier est maintenant cliquable. C'était la meilleure façon pour moi parce que je L'utilise pour ma galerie de Photos pour permettre à l'utilisateur clik sur une moitié de l'image de se déplacer gauche/droite et ensuite placer une petite image ainsi juste 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 <a href="bla"> <div></div> </a> fonctionne très bien en HTML5

Juste le lien dans le bloc et de l'améliorer avec jquery. Il dégrade 100% gracieusement pour n'importe qui sans javascript. Faire cela avec html n'est pas vraiment la meilleure solution imho. 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>

puis utiliser jquery pour rendre le bloc cliquable (via web designer wall ):

$(document).ready(function(){

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

});

alors 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' au div, au body, etc.

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>

en fait, vous devez inclure le code JavaScript pour le moment, cochez ce tutoriel pour le faire.

mais il y a une façon délicate 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 appliquer cette propriété,

display:block;

quand vous avez fait cela,il fera toute la zone de largeur cliquable (mais à la hauteur de l'étiquette d'ancrage),si vous voulez couvrir l'ensemble de la zone de div vous devez régler la hauteur de l'étiquette d'ancrage exactement à la hauteur de l'étiquette div,par exemple:

height:60px;

cela va rendre toute la zone cliquable,alors vous pouvez appliquer text-indent:-9999px pour ancrer l'étiquette pour atteindre le but.

c'est vraiment délicat 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 faire cela en aucune circonstance, voici un code qui fait une DIV dans un lien (note: Cet exemple utilise jQuery et certains markup sont supprimés pour la 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>

encore une fois, je ne ferais pas ça alors s'il vous plaît ne me rejetez pas. J'essaie simplement de répondre à la question.

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 une étiquette href ou vous pouvez utiliser jquery et utiliser

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

C'est la manière la plus simple.

dites, c'est le bloc div que je veux rendre cliquable:

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

ainsi, mettez un href comme suit:

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

considérez simplement le bloc div comme un élément html normal et activez l'étiquette habituelle href .

ça marche au moins sur FF.

C'est la meilleure façon de le faire qu'il est utilisé sur le site de la BBC et le Guardian:

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

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

j'ai tiré dans une variable parce que certaines valeurs dans mon lien changeront en fonction de ce record l'utilisateur vient de. Cela a fonctionné pour les essais:

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

et cela fonctionne aussi :

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

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>

il suffit de penser un peu à l'extérieur de la boîte ;-)

Mon smarty pants réponse:

"réponse vague: "Comment faire au niveau de l'îlot élément d'un lien hypertexte et de valider en XHTML 1.1"

il suffit d'utiliser HTML5 DOCTYPE DTD."

N'a pas fait de vrai pour ie7

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

Works IE7-9, Chrome, Safari, Firefox,