...

View Full Version : Align custom bullets



Crazydog
05-22-2007, 01:08 PM
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)?

http://private.wiishare.org/ex.jpg

koyama
05-22-2007, 09:24 PM
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 (http://www.w3.org/TR/css3-lists/#markers)

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

Arbitrator
05-22-2007, 09:49 PM
An alternative is to use background images to create bullets. See my live example (http://www.jsgp.us/demos/CF114078.html).

koyama
05-22-2007, 09:59 PM
An alternative is to use background images to create bullets. See my live example (http://www.jsgp.us/demos/CF114078.html).
That was clever. It is even valid with respect to semantics. I'll remember that in the future.:thumbsup:

Crazydog
05-22-2007, 10:57 PM
I styled it with


#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:

http://private.wiishare.org/missing.jpg
(half of the image isn't there)

194673
05-22-2007, 11:36 PM
Try having the background image at 0,0, but then padd the left side by 57px (image width+5px padding)

Arbitrator
05-22-2007, 11:37 PM
I styled it with


#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:

http://private.wiishare.org/missing.jpg
(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).

194673
05-22-2007, 11:42 PM
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.


#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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum