Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    224
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Align custom bullets

    I have some bullets in an unordered list.
    I have a custom 52x46 image set to be the bullets in my css, but the text appears at the bottom of the image.

    Is there any way to make the text appear in the center of the image (like my awesomely painte'd example shows)?


  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I don't think that you can control the exact position of the marker within CSS 2.1. In the future this may be possible within CSS3 using the ::marker pseudo element

    For now, you may have to manually shift the text by wrapping it in a span element and using relative positioning.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    An alternative is to use background images to create bullets. See my live example.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Arbitrator View Post
    An alternative is to use background images to create bullets. See my live example.
    That was clever. It is even valid with respect to semantics. I'll remember that in the future.

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    224
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I styled it with
    Code:
    #nav li {
    list-style: none;
    height: 35px;
    margin: 5px;
    padding: 0 0 0 35px;
    background: url("img/nav_button.gif") -23px center no-repeat;
    line-height: 35px;
    }
    but now it looks like this:


    (half of the image isn't there)

  • #6
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Try having the background image at 0,0, but then padd the left side by 57px (image width+5px padding)

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Crazydog View Post
    I styled it with
    Code:
    #nav li {
    list-style: none;
    height: 35px;
    margin: 5px;
    padding: 0 0 0 35px;
    background: url("img/nav_button.gif") -23px center no-repeat;
    line-height: 35px;
    }
    but now it looks like this:


    (half of the image isn't there)
    • Why does the background image have a negative horizontal position?
    • Why does the li element have a height of 35 pixels when the height of the image is greater than 35 pixels?
    • Why does the li element a left padding of 35 pixels when the image width is greater than 35 pixels?


    The example I referenced was just that: an example. Itís not meant so that you can copy and paste the values and expect it to work. If your image is larger, than your values will need to be larger (and vice versa).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    To be specific... line-height should be the height of your image you want for your bullet (46px) then the padding should be as I said your image width + 'x' amount of padding (52px + x). Lastly, the position of the background, should be 0 center.
    Code:
    #nav li {
    list-style: none;
    height: 46px; /* image height */
    margin: 5px;
    padding: 0 0 0 57px; /* image width + 5px */
    background: url("img/nav_button.gif") 0 center no-repeat; /* aligns left side of bullet w/ 0 */
    line-height: 46px;
    }


  •  

    Posting Permissions

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