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]

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

clintonG wrote:
[color=blue]
> 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?[/color]

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@leipold.ws]

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

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]

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

chris@leipold.w s wrote:
[color=blue]
> 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;[/color]

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]

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

Els wrote:
[color=blue]
> chris@leipold.w s wrote:
>[color=green]
>> 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;[/color]
>
> That would only look good on list items that are guaranteed not to
> wrap.[/color]

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]

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

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

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

clintonG wrote:
[color=blue]
> <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.[/color]

You mean like this?

http://www.w3.org/TR/CSS21/colors.html#propdef-background

[color=blue]
> // example
> background:url( image.gif) no-repeat 0px .2em;
>
> 0px top, bottom?
> .2em right, left?[/color]

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]

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

<snip />
[color=blue]
> You mean like this?
> http://www.w3.org/TR/CSS21/colors.ht...def-background[/color]

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

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

clintonG wrote:[color=blue]
> <snip />
>[color=green]
>>You mean like this?
>>http://www.w3.org/TR/CSS21/colors.ht...def-background[/color]
>
>
> <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[/color]

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]

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

clintonG wrote:
[color=blue]
> <snip />
>[color=green]
>> You mean like this?
>> http://www.w3.org/TR/CSS21/colors.ht...def-background[/color]
>
> <snip />
>
> Yes but...[/color]

:-)
[color=blue]
> I hoped to find a quick reference that is easier to read than 'official'
> specifications which is why I think they call them 'quick' :-)[/color]

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]

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

<snip />

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

<%= Clinton Gallagher

[clintonG]

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

<snip />

That's perfect. Thanks.

<%= Clinton Gallagher