Grow your CSS skills. Land your dream job.

[Solved] Using list item as a button

  • # August 22, 2009 at 7:29 am

    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:

    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!

    # August 23, 2009 at 12:48 am

    post a link to your site. It’s easier to figure out what your problem is if we have the images and everything else to work with. The firebug plugin for firefox can also help you solve a lot of your problems. If you don’t have it, get it. In the mean time, post a link to your site. Also, have you thought about using jquery for this problem. It has the ability to add and remove classes when you click on something. So you might make the text the link, then add the class for the background of your button on hover and remove the class on mouse out. that should solve your problem.

    I packaged up a demo for you to see what I mean. If this is what you were wanting. It was tested in firefox and I.E 8. You can download it here

    http://www.creativeeventsdesign.com/Demo.rar

    # August 23, 2009 at 4:18 am

    why dont you try…..

    or

    test it out here: http://www.w3schools.com/HTML/tryit.asp … ink_target

    # October 3, 2009 at 9:38 am

    Amazing! Thank you so much Cybershot, this is exactly what I am after.
    Perhaps I didn’t make myself clear but the site I linked to, naamtravel.co.uk, is the project that I am working on. I kind of got it working with the hover buttons but without the paragraph text included in the link and nowhere near as smooth as your version. I had no idea jQuery could do that, very useful.

    I apologise for the very late reply, the project has been put on the shelf for a while and I just remembered now about this post.

    I can’t believe you made me a demo – once again, thank you so much! :D

    emma

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".