Home > DeveloperSection > Forums > HTML Lists with image bullets using clip property using CSS
Jeet Verma
Jeet Verma

Total Post:110

Points:776
Posted on    August-19-2013 7:08 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1021  View(s)
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.



shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Points:735
Posted on    August-19-2013 8:22 AM

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


Don't want to miss updates? Please click the below button!

Follow MindStick