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

Home Forums CSS List style image using sprites?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #33469

    Is it possible to use a sprite for a list-style-image, i have a large sprite i also want to include my bullet styles into the sprite and use it for the lists, please let me know how to do it if possible, is this the right approach or should i use the image separately for the list-styles…



    Well if you are not using another background image for your li, I would assign the LI some left-padding and place the bg image for those. For example:
    <br />
    <!-- HTML: --><br />
    <ul><br />
    <li class="li_2">List Item</li><br />
    </ul><br />
    <!-- CSS: --><br />
    .li_2 {<br />
    list-style-type:none;<br />
    margin:0;<br />
    padding:0 0 0 20px;<br />
    background: transparent url('[image/url]') no-repeat 0 -15px;<br />
    }<br />
    <br />

    This is just an example of course but I know it works.


    I just went back and reread your post and would like to know: Are these styles for a specific list or is this something you want all of your lists to reflect?

    If you wanted what I said previously to reflect throughout all of your lists, you can obviously apply similar css to your li simple selector and have that ripple through the site.

    If you want more control you can just add specify a class name for the ul and give that only the the lists you would like to see the styles on. for example:

    • List Item

    • List Item

    • List Item

    .spec_list li {
    padding:0 0 0 20px;
    background: transparent url('[image/url]') no-repeat 0 -15px;

    By applying that class to any ul it will reflect on the children li


    Thanks a lot for the help Sean, actually its only for a specific set of lists not all of them, will check it out and let you know for any issues…

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