Code Wordpress

Linking Entire List Element

I needed a solution for making an entire list element click-able, not just the anchor text.  At the site I made for the Kirksville Brewfest, the entire background color of the list element on the enter page/style changed color, making the user think they could click on it, but only the text was click-able.  The solution I used was to take the anchor text and make its background fill the entire space.  Kirksville brewfest list code:

ul.styles li a:link,
ul.styles li a:visited {
color: #....;
display: block;
width: 100%;
height: 100%;

Basically, the anchor text fills up the entire li element when there’s an anchor in the ul class “styles”.


By Jerry Jones

JavaScript Engineer for Automattic, living simply in rural MO.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s