Clickable button sizes

820ce9018b365a6aeba6e23847f17eda
0
geon 101 Jan 16, 2012 at 12:55

The new forum layout is great!

I’ve just notice a “bug” in the design: The buttons in the menu are not clickable outside of the actual text.

This is a common mistake (I work with that kind of stuff), and it makes the buttons unnecessarily hard to click. Especially when the hover-effect works over all of the button, there is no connection between the visual state and the “clickabillity”.

Solution:

Instead of

<li><a href="/categories/news">News</a></li>

use

<li><a href="/categories/news"><span>News</span></a></li>

and apply the margins etc. to the span-element instead of the a-element, to force the a-element to completely fill the li-element.

3 Replies

Please log in or register to post a reply.

87e614b8b888bb2c4485c1ac16d8c779
0
moe 101 Jan 16, 2012 at 15:46

Or add display:block; to your css for the links (a-element).

820ce9018b365a6aeba6e23847f17eda
0
geon 101 Jan 16, 2012 at 23:22

@moe

Or add display:block; to your css for the links (a-element).

Ah, that would work, if you use padding to make them bigger.

87e614b8b888bb2c4485c1ac16d8c779
0
moe 101 Jan 17, 2012 at 11:20

Yes, either change is likely to mess up something in the layout and requires some more adjustments. Assuming that the navigation is generated rather than hard coded, adjusting the css might be easier (I usually have some xml defining the navigation). The display options are often forgotten. Choosing the proper display option potentially saves some headache. display:table-cell; might also work, but I haven’t tested it. Usually I stick to display:block; as this works the same way across all browsers. Depending on your layout the padding is not required. It should use the block size from it’s parent element, if the parent element is a block level element such as an li-element. However, it is good practice to define the padding anyway to ensure it will be the same across different browsers.

At any rate, I agree that if you have a hover effect, you also expect it to work as a link when beeing clicked.