3 replies to this topic

[geon]

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.

[moe]

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

[geon]

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

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

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

[moe]

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.