SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: list bullets

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Someone told me that you can use CSS to change the browser standard bullets for lists into your own image. Is this true? How does it work?

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Toronto, Ontario, Canada, Earth
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, you can indeed do that, with the help of style sheets. try this code:

    Code:
    <UL STYLE="list-style-image: url(http://www.yoursite.com/bullet.gif)">
    <LI>Bullet 1</LI> 
    <LI>Bullet 2</LI>
    </UL>
    hope this helps,

    Jason Weinstein
    webmaster@MaximumEdge.com
    http://www.MaximumEdge.com/

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That was exactly what I was looking for...

  4. #4
    SitePoint Zealot cokeman's Avatar
    Join Date
    Dec 2000
    Location
    So. California
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about the digression, but along the lines of bullets, lists and styles, how can I get the text of a bullet to stay left-aligned if the text wraps to the next line?

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure what you mean Cokeman...can you post an example?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think he wants to have:

    Code:
    *   Bla bla bla bla
    Bla bla bla
    Instead of:

    Code:
    *   Bla bla bla bla
         Bla bla bla bla
    I think he wants to get rid of the indent. I don't know how to do that. Perhaps set indent on a negative value with CSS?

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Toronto, Ontario, Canada, Earth
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this isn't really considered proper html, but if you omit the <ul> it seems to do the trick:

    Code:
    <li>bullet 1</li>
    <li>buller 2</li>
    hope this helps,

    Jason Weinstein
    webmaster@MaximumEdge.com
    http://www.MaximumEdge.com/

  8. #8
    SitePoint Zealot cokeman's Avatar
    Join Date
    Dec 2000
    Location
    So. California
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh* These are the times I feel like an absolute moron -- The page I was given to work with didn't have the <ul></ul> tags, so I was getting what was in maximar's first example, while I wanted what was in the second example.

    To try not feeling so dumb, here's a follow-up question -- When I use the <ul><li></li></ul> lists, is there a way to get the list to not have the indent on the left side (between the margin and the bullets)?

    Code:
    |*
    ^^
    |bullet
    margin
    
    instead of 
    
    |     *
    ^     ^
    |     bullet
    margin

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think so...however, you can get that effect using tables. Take a look at this page.

    http://www.booksamillion.com/ncom/bo...3638462&help=1

    Look at the Frequently Asked Questions section.

    "I purchased a Millionaire's Club card in a store. Can I use it to get my discount online?"

    it wraps just like you are looking for. It's easy to do too.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    SitePoint Zealot cokeman's Avatar
    Join Date
    Dec 2000
    Location
    So. California
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sometimes things are just so obvious when you think about it Maybe I just need more coke to wake up or something!

  11. #11
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can change the margin of the list with css, just be careful that you don't chop the bullets out as well by setting the margin too narrow.

    Code:
    <style type="text/css">
      ul {margin-left: 20px}
    </style>

  12. #12
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shane's application is correct. Using the Margin attribute.

    But warning, Netscape 4 isn't good with negative values for margins, which in this case requires just that.

    The result/outcome in Netscape 4 would be the first few characters of the first word overlapping the bullet.

    My suggestion would be not to use Bullets if you want that result.

    I have a nifty workaround, which is to use:
    '&#0183' as the bullet item.

    If you view my web site, I use that everywhere.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2000
    Location
    Ft. Worth, TX, USA
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by cokeman
    To try not feeling so dumb, here's a follow-up question -- When I use the <ul><li></li></ul> lists, is there a way to get the list to not have the indent on the left side (between the margin and the bullets)?

    Code:
    |*
    ^^
    |bullet
    margin
    
    instead of 
    
    |     *
    ^     ^
    |     bullet
    margin

    Instead of using the usual <ul><li></li></ul>, you can simply put
    Code:
    <pre>&149;</pre>
    (minus the pre tags) before each piece of text you want to bullet. This will give you a bullet without it being a list per se.
    Last edited by Pat Burroughs; Apr 30, 2001 at 12:38.

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2000
    Location
    xyz
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't work on Macs. I recommend using a small gif image and setting the vspace and hspace to something like 5


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •