The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Using list item as a button

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #25841

    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:

    and my css:

    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.


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

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.