Grow your CSS skills. Land your dream job.

help with list items

  • # December 1, 2009 at 10:31 pm

    I am trying to make a list item with a background image and can not get it done

    I want the list to display: inline. So I did this

    ul#thumbGallery li {
    display: inline;
    padding: 10px;
    width: 11px;
    height: 11px;
    }

    Then I made a new class to hold the background image that I need

    .activeDot {
    height: 11px;
    width: 11px;
    background: url(images/aciveDot.png);
    }

    .inactiveDot {
    height: 11px;
    width: 11px;
    background: url(images/inaciveDot.png);
    }

    then on the list I did

    <ul>
    <li class="activeDot"></li>
    <li class="inactiveDot"></li>
    <li class="inactiveDot"></li>
    <li class="inactiveDot"></li>
    </ul>

    This list will not show the background image. the only way I can get them to show is by placing the image directly into the list. Which I do not want to do. I want to use jquery to swap the image. So when the second list item is clicked, the image will change from inactive to active and the first list item will change from active to inactive.

    So what I want is to use jquery add and remove class function. But I can not get the background image to show on the list. I don’t want to put any content into the list item. Could this be the problem?

    # December 1, 2009 at 10:39 pm

    You know what? I cheated and just used divs instead of a list. I hate using lists

    # December 2, 2009 at 12:00 am

    The proper way to implement this would have been to apply the bg image to the li element. and use padding to move the text away from the image. adjust bg image accordingly using background positioning.

    # December 2, 2009 at 12:02 am

    I know that. But as I said in my post, I don’t want to put any content into the li element. without that content, I couldn’t get the li element to expand to show the background image. even by providing a width and height.

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".