1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HOWTO: Replace bullets with custom graphics?

Discussion in 'CSS' started by olddocks, Oct 23, 2007.

0
  1. #1
    anybody know how to replace bullets <ul> with custom graphics. Also how do i make padding and alignment?

    should i use css?
     
    olddocks, Oct 23, 2007 IP
  2. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Something like this in your stylesheet will sort it:

    
ul {
list-style-type: none;
}

li {
background: url(your-image.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 10px;
}
    Code (markup):
     
    webdesigner, Oct 23, 2007 IP
    olddocks likes this.
  3. olddocks

    olddocks Notable Member

    Messages:
    3,275
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    215
    #3
    thanks mate :) +rep added
    i actually tried that in my css, and its not working. What could be the problem?
     
    olddocks, Oct 23, 2007 IP
  4. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #4
    got a link... PM it to me if you dont want it public and i'll take a look.
     
    webdesigner, Oct 23, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    The problem is you're not linking anybody to your markup.
     
    soulscratch, Oct 23, 2007 IP
  6. olddocks

    olddocks Notable Member

    Messages:
    3,275
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    215
    #6
    Here is my css code. I have never used much of the code, just a single line. But this should work isnt it. I have not defined <li>

     
    olddocks, Oct 23, 2007 IP
  7. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The book i read does it just like webdesigner said. It uses background images. Maybe there is a good reason why it didn't suggest using list-style-image.
     
    Arnold9000, Oct 23, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    I picked up the solution from Web Standards Solutions, which was written 3 before CSS Mastery. The reason is because list-style-image is inconsistent (spacing and such) across browsers, and background is very consistent.
     
    soulscratch, Oct 23, 2007 IP