web-dev-qa-db-fra.com

Comment ajouter un lien "a href" à un "div"?

J'ai besoin de savoir comment ajouter un lien href à une div? Placez-vous la balise a href autour de l'intégralité de "buttonOne" div? Ou devrait-il être autour ou à l'intérieur de la "linkedinB" div?

Voici mon HTML:

<div id="buttonOne">
  <div id="linkedinB">
    <img src="img/linkedinB.png" width="40" height="40">
  </div>
</div>
htmlhrefadd
14
Wardenclyffe

Ne pouvez-vous pas l'entourer d'un tag?

  <a href="#"><div id="buttonOne">
        <div id="linkedinB">
            <img src="img/linkedinB.png" width="40" height="40">
        </div>
  </div></a>
13
Philip Kirkbride

Dans ce cas, cela n'a pas d'importance, car il n'y a pas de contenu entre les deux divs.

L’un ou l’autre obtiendra le navigateur pour y accéder.

L'élément a ressemblera à:

<a href="mypageName.html#buttonOne">buttonOne</a>

Ou:

<a href="mypageName.html#linkedinB">linkedinB</a>
4
Oded

essayez d'implémenter avec javascript ceci:

<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
    function myhref(web){
      window.location.href = web;}
</script>
4
Contributor

Essayez de créer une classe nommée overlay et appliquez-y le css suivant:

a.overlay { width: 100%; height:100%; position: absolute; }

Assurez-vous qu'il est placé dans un élément positionné.

Maintenant, placez simplement une balise <a> avec cette classe dans le div que vous voulez pouvoir lier:

<div id="buttonOne">
  <a class="overlay" href="......."></a>
    <div id="linkedinB">
       <img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
    </div>
 </div>

La suggestion de PhilipK peut fonctionner, mais ne valide pas car vous ne pouvez pas placer un élément de bloc (div) dans un élément en ligne (a). Et lorsque votre site Web ne valide pas, les Ninja du W3C viendront à votre place! 

Un autre conseil serait d’essayer d’éviter les styles en ligne.

2
Carlo Palinckx

Je dirais:

 <a href="#"id="buttonOne">
            <div id="linkedinB">
                <img src="img/linkedinB.png" width="40" height="40">
            </div>
      </div>

Cependant, ce sera toujours un lien. Si vous voulez changer votre lien en un bouton, vous devez renommer le #buttonone en #buttonone un {votre css ici}.

1
Dirk de Man

Vos solutions ne semblent pas fonctionner pour moi, j'ai le code suivant. Comment mettre un lien dans les deux derniers divs .

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:o="urn:schemas-Microsoft-com:office:office">

<style>
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
  font-family: "Quicksand", sans-serif; 
  font-weight: bold; 
  text-align: center;  
  text-transform: uppercase; 
  -webkit-transition: all 0.25s ease; 
  -moz-transition: all 0.25s ease; 
  -ms-transition: all 0.25s ease; 
  -o-transition: all 0.025s ease; 
}

/* Colors */

#ora {
  background-color: #e67e22; 
}

#red {
  background-color: #e74c3c; 
}

#orab {
  background-color: white; 
  border: 5px solid #e67e22; 
}

#redb {
  background-color: white; 
  border: 5px solid #e74c3c; 
}
/* End of Colors */

.B {
  width: 240px; 
  height: 55px; 
  margin: auto; 
  line-height: 45px; 
  display: inline-block; 
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  -o-box-sizing: border-box; 
} 

#orab:hover {
  background-color: #e67e22; 
}

#redb:hover {
  background-color: #e74c3c; 
}
#whib:hover {
  background-color: #ecf0f1; 
}

/* End of Border

.invert:hover {
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  -ms-filter: invert(1);
  -o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2> 

<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>

</html>
0
Faheem Ahmad