| Author |
Positioning list-style-image: url(image.gif); images
|
|
| clintonG 2005-09-29, 10:28 pm |
| 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/
| |
|
| 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@leipold.ws 2005-09-30, 3:17 am |
| 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
| |
|
| chris@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 wrote:
> chris@leipold.ws wrote:
>
>
> 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 2005-09-30, 6:28 pm |
| <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
| |
|
| 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.h...pdef-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 2005-09-30, 6:28 pm |
| <snip />
> You mean like this?
> http://www.w3.org/TR/CSS21/colors.h...pdef-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 2005-09-30, 6:28 pm |
| clintonG wrote:
> <snip />
>
>
>
> <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.
| |
|
| clintonG wrote:
> <snip />
>
>
> <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 2005-09-30, 10:22 pm |
| <snip />
x,y graphing is a perfect analogy. Thanks for that suggestion
<%= Clinton Gallagher
| |
| clintonG 2005-09-30, 10:22 pm |
| <snip />
That's perfect. Thanks.
<%= Clinton Gallagher
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |