Menu
I have one word on a page and each separate letter is a link. I'd like to reduce the size of the clickable area so that there is no space surrounding the letters. Right now it's fine on the left and right of each letter, but there is too much space above and below each letter. I included a border around the links for illustrative purposes (see fiddle below).
Any ideas on how?
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;
}
FIDDLE: http://jsfiddle.net/8Huu7/10/
475
In addition to programminginallston answer you can also add overflow hidden and widen the box, so :
a {
display: inline-block;
line-height: 1em;
overflow: hidden;
width: 180px;
}
Although that does clip the H, unfortunately.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
