html - Limiting links to appropriate text -
i trying make navigation menu footer. it's going quite well, both contain links. , having trouble limiting "link click area" small square around text. can point cursor several px next name in menu , still hit link. how fix or rather: how limit link, hover function, appropriate text?
doing in html , css!
footer { font-family: moon flower bold; font-size: 40px; color: black; background: rgba(0,138,99,0.4); list-style-type: none; padding-bottom: 45px; } footer ul { list-style-type: none; margin: 0; padding: 0; } footer ul li { display: inline-block; float: left; width: 200px; } footer a:visited, a:link { color: black; text-decoration: none; } footer a:hover { background-color: grey; text-decoration: none; }
<footer> <ul> <li>© gruppe 3</li> <li><a href="kontaktos.html">kontakt os</a></li> <li><a href="links.html">links</a></li> </ul> </footer>
you can manage clickable space giving appropriate padding (in case, 0) link tag, eg.
html:
<a class='links' href='http//...'>link1</a> <a class='links' href='http//...'>link2</a>
css:
.links{ padding: 0; }
this result in making link text clickable.
Comments
Post a Comment