pics middle in list

[HDI]

Hi,

..pic {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 18px;
font-weight: normal;
text-decoration: none;
list-style-position: outside;
list-style-image: url(test.gif);
}

in my html:
<ul>
<li class="pic"><a href="01.html" target="_blank">01</a></li>
<li class="pic"><a href="02.html" target="_blank">02</a></li>
<li class="pic"><a href="03.html" target="_blank">03</a></li>
</ul>

the pic is bigger than the fontsize.

How can I get the text in the middle of the pic?


Thx

 

[Ben C]

Hi,

.pic {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 18px;
font-weight: normal;
text-decoration: none;
list-style-position: outside;
list-style-image: url(test.gif);
}

in my html:
<ul>
<li class="pic"><a href="01.html" target="_blank">01</a></li>
<li class="pic"><a href="02.html" target="_blank">02</a></li>
<li class="pic"><a href="03.html" target="_blank">03</a></li>
</ul>

the pic is bigger than the fontsize.

How can I get the text in the middle of the pic?

You can't get that kind of fine-grained control over list style images.
You'd have to make the images elements in their own right (img for
example) and arrange for the vertical centering using another means.

 

[Neredbojias]

Hi,

.pic {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 18px;
font-weight: normal;
text-decoration: none;
list-style-position: outside;
list-style-image: url(test.gif);
}

in my html:
<ul>
<li class="pic"><a href="01.html" target="_blank">01</a></li>
<li class="pic"><a href="02.html" target="_blank">02</a></li>
<li class="pic"><a href="03.html" target="_blank">03</a></li>
</ul>

the pic is bigger than the fontsize.

How can I get the text in the middle of the pic?


Thx

Did you try vertical-align:middle; in .pic?
Dunno if it actually works...

 

[HDI]

Did you try vertical-align:middle; in .pic?
Dunno if it actually works...

--
Neredbojias
He who laughs last sounds like an idiot.- Tekst uit oorspronkelijk bericht niet weergeven -

- Tekst uit oorspronkelijk bericht weergeven -

Doesn't work

 

[Jonathan N. Little]

Doesn't work

It won't you cannot control this. Only way I can think of is make image
a GIF with transparency and "pad" appropriately to position image where
you wish. NOTE: not all browser will position image in the same place so
you will have to test and tweak...

 

[HDI]

It won't you cannot control this. Only way I can think of is make image
a GIF with transparency and "pad" appropriately to position image where
you wish. NOTE: not all browser will position image in the same place so
you will have to test and tweak...

It's possible, I saw it on adobe.com.

If i have more time I take a closer look for now I take he image tag.

 

[Jonathan N. Little]

On 20 feb, 18:54, "Jonathan N. Little" <[email protected]> wrote:

[trying to control list image's vertical position]

It's possible, I saw it on adobe.com.

If i have more time I take a closer look for now I take he image tag.

I beg to differ. You may specify an image for a LI, and you can set the
'list-style-position' to be inside or outside the the 'block' (which
render a bit differently between browser's like IE vs the rest. We get
posts often about this). But your cannot position the image vertically.
The only way with the list-style-image is via method that I described, a
kludge at best. Otherwise would have to set UL to 'list-style: none;'
and physically stick an image in there:

<li><img src="...

or set a 'background-image' to the LI and make sure you have padding set
correctly to allow for your image to show...