Faire un div dans un lien

Question

J’ai un `` bloc avec du contenu visuel fantaisie que je ne veux pas changer. Je veux faire un lien cliquable.

Je suis à la recherche de quelque chose comme `` , mais cela est valide XHTML 1.1.

Answer 1

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 faire un div plein de contenu se comporter comme un lien. Un exemple de ceci serait facebook ads - si vous regardez, ils sont en fait de balisage.

Pour moi, le non-n sont: javascript (il ne devrait pas être nécessaire juste pour un lien, et très mauvais SEO/accessibilité); du code HTML non valide.

En substance, c'est ceci:

• Construire votre panneau de l'utilisation normale des techniques CSS et HTML valide.
• Quelque part dans y mets un lien qui vous voulez être le lien par défaut si l'utilisateur clique sur le panneau (il peut y avoir trop de liens).
• À l'intérieur de ce lien, mettre un vide balise span (<span></span>, pas <span /> - merci @Campey)
• donner le panneau de position:relative

• appliquer le code CSS suivant le vide span:

  { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
  
    /* edit: added z-index */
    z-index: 1;
  
    /* edit: fixes overlap error in IE7/8, 
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }   
  

  Il couvre maintenant le panneau, et que c'est à l'intérieur d'un <A> balise, c'est un lien cliquable

• donner des liens à l'intérieur du panneau de position:relative et un z-index (>1) pour le ramener à l'avant de la période par défaut de lien

Edit: supprimé site que j'ai référencé, comme il a changé au-delà de toute reconnaissance.

Answer 2

Vous ne pouvez pas faire le un lien lui-même, mais vous pouvez faire un tag Loi comme un , le même comportement un a.

Vous pouvez ensuite définir la largeur et la hauteur à ce sujet.

Answer 3

Il s’agit d’une question ancienne, mais j’ai pensé que je répondrais à elle étant donné que tout le monde ici a des solutions de folles. Il est vraiment très très simple...

Une balise d’ancrage fonctionne comme ceci-

donc...

Bien que je ne sais pas si c’est valide. Si tel est le raisonnement qui sous-tend des solutions orales, puis je m’excuse...

Answer 4

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

Answer 5

C'est un "valide" la solution à la réalisation de ce que vous voulez.

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

Mais plus probablement ce que vous voulez vraiment est d'avoir un <a> balise affiche comme un élément de niveau bloc.

Je ne vous conseille pas l'utilisation de JavaScript pour simuler un lien hypertexte en tant que de défaites le but de la validation de balisage, qui est en fin de compte à la promotion de l'accessibilité (édition bien formé documents suivant correctement les règles sémantiques minimise la possibilité que le même document sera interprété différemment par les 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, en onclick ne fournissent pas l'information sémantique pour un lecteur d'écran pour déterminer que la div est comme le fonctionnement d'un lien.