Réduire la zone cliquable pour le lien

J'ai un mot sur une page et chaque lettre séparée est un lien. Je voudrais réduire la taille de la zone cliquable afin qu'il n'y ait pas d'espace autour des lettres. En ce moment, c'est bien à gauche et à droite de chaque lettre, mais il y a trop d'espace au-dessus et en dessous de chaque lettre. J'ai inclus une bordure autour des liens à des fins d'illustration (voir violon ci-dessous).Réduire la zone cliquable pour le lien

Des idées sur comment?

HTML:

<body> 
    <div> 
    <h1><a href=#>H</a></h1> 
    <h1><a href=#>E</a></h1> 
    <h1><a href=#>L</a></h1> 
    <h1><a href=#>L</a></h1> 
    <h1><a href=#>O</a></h1> 
    </div> 
</body>

CSS:

body { 
     font-family: 'Sigmar One', cursive; 
     font-size: 100px; 
     color: white; 
     text-shadow: 4px 4px 4px #000; 

     background-color:blue; 

     width: 100%; 
     height: 100%; 
     margin: 0; 
    } 

    a { 
     border: 1px solid black; 
    } 

    div { 
     position:absolute; 
     height:100%; 
     width:100%; 
     display: table; 
    } 

    h1 { 
     display: table-cell; 
     vertical-align: middle; 
     text-align:center; 
    } 

    a:visited, a:active { 
     text-decoration: none; 
     color: white; 
    } 

    a:link { 
     text-decoration: none; 
     color: white; 
     text-shadow: 0px 2px 3px rgba(255,255,255,.25); 
     -webkit-background-clip: text; 
      -moz-background-clip: text; 
       background-clip: text; 
    } 

    a:hover { 
     text-shadow: 4px 4px 4px #000; 
     color: white; 
    }

VIOLON: http://jsfiddle.net/8Huu7/10/

Source

2013-08-12 Keven

Ceci est plus délicat qu'il n'y paraît, peut-être que les coordonnées de zone vous aideront? http://www.w3schools.com/tags/att_area_coords.asp – lostphilosopher

@lostphilosopher J'ai effectivement regardé dans les coordonnées de la zone, mais je pense qu'ils ne s'appliquent qu'aux images, pas de texte ... – Keven

En plus de répondre programminginallston vous pouvez également ajouter le débordement caché et élargir la boîte, donc:

a { 
    display: inline-block; 
    line-height: 1em; 
    overflow: hidden; 
    width: 180px; 
}

Bien que ne sature H, malheureusement.

Source

2013-08-12 22:38:03

Merci. le débordement caché devrait me donner ce que je veux. Le seul problème est le potentiel pour couper les choses .... – Keven

Pour compliquer les choses encore plus. J'utilise des polices web, donc si le navigateur ne reconnaît pas la police, alors la police de sauvegarde pourrait sortir des limites codées en dur. – Keven

mise à jour de votre css tag a pour inclure

a { 
    display: inline-block; 
    line-height: 1em; 
}

Vous devez changer le display afin que vous puissiez travailler avec la boîte de l'élément comme il est un bloc, tout en lui permettant de se déplacer en ligne avec le texte. Vous modifiez alors le line-height pour être seulement la hauteur du texte. Les navigateurs ajoutent généralement un plus grand line-height pour la lisibilité.

Voici la jsFiddle mise à jour: http://jsfiddle.net/QSL6T/

Source

2013-08-12 22:29:02 twinlakes

Au début, j'étais comme, Sweet! Ça marche! Cependant, vous remarquerez que si vous passez la souris près de chaque lettre, le lien est toujours "activé" même en dehors de la bordure. Qu'est-ce qui se passe avec ça? – Keven

Je pense que vous ne pouvez pas le faire parfaitement bien. C'est à voir avec l'espacement d'une police. Donc, vous devez jouer avec la hauteur de la ligne pour trouver le match parfait. – putvande

Je ne pense pas que cette réponse soit une solution. –

Cela se produit parce qu'il y a un espace réservé pour les signes diacritiques. Si vous vouliez montrer Á ou Ç, par exemple, il n'y aurait pas d'espace supplémentaire.

Une solution possible est de définir margin-top à votre texte et overflow: hidden à votre récipient. Here's an example fiddle.

Source

2013-08-12 22:48:04 Renato

+1 Pour l'explication des signes diacritiques. Je sais maintenant pourquoi. – Keven

-1

Peut-être que cela?

a { 
     border: 1px solid black; 
     display: block; 
     padding-bottom:200px; 
     height: 10px; 
     width: 150px; 
    }

Source

2013-08-12 22:58:53

Réduire la zone cliquable pour le lien

Répondre

Questions connexes