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



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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: