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
Post a Comment