So, I follow all the discuss about this. I probe this and I have a good works.
ul {
padding-left: 20px;
margin-left: 5px;
}
li {
list-style: url(../images/li.gif);
vertical-align: middle;
padding-left: 1px;
color: #3E4D57;
font: 11px Tahoma;
background: transparent;
}
Now I have a question. The text near to the li element, how I can align them to
appear align="absmiddle" as a image property ??
Cheers
ReynierPM
Usuario registrado de Linux: 310201
****************************************
No basta con alcanzar la sabiduría, es necesario saber utilizarla.
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Bill Hely
Enviado el: martes, 15 de noviembre de 2005 1:57 am
Para: 'Seona Bellamy'; css-d@lists.css-discuss.org
Asunto: Re: [css-d] CSS & Lists
Thanks very much Seona. That works fine.
One small problem - which I can live with if necessary - is that there is now a
lot more work involved setting up the lists.
What I have now is this:
ul#NoBullet
{
list-style: none;
margin-left: 25px;
padding-left: 0px;
}
li#TickGreenSmall
{
padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
background: transparent url(/images/Tick-green-small.gif) 3px left
no-repeat;
}
The webpage is a long one with several different styles of lists.
So now, instead of defining a list with just the one ID= in the UL, I also have
to define every line.
Is there a more efficient way to combine [UL ID="NoBullet"] and [LI
ID="SomeListStyleHere"]
TIA
- Bill H.
> -----Original Message-----
> From: Seona Bellamy [mailto:[EMAIL PROTECTED]
> Sent: Tuesday, November 15, 2005 2:47 PM
> To: [EMAIL PROTECTED]
> Subject: Re: [css-d] CSS & Lists
>
>
> On 15/11/05, Bill Hely <[EMAIL PROTECTED]> wrote:
> > I'm trying to come to grips with using CSS with lists.
> >
> > When using an image as a bullet point, is it possible to
"push
> > the image down" so it doesn't project well above the text associated
> > with that bullet?
>
> A better way than using list-style-image is to set the
list-style-type
> to "none" and make your bullet a background image. Something
like:
>
> ul#TickGreenSmall {
> list-style-type: none;
> margin-left: 40px;
> padding-left: 0px;
> margin-top: 5px;
> }
> li {
> padding-top: 2px;
> padding-bottom: 2px;
> padding-left: 20px;
> background: transparent
url(/images/Tick-green-small.gif) 3px
> left no-repeat;
> }
>
> Just tweak the top osition of the background until it's sitting
where
> you want it, and play with your padding-left until the text has
> cleared the image properly. Takes a bit of trial and error, but
it's a
> lot easier than trying to tame a list-style-image.
>
> > I can get the required effect easily enough with a table and images,
> > but...
>
> ...that's a bad idea. :)
>
> Cheers,
>
> Seona.
>
--
We take security very seriously. All outgoing mail is certified Virus Free. To
boost YOUR security visit The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005
______________________________________________________________________
css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org --
http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
