469,327 Members | 1,275 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,327 developers. It's quick & easy.

Positioning list-style-image: url(image.gif); images

Hello,

I use small 15x15 images as 'bullets' in the list. The vertical center of
each image is well above the vertical center of the link item text. Damn if
I can't figure out how vertically align on center.

Does anybody have any tips?

<%= Clinton Gallagher
METROmilwaukee (sm) "A Regional Information Service"
NET csgallagher AT metromilwaukee.com
URL http://metromilwaukee.com/
URL http://clintongallagher.metromilwaukee.com/
Sep 30 '05 #1
11 24117
Els
clintonG wrote:
Hello,

I use small 15x15 images as 'bullets' in the list. The vertical center of
each image is well above the vertical center of the link item text. Damn if
I can't figure out how vertically align on center.

Does anybody have any tips?


li{
list-style:none;
background:url(image.gif) no-repeat 0px .2em; /* replace .2em by
whatever works for you */
padding-left:[width of image plus some space];
}

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Sep 30 '05 #2
Hi,
if you want the bullet-image centered you can use:
background:url(image.gif) no-repeat 0 50%;
or
background:url(image.gif) no-repeat 0 middle;

Chris

Sep 30 '05 #3
Els
ch***@leipold.ws wrote:
Hi,
if you want the bullet-image centered you can use:
background:url(image.gif) no-repeat 0 50%;
or
background:url(image.gif) no-repeat 0 middle;


That would only look good on list items that are guaranteed not to
wrap.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Beatles - You Won't See Me
Sep 30 '05 #4
Els
Els wrote:
ch***@leipold.ws wrote:
Hi,
if you want the bullet-image centered you can use:
background:url(image.gif) no-repeat 0 50%;
or
background:url(image.gif) no-repeat 0 middle;


That would only look good on list items that are guaranteed not to
wrap.


Plus 'middle' isn't a value for background-position.
Plus '0' isn't compatible with 'center'.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Beatles - What Goes On
Sep 30 '05 #5
<snip />

Thank you both. Els first solution works very well noting I need to use
inline declarations as I'm using a different image for each list item.

In closing, would either of you have a referral to a page that explains the
order and grouping syntax for the application of values to a specific
attribute? Especially when using the short form which I haven't memorized
yet.

// example
background:url(image.gif) no-repeat 0px .2em;

0px top, bottom?
..2em right, left?

<%= Clinton Gallagher
Sep 30 '05 #6
Els
clintonG wrote:
<snip />

Thank you both. Els first solution works very well noting I need to use
inline declarations as I'm using a different image for each list item.

In closing, would either of you have a referral to a page that explains the
order and grouping syntax for the application of values to a specific
attribute? Especially when using the short form which I haven't memorized
yet.
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background
// example
background:url(image.gif) no-repeat 0px .2em;

0px top, bottom?
.2em right, left?


In the background-position property, the first value is from the left,
the second is from the top.

So "0px .2em" means 0px from the left, .2em from the top.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Deep Purple - Burn
Sep 30 '05 #7
<snip />
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background


<snip />

Yes but...

I hoped to find a quick reference that is easier to read than 'official'
specifications which is why I think they call them 'quick' :-)
Furthermore, the attribute values for positioning are not consistent from
one element type to another which is why I need a quick reference.

// background-position (what other attributes may conform to this pattern?)
left, top

// margins and padding
top, right, bottom, left

Are there any other variants you may be aware of?

<%= Clinton Gallagher
Sep 30 '05 #8
clintonG wrote:
<snip />
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background

<snip />

Yes but...

I hoped to find a quick reference that is easier to read than 'official'
specifications which is why I think they call them 'quick' :-)
Furthermore, the attribute values for positioning are not consistent from
one element type to another which is why I need a quick reference.

// background-position (what other attributes may conform to this pattern?)
left, top

// margins and padding
top, right, bottom, left


I think that's basically it. For attributes that are intrinsically a
single pair of values, one horizontal and one vertical, the horizontal
one comes first: left, then top. This follows from the standard order
for coordinates on a two-dimensional graph: first the x value
(horizontal), then the y value.

Where there are up to four values, the order you show above for margins
and paddings seems to be the standard in CSS.
Sep 30 '05 #9
Els
clintonG wrote:
<snip />
You mean like this?
http://www.w3.org/TR/CSS21/colors.ht...def-background
<snip />

Yes but...


:-)
I hoped to find a quick reference that is easier to read than 'official'
specifications which is why I think they call them 'quick' :-)


I don't know of any quick reference, but maybe you haven't seen this
page yet:
http://www.w3.org/TR/CSS21/propidx.html
It may take a bit of practice before you decipher the values (and
order) given for 'background-position' quickly, but once you're used
to it, it's a quick reference, with links to more detailed
explanations when you need it.

[snip - answered by Harlan already]

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Pearl Jam - Deep
Sep 30 '05 #10
<snip />

x,y graphing is a perfect analogy. Thanks for that suggestion

<%= Clinton Gallagher
Oct 1 '05 #11
<snip />

That's perfect. Thanks.

<%= Clinton Gallagher
Oct 1 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Peter Cartwright | last post: by
6 posts views Thread by JD | last post: by
1 post views Thread by Mika M | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Purva khokhar | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.