Comment Ajouter un “a href” Lien Vers Un “div”?

J'ai besoin de savoir comment faire pour ajouter un a href lien vers un div? Pouvez-vous mettre le tag a href arounf l'ensemble de la "buttonOne" div? Ou devrait-il être autour ou à l'intérieur de la "linkedinB" div?

Voici mon code HTML:

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

Ce post avait un peu de CSS, quelques minutes auparavant, et j'ai créé un jsfiddle.net/n3ckB de lui. Profitez-en!
Il fut un temps où un étiquettes ont été ancres sur l'hypertexte. Par conséquent, les divs avait pas d'ancres autour d'eux parce qu'ils ont pas de contenu réel, mais aussi le contenu des wrappers. Les jeunes garçons sauté ye olde Interweb fois... 🙂

InformationsquelleAutor Wardenclyffe | 2012-06-15

13

Ne pouvez pas vous entourent avec un tag?
```
  <a href="#"><div id="buttonOne">
        <div id="linkedinB">
            <img src="img/linkedinB.png" width="40" height="40">
        </div>
  </div></a>
```
- qui génèrent des problèmes avec ie8, c'est parce que sémantiquement incorrect
- abattu: parce que sémantiquement incorrect. veuillez vous référer à: ceci réponse
- En HTML5 à l'aide de <div>à l'intérieur d'un <a> est correct. La caisse de la mise à jour de la page liée par @zhirzh ci-dessus.
InformationsquelleAutor Philip Kirkbride
4

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

Soit on obtient le navigateur pour faire défiler vers le bas pour elle.

La a élément ressemble à:
```
<a href="mypageName.html#buttonOne">buttonOne</a>
```
Ou:
```
<a href="mypageName.html#linkedinB">linkedinB</a>
```
InformationsquelleAutor Oded

essayer de mettre en œuvre avec javascript ce:

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

InformationsquelleAutor Contributor

3

Essayez de créer une classe nommée overlay et d'appliquer le code css suivant: la
```
a.overlay { width: 100%; height:100%; position: absolute; }
```
Assurez-vous qu'il est placé dans un élément positionné.

Maintenant, il suffit de placer un <a> étiquette avec cette classe à l'intérieur de la div vous voulez être couplés:
```
<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>
```
PhilipK suggestion pourrait fonctionner, mais il ne validez pas parce que vous ne pouvez pas placer un élément de bloc (div) à l'intérieur d'un élément inline (a). Et quand votre site web ne valide pas le W3C Ninja viendra pour vous!

Un autre conseil serait d'essayer d'éviter les inline style.

InformationsquelleAutor Carlo Palinckx

Je dirais:

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

Cependant, il sera toujours un lien. Si vous souhaitez modifier votre lien sur un bouton, vous devez renommer le #buttonone à #buttonone un { votre css ici }.

InformationsquelleAutor Dirk de Man

Vos solutions ne semblent pas être de travailler 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>

InformationsquelleAutor Faheem Ahmad

Vous devez vous connecter pour publier un commentaire.