Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

How to make a custom HTML symbol-style bullet in CSS lists?


  • Please log in to reply
7 replies to this topic

#1 Bumdark

Bumdark

  • Members
  • 34 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Local time:03:39 AM

Posted 10 September 2009 - 01:57 PM

Hi. I have a really simple question regarding how to do something with CSS lists, and I think this is the right place to ask. (If not, let me know. =))

I'm trying to modify the default bullet styles for unordered lists (<ul>). But instead of anything predefined ("circle", "square", etc.) or an image, I'm trying to use the HTML symbol "»" (written "&_#187;", without the underscore, in HTML code). Problem is, I've tried all sorts of things and nothing seems to work. I've done some searching but I haven't found how to use HTML symbols for bullets.

Anyone know how to do this? I just want something like this:

* * * * * *
Begin unordered list

» Item 1
» Item 2

» Item 2-A
» Item 2-B

» Item 3

End unordered list

* * * * * *
And so forth. All I need to learn to do is how to use "»" as bullets.

Thanks in advance. =)

Edited by Bumdark, 10 September 2009 - 01:58 PM.

'Foreman's not as easy as Cameron. But of course, who is?'
'I'm in the room!'

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:39 AM

Posted 10 September 2009 - 02:16 PM

http://www.alistapart.com/articles/taminglists/

#3 Bumdark

Bumdark
  • Topic Starter

  • Members
  • 34 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Local time:03:39 AM

Posted 10 September 2009 - 02:32 PM

@Groovicus:
Actually, that was the very first article on the matter that I found and read. It explains how you can add whatever symbol you want manually for each list element, within the <li></li> tags. What I'm wondering is if it's possible to automatically make all the tags into said desired symbol, instead of inputting them one at a time. Ie., is it possible to set a global rule, and have all the standard list bullets on a webpage turn into the symbol?
'Foreman's not as easy as Cameron. But of course, who is?'
'I'm in the room!'

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:39 AM

Posted 11 September 2009 - 03:17 PM

Yes. The article explains exactly how to create a CSS class....

#5 Wolfy87

Wolfy87

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:07:39 AM

Posted 27 September 2009 - 04:43 PM

You need to do this, it replaces tbe default bullet with your chosen image i would go with a 16 x 16 px image :thumbsup:

li {
list-style-image:url("/images/blueball.gif");
}

Hope this helps, Wolfy87.

#6 Bumdark

Bumdark
  • Topic Starter

  • Members
  • 34 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Local time:03:39 AM

Posted 01 October 2009 - 04:10 PM

Whoops! Missed your reply, Wolfy87. That’s exactly what I ended up doing, and now it works perfectly. Thanks anyway. =)
'Foreman's not as easy as Cameron. But of course, who is?'
'I'm in the room!'

#7 Wolfy87

Wolfy87

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:07:39 AM

Posted 02 October 2009 - 11:12 AM

No problem =]

#8 aliciajames

aliciajames

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:02:39 AM

Posted 17 February 2010 - 01:03 AM

http://www.alistapart.com/articles/taminglists/


Thank you so much for sharing this valuable piece of information, i was looking for it and it resolve my many issues which i was facing these days.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users