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.

HTML

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

CSS:

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

1
point
This was chosen as the best answer

Have you tried something like this?

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


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

--EDIT

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

Answered about 7 years ago by Samuel Cotterall
4
points

Use this CSS:

li a {
   display:block;
}

And create the List like this:

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

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 about 7 years ago by Sven Finke
0
points

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 about 7 years ago by terry_brown
0
points

jQuery has a plugin for that:

http://www.trovster.com/lab/plugins/fitted/

very easy.

Answered about 7 years ago by Tony Crockford