CODEWITHSUNDEEP
csslistclickableunordered
Ruf1
Ruf1

Reputation: 179

How can I make the whole area of an unorderd list clickable?

I would like to make the entire area of my un ordered list clickable for a single URL. So far without luck.

The CSS markup so far is as follows:

#artListContainer {
margin: 0 0 0 0;
}

#artListContainer ul {
list-style-type: none;
width: 590px;
margin: 20px 0 0 0;
}

#artListContainer h3 {
font: bold 18px/1.5 Helvetica, Verdana, sans-serif;
color:#333333;  
}

#artListContainer li img {
float: left;
margin: 0 15px 0 0;
}

#artListContainer li p {
font: 200 12px/1.5 Helvetica, Verdana, sans-serif;
}

#artListContainer li {
padding: 10px;
overflow: auto;
}

#artListContainer li:hover {
background: #eee;
cursor: pointer;
}

My HTML markup currently looks like this:

<div id="artListContainer">
 <ul>
  <li>
  <img src="themes/default/templates/articles/articlethumbs/8.png">
  <h3>Title goes here</h3>
  <p>description goes here.</p>
  <span style="font-weight:bold">Views:&nbsp;</span>(327)
  &nbsp;&nbsp;&nbsp;
  <span style="font-weight:bold">Comments:&nbsp;</span>(4)
  &nbsp;&nbsp;&nbsp;
  <span style="font-weight:bold">Likes:&nbsp;</span>(4)
  </li>
</ul>
</div>

Many thanks in advance for any help or suggestions.

Upvotes: 0

Views: 72

Answers (2)

arroni
arroni

Reputation: 364

As above you can wrap an anchor tag around everything. That's only valid code from HTML5 so if you are using HTML4 it won't validate.

It is poor for accessibility doing it that way though. Ideally you should have a single link and bind its href to the container element with Jquery.

Upvotes: 0

usernolongerregistered
usernolongerregistered

Reputation: 390

This is a thing.

<a href="#">
<ul>
   <li>Stuff</li>
   <li>Stuff</li>
   <li>Stuff</li>
   <li>Stuff</li>
</ul>
</a>

Upvotes: 1

Related Questions