 Moderator |
|
Ik haal altijd de volgende truuk uit: stop de hyperlink in een (floating) block (die je de goede breedte, hoogte etc. geeft), en vul deze dan vervolgens uit door van de hyperlink ook een block-element te maken met breedte en hoogte 100% van de beschikbare ruimte = afmeting van het omvattende block.
Zoiets dus:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu knoppen</title>
<style type="text/css">
<!--
div.menu { width: 200px; background-color: #d0d0ff; }
div.menu ul { list-style: none; margin: 0; padding: 0; }
div.menu ul li { display: block; width: 80%; height: 25px; margin: 0 10%; }
div.menu ul li a { display: block; height: 100%; width: 100%; line-height: 25px; text-align: center; border: 1px solid #ffffff; border-radius: 1em; }
//-->
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="" title="een">een</a></li>
<li><a href="" title="twee">twee</a></li>
<li><a href="" title="drie">drie</a></li>
<li><a href="" title="vier">vier</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- div.menu { width: 200px; background-color: #d0d0ff; } div.menu ul { list-style: none; margin: 0; padding: 0; } div.menu ul li { display: block; width: 80%; height: 25px; margin: 0 10%; } div.menu ul li a { display: block; height: 100%; width: 100%; line-height: 25px; text-align: center; border: 1px solid #ffffff; border-radius: 1em; } //--> <li><a href="" title="een">een </a></li> <li><a href="" title="twee">twee </a></li> <li><a href="" title="drie">drie </a></li> <li><a href="" title="vier">vier </a></li>
Zo wordt ook het klikbare deel van een link ook groter, wat gewoon een stuk fijner navigeert dan precies op zo'n tekstlink klikken.
EDIT: spelling, en wat HTML/CSS cleanup. |
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
