List Type Image Query
I have a green triangular image that I would like to use against particular list items but unsure how to do.
I created a class called .bullet and set list-type-image to my green triangul开发者_C百科ar image.
Then set <ul class="bullet"><li>a</li></ul>
but to no avail as I would've thought that "a" would come up as "> a"
Any ideas?
Thanks.
Can you post your CSS?
it should look like this:
list-style-image: url(greentriangle.gif)
Another approach is to use a CSS background image:
ul.bullet { list-style-type: none; margin: 0; padding: 0; }
ul.bullet li { background: url(greentriangle.gif) top left no-repeat; padding-left: 10px; }
<ul class="bullet">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
If you wanted to only apply the green triangle to specific list items, you could have a normal triangle image in addition to your green triangle image:
ul.bullet { list-style-type: none; margin: 0; padding: 0; }
ul.bullet li { background: url(normaltriangle.gif) top left no-repeat; padding-left: 10px; }
ul.bullet li.green { background: url(greentriangle.gif) top left no-repeat; padding-left: 10px; }
<ul class="bullet">
<li>One</li>
<li class="green">Two</li>
<li>Three</li>
</ul>
You'll probably also need to adjust the padding and the positioning of the images you used to make them look just right.
Hope that helps you, tonsils!
精彩评论