SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images instead of bullets in lists

    I am wondering how I can use a <li> tage, but instead of a bullet, have an image show. I'm thinking that I should go into css, and do something like this:

    li {
    background-image: src(bullet.gif);
    }

    Or something like that. Any suggestions?
    Content Writing Service - Get custom SEO articles for 10$

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You will need to do something like this:
    Code:
    ul {
       list-style-image: url('/path/to/image.gif');
    }
    Just change the image path to match that of your image .

  3. #3
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup that did the trick. Pretty cool effect!
    Content Writing Service - Get custom SEO articles for 10$

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh that's something I've been meaning to ask for a while

    -Sam
    Sam Hastings

  5. #5
    ********* Shroom mydster's Avatar
    Join Date
    Nov 2002
    Location
    tpyge
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, with apostrophes they can be omitted right?

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mydster
    Yeah, with apostrophes they can be omitted right?
    The quoting around the image path can be omitted yes.

  7. #7
    ********* Shroom mydster's Avatar
    Join Date
    Nov 2002
    Location
    tpyge
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    I've seen it both ways and it just dawned on me to ask...

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    anderson
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its possible to do it with tables as well right?

    Probablly more work to do

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by neliconcept
    its possible to do it with tables as well right?

    Probablly more work to do
    More work, more code, etc. Not worth it IMO.

  10. #10
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Code:
    ul {
       list-style-image: url('/path/to/image.gif');
    }
    Does that work in all browsers? Any little "quirks" I should be aware of?
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by firegryphon3207
    Does that work in all browsers? Any little "quirks" I should be aware of?
    All current browsers (IE5+Win/Mac, NN6+, Opera, Safari, Konqueror).

  12. #12
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    All current browsers (IE5+Win/Mac, NN6+, Opera, Safari, Konqueror).
    Sounds like a good candidate for my "great experiment"
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.

  13. #13
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What the heck are safari and konqueror?!
    Content Writing Service - Get custom SEO articles for 10$

  14. #14
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Browsers. I've used Konqueror a couple of times before on Linux. I think Safari may be a Mac OS browser

    -Sam
    Sam Hastings

  15. #15
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having seen a lot of pages using tables for this kind of thing - yes, you can do it with tables, but it's horrible, takes at least four times as much markup, and is a nightmare to maintain.

    To expand on what Sam said:
    Safari is now the "default" browser shipped with new Macs. It's based on an enhanced version of the open-source KHTML engine.
    KHTML is also the heart of Konqueror, which is the default browser of the KDE desktop environment for Linux.

    Re: browser compatiliblity: Netscape 4 doesn't do list-style-image. There's a surprise. The good news is that NN4 just quietly ignores it, and users of that browser will see good old-fashioned bullet points instead, which is hardly a disaster.

  16. #16
    because you gotta have beer! firegryphon3207's Avatar
    Join Date
    Apr 2000
    Location
    Roxbury/Boston
    Posts
    479
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blufive
    Re: browser compatiliblity: Netscape 4 doesn't do list-style-image. There's a surprise. The good news is that NN4 just quietly ignores it, and users of that browser will see good old-fashioned bullet points instead, which is hardly a disaster.
    Graceful Degredation is good thing. I wanted to make sure it would put something in and not just leave it blank.
    Alone we can do so little; together we can do so much.
    -----------------------------------------------------
    tinyplanet.org <--a nifty spot.


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
  •