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>&copy; 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

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -