CODEWITHSUNDEEP
htmlcsshtml-lists
mcbeav
mcbeav

Reputation: 12275

Style UL with Sprite Image

Wondering if it is possibly to use a sprite image to replace the ul list default bullet. Is this possible?

Upvotes: 3

Views: 1126

Answers (2)

alex
alex

Reputation: 490153

Lists have the list-style-image property, but it is often too inflexible.

You can usually get it working with something like this...

ul {
   list-style: none;
}

ul li {
   padding: 3px 0 3px 35px;
   background: url(images/layout/bullet.png) no-repeat left center;
}

A sprite is not generally a good idea for this - unless you space them all vertically and allow sufficiently enough vertical margins so the list item doesn't grow too large and have other sprites bleed through.

Upvotes: 3

Anish Joseph
Anish Joseph

Reputation: 1026

ya sure its possible

first you remove the bullet style for the li tag

list-style:none;

Then give background-image for the li tag

Upvotes: 2

Related Questions