HTML LISTS WITH IMAGE BULLETS USING CLIP PROPERTY USING CSS

Jeet Verma

Total Post:110

Points:776
Posted by  Jeet Verma
 1350  View(s)
Ratings:
Rate this:
Hi Developers!

Is it possible to create HTML lists with image bullets using the clip property? I've been trying to get it to work but I can't seem to get it right. 

I would appreciate some assistance. 

Here is my initial HTML code: 

<div class="my-clip-list">

<ul>

   <li class="one">One</li>

   <li class="two">Two</li>

   <li class="three">Three</li>

</ul>

</div> 

And my initial CSS: 

.my-clip-list {position: relative;}

.my-clip-list ul {position: absolute;}

.my-clip-list ul li {line-height: 24px; content:url([url_of_sprite]);}

.my-clip-list ul li.one {clip: rect(top right bottom left)}

.my-clip-list ul li.two {clip: rect(top right bottom left)}

.my-clip-list ul li.three {clip: rect(top right bottom left)} 

I did this but it doesn't seem to be working. Please note that I have put in the generic info for clip property, in my actual CSS I have real pixel values. This is just to illustrate what I'm doing. 

Kindly assist if you can. 

Thanks.

  1. shreesh chandra shukla

    Post:105

    Points:735
    Re: HTML Lists with image bullets using clip property using CSS

    Hi!

    This is mostly correct. However, since OP is targeting the bullets, this won't work even if the li are set to absolute. He will need to use: before or :after to get this effect and disable bullets with list-style: none

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!