[Solved] Using list item as a button

[emma]

Hi all,

I was trying to add a half transparent background for my selected navigation button, with the same background state for hovering, but ran into problems as I want to have a paragraph description under the button text (as seen here) because, as you all probably know, links are not valid inside paragraphs.
So I decided to set the background and hover state to my <li> instead which looks exactly how I want it. However, at the moment only the button text works as a link and not the paragraph included. (Hope this makes sense!)

Here is my current button code:

Code:

• Home

  take me home

• Contact

  get in touch

and my css:

Code:

ul#nav { width: 170px; height: 366px; display: block; }
ul#nav li { width: 170px; height: 40px; }
ul#nav li p, ul#nav li p a { display: block; margin-left: -5px; color: #ccc; text-transform: none; font-size: 8pt; padding-top: 0px;}
ul#nav li a { margin: 2px 0 0; padding: 4px 7px 0px; width: 160px; display: block;}
ul#nav li:hover { background:url(“selected.png”) center top no-repeat; width: 170px; height: 40px; }
ul#nav li#selected { background: url(“selected.png”) center top no-repeat; width: 170px; height: 40px; }
ul#nav li#selected a { color:#ccc; }

#nav-0 { color: #0C0; }
#nav-1 { color: #900; }

If anyone knows how to make the entire <li> background image clickable, I am very grateful for your help and promise to return the favour once I myself become a css guru!

Oh and also, is it ok to use <span> or is there a better option? I wasn’t sure how else to get the look I want.

Cheers,
Emma

P.S. Thanks Chris for an absolutely brilliant site, you are a legend!

[Author]

Posts