making block level elements clickable links

Question

I have the following design problem. I have a list of items and I want to make the whole of each of the first li to be a clickable link. I have tried adding a link in each li, making it a block level element and positioning it absolute, but that doesn't work because the parent and all li's are floated left for layout purposes. Any help would be appreciated, thanks

<ul style='float:left;width:x>

   <li>
      <ul>
         <li>Title</li>
         <li>Description</li>
      </ul>
   </li>

   <li>
      <ul>
         <li>Title</li>
         <li>Description</li>
      </ul>
   </li>

   <li>
      <ul>
         <li>Title</li>
         <li>Description</li>
      </ul>
   </li>

</ul>

Answer 1

I recommend this: http://www.alistapart.com/articles/taminglists/

Answer 2

Define the with something like this:
HTML:

<a class="button">

CSS:

.button {
    border: 1px solid #000;
    background: #ccc;
    width: 60px;
    padding: 5px;
    }

This way the whole "a" division will be clickable.

Answer 3

If the parent li has position: relative, you can position things absolutely inside it without messing with the way the parent floats around.

Another, somewhat inelegant solution would be to add an onclick event to each of the parent lis, and use JavaScript to change the URL. Also, add cursor: pointer to your CSS to make it look like a link. But as I said, this is not elegant.

Answer 4

Have you thought about jQuery as an option? Its probably not the best solution but it would work. so i would rig something up like this:

$("ul li:first-child").bind('click',function(){
    // click event here.
    alert("Boom!");
    $(this).find("li a").trigger('click');
});

and i would have your code look like this:

<ul>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
</ul>

Answer 5

Put the links in the li and use display:block. Don't absolutely position them.