CSS How to display a single icon out of a matrix for a list item


Tags: css,image,html-lists

Problem :

I would like to use a single icon out of an icon matrix (with around 16 x 16 icons) as the bullet image for a list. I can position the background image with background-position, and repeat: norepeat. But this will display the whole line of the remainder of the matrix, so I'm looking for a way to crop the background image. (By using this I can simply add different background-position lines in my css for diferent states like open collapsed hover etc). It does not necessarily need to run on Internet Explorer. I've been looking to use generated content but I don't think it can't be achieved using that. Next step I will have jquery create a span or div before the text, but it would be nice if I can solve this using purely css.



Solution :

HTML

<ul>
 <li><a href="" title="">link#1</a></li>
</ul>

CSS

li {background: url(sprite.gif) no-repeat 0 0; padding: 0 0 0 16px;}
a {text-transform: uppercase;}

To show the 2nd icon in the 3rd row

li {background: url(sprite.gif) no-repeat 16px -48px; padding: 0 0 0 16px;}

NOTE : sprite.gif has 16 icons, each 16x16px, set in a 16x16 matrix


    CSS Howto..

    How to understand CSS Background-Position coordinates

    what is shape-id and how can I find it in a css file?

    How to use this CSS font technique?

    How to add CSS AnimationEnd event handler to GWT widget?

    HTML/CSS - how to position an image in the above the right and left corner of a panel

    How to apply css to 'text' and 'password' together [closed]

    how to give dynamic height in css

    How do you create tabstops in XHTML?

    How to have no border around a DIV

    How to make flexbox grid images responsive

    how create triangle using css [duplicate]

    How to create a box when mouse over text in pure CSS?

    How to center a Dijit Select widget?

    How do I place an image after a link?

    How to build those rectangular with picture and text css bootsrap? [closed]

    How can I make my web application look correct in IE 8 and 9? [closed]

    How can I properly add CSS and JavaScript to an HTML document?

    How to wrap text to fill a DIV (like in MS-Excel) [duplicate]

    How can I block clicks and Java Script in a HTML

    How to increase width of image when dimensions are not known in CSS?

    How i can make that mobile menu fill the 50% of the width of the screen in Wordpress?

    How to load CSS filed inside the body in JSP?

    how to achieve this effect with css html?

    How to access CSS on img tag

    How i put css on message of Hibernate validator anotation message of spring project

    How do I append jumping dots to a text in html and css

    How can I have a div/span “fill in” the remaining width/height of the page, and stay fixed in position?

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    how to get this modal window to work correctly?

    How to select a non unique element through CSS