Latest Lists

How can I make an HTML list item and its background a link?

I made a list (<ul>) with css and html. It's simply a navigation bar with no bullets and a background that looks like a button. The text is clickable but the button behind the text (a background image of the list item) is not. I want to make it clickable with the same link the text has. I can use PHP if I need to.

Public Comments

1. Add <a> tags to the listitems and then use CSS to resize them to the complete area of the listitem. Gonna need to turn <a> into a block element though.. as inline elements can't normally have a height. example: a.menuitem { display: block; width: 100%; height: 100%; } .... .... <li><a class="menuitem" href="#">Text</a></li> Hope this works for you
2. First you need valid html. --- <ul class="link-list"> <li><a href="#link1">Link1</a></li> <li><a href="#link2">Link2</a></li> <li><a href="#link3">Link3</a></li> <li><a href="#link4">Link4</a></li> </ul> Secondly you need valid CSS. --- ul.link-list li{ list-style: none; position: relative; display: block; } ul.link-list li a { display: block; padding: 5px 5px 5px 25px; width: 75px; height: 25px; background-image: url(pathtobackgroundimage.gif); background-repeat: no-repeat; background-position: left top; } Basically I make the list items block elements with no list-style. I make the links block elements with a background image set to the left. I add extra padding to the left so the text doesn't overlap the background.