Clickable button sizes

3 replies to this topic

#1geon

Senior Member

• Members
• 939 posts

Posted 16 January 2012 - 12:55 PM

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:

<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.

#2moe

Valued Member

• Members
• 276 posts

Posted 16 January 2012 - 03:46 PM

#3geon

Senior Member

• Members
• 939 posts

Posted 16 January 2012 - 11:22 PM

moe, on 16 January 2012 - 03:46 PM, said:

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

#4moe

Valued Member

• Members
• 276 posts

Posted 17 January 2012 - 11:20 AM

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.

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users