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


i use single icon out of icon matrix (with around 16 x 16 icons) bullet image list. can position background image background-position, , repeat: norepeat. display whole line of remainder of matrix, i'm looking way crop background image. (by using can add different background-position lines in css diferent states open collapsed hover etc). not need run on internet explorer. i've been looking use generated content don't think can't achieved using that. next step have jquery create span or div before text, nice if can solve using purely css.

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;} {text-transform: uppercase;} 

to show 2nd icon in 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 16x16 matrix


Comments

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

asp.net - In javascript how to find the height and width -

c# - DataTable to EnumerableRowCollection -