I would like to learn how I can make the whole li element below, to be clickable for target_url.

In this code, li box has greater width and height than the contained div's. So only the small part of the li box is clickable.

If I put the <li> </li> tag inside <a href> </a> tag then HTML validation fails.


                    <a href="target_url"><img alt="" src="images/member.jpg"/></a>
                    <a href="target_url">Martin</a>


ul li { background:#EAEAEA url(images/bgr.gif) no-repeat scroll left top; display:inline; float:left; height:110px; list-style-type:none; text-align:center; width:110px; }

4 answers

This was chosen as the best answer

Have you tried something like this?

        <a href="target_url"><img alt="" src="" /><br /><span>Martin</span></a>

li {position: relative;}
li div a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%}


Also, you could maybe consider using CSS to create a line-break between the image and name, instead of the <br />.

Answered over 8 years ago by Samuel Cotterall

Use this CSS:

li a {

And create the List like this:

   <li><a href="link.php">Link</a></li>

The display:block will cause the link to be as wide as the list, as long as you don't define a different width for the link.

Answered over 8 years ago by Sven Finke

May not be at all useful to you, but this is easily achieved with jQuery. Assuming the ul has an id of 'members', something like the following would do what you want:

$("#members li").click(function(){
        location.href = $(this).find("a").attr("href");

Obviously, you'd have to only have 1 href within each li tag.

You're then not using visual tricks to achieve something that isn't really a visual issue?

Hope this helps. Cheers, Terry

Answered over 8 years ago by terry_brown

jQuery has a plugin for that:


very easy.

Answered over 8 years ago by Tony Crockford