How To Make Clickable Areas Bigger
Posted on April 1, 2011 | No Comments
One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links , the actual ‘clickable’ area should be as large as possible.
How Is It Done?
First let’s create our simple unstyled navigation, using an unordered list:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Now we add some CSS to turn it into a horizontal navigation bar:
ul {
list-style-type: none;
overflow: auto;
padding: 0;
margin: 0;
}
ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
}
Without any margins or padding, the navigation items are squeezed into their containing boxes. We can use padding on the
Enter the magic ingredient:
ul li a {
display: block;
text-decoration: none;
}
By setting the display property of the tag to “block”, the link expands to fill the entire area of its container. Now we can use padding on the tag to set the size of the clickable area:
ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
Internet Explorer and the Holly Hack
What’s that you say? It’s not working? You must be part of the 85% or so of internet users that are using Internet Explorer; unfortunately, IE has a bit of a blind spot where floated elements are used – specifically, it requires a width to be provided for a floated element. But we don’t want to give our list items a width! Never fear, another IE bug means that we can specify a tiny width and the
* html ul li a {
width: 1%;
}
The ”* html” part is a CSS hack to only allow IE browsers to ‘see’ the rule (the opposite hack to exclude IE browsers would be “html > body”).
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.