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

[clintonG]

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/

[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 -

[chris]

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

[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

[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

[clintonG]

<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

[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

[clintonG]

<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

[Harlan Messinger]

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.

[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

[clintonG]

<snip />

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

<%= Clinton Gallagher

[clintonG]

<snip />

That's perfect. Thanks.

<%= Clinton Gallagher