changing the bullet of <li>

[Udo Marx]

Hello to ciwas!

Is there a way to change the bullet form, color, etc, of the element
<li> under<ul> via css? Any reply will be appreciated.
--
Freundliche Gruesse,
Netzteil - Udo Marx

http://www.netzteil.com

mailto:marx@net zteil.com

[A.Translator]

Re: changing the bullet of &lt;li&gt;

On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:
[color=blue]
> Is there a way to change the bullet form, color, etc, of the element
> <li> under<ul> via css?[/color]

You can do lots with bullets, even use your own image.
Have a look here: http://www.alistapart.com/articles/taminglists/ or do a
simple Google for css bullet and you'll finds heaps of examples.
--
Groet,
Adriana
,---- [hint]
| throw rubbish out if you want to reach me by e-mail
'----

[Chris Leipold]

Re: changing the bullet of &lt;li&gt;

I found it very useful to use a positioned background-image for <li>s
and set liste-style-image to none. If you need a graphical bullet it's
more flexible than using liste-style-image:url(...);

Chris

A.Translator wrote:[color=blue]
> On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:
>
>[color=green]
>>Is there a way to change the bullet form, color, etc, of the element
>><li> under<ul> via css?[/color]
>
>
> You can do lots with bullets, even use your own image.
> Have a look here: http://www.alistapart.com/articles/taminglists/ or do a
> simple Google for css bullet and you'll finds heaps of examples.[/color]

[Jukka K. Korpela]

Re: changing the bullet of &lt;li&gt;

Chris Leipold <cleipold@dietz k.de> wrote:
[color=blue]
> I found it very useful to use a positioned background-image for <li>s
> and set liste-style-image to none. If you need a graphical bullet it's
> more flexible than using liste-style-image:url(...);[/color]

An interesting idea... I guess you mean something like

li { list-style-type: none;
background: url(../images/bullet.gif) no-repeat;
padding-left: 1em; }

(and perhaps setting the left margin and padding of the ul element to zero
or something small, to avoid the excessive default indentation).

But it's probably best to wrap it inside @media screen { ... }, since most
browsers by default omit background images in printing.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Spartanicus]

Re: changing the bullet of &lt;li&gt;

"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote:
[color=blue][color=green]
>> I found it very useful to use a positioned background-image for <li>s
>> and set liste-style-image to none. If you need a graphical bullet it's
>> more flexible than using liste-style-image:url(...);[/color]
>
>An interesting idea... I guess you mean something like
>
>li { list-style-type: none;
> background: url(../images/bullet.gif) no-repeat;
> padding-left: 1em; }[/color]

One possible reason to do this is that Gecko based browsers don't
position image bullets cosmetically in a nice manner when text is
zoomed. Using the background image hack the bullet can be positioned
with "0 50%", this works better when zoomed in Gecko.

People who are pernickety about list bullet alignment with respect to
the list text may also like it because using list-style-image causes a
small difference between Opera & IE versus Gecko.

For static offsets a list-style-image can be given a transparent top
and/or left edge.
[color=blue]
>(and perhaps setting the left margin and padding of the ul element to zero
>or something small, to avoid the excessive default indentation).
>
>But it's probably best to wrap it inside @media screen { ... }, since most
>browsers by default omit background images in printing.[/color]

Indeed. Another drawback is that if the user has images disabled a UA
can decide to use the standard bullet (Opera does this). Needless to say
that this only works if the bullet image has been specified using the
list-style-image property.

--
Spartanicus

[Brian]

Re: changing the bullet of &lt;li&gt;

A.Translator wrote:[color=blue]
> On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:
>
>[color=green]
>> Is there a way to change the bullet form, color, etc, of the
>> element <li> under<ul> via css?[/color]
>
>
> You can do lots with bullets[/color]

Yet, but I find something missing from CSS regarding list bullets. On
more than one occasion, I wanted to change the bullet to a plus sign, or
a hyphen, or some other textual character. Too bad we don't have

list-marker: "*";

or some such thing. Lacking such a property, authors turn to images of a
plus sign, requiring another http connection, more bytes, and less
flexibility.

--
Brian

[Christoph Paeper]

Re: changing the bullet of &lt;li&gt;

*Brian* <usenet3@juliet remblay.com.inv alid>:[color=blue]
>
> Yet, but I find something missing from CSS regarding list bullets. On
> more than one occasion, I wanted to change the bullet to a plus sign, or
> a hyphen, or some other textual character. Too bad we don't have
>
> list-marker: "*";
>
> or some such thing.[/color]

That would be

::marker {content: '*'}

with the CSS 3 Lists draft <http://www.w3.org/TR/css3-lists/#markers>.

--
"Opportunit y is missed by most people
because it is dressed in overalls and looks like work."
Thomas Alva Edison

[Brian]

Re: changing the bullet of &lt;li&gt;

Christoph Paeper wrote:[color=blue]
> Brian:
>[color=green]
>> I wanted to change the bullet to a plus sign, or a hyphen, or some
>> other textual character. Too bad we don't have
>>
>> list-marker: "*";
>>
>> or some such thing.[/color]
>
>
> That would be
>
> ::marker {content: '*'}
>
> with the CSS 3 Lists draft
> <http://www.w3.org/TR/css3-lists/#markers>.[/color]

Ah! Good to know that. Of course, it'll be years before it is of any
use. :-( Not to sound cranky, but why wasn't this in CSS 1? It seems
like a pretty simple thing to implement.

--
Brian

[Christoph Paeper]

Re: changing the bullet of &lt;li&gt;

*Brian* <usenet3@juliet remblay.com.inv alid>:[color=blue]
> Christoph Paeper wrote:
>[color=green]
>> ::marker {content: '*'}
>> <http://www.w3.org/TR/css3-lists/#markers>.[/color]
>
> Of course, it'll be years before it is of any use.[/color]

Sure, although I guess it's one of the first CSS3 things we'll see being
implemented. (Not counting the ones already being supported by one or
another UA.)
[color=blue]
> Not to sound cranky, but why wasn't this in CSS 1?[/color]

CSS 1 and 2 had a different concept concerning list markers ('display:
marker'), that never got implemented anywhere AFAIK. Therefore it's
perhaps not that bad, that CSS3 breaks backwards compatibility in this
regard.

--
Useless Fact #7:
It cost 7 million dollars to build the Titantic
and 200 million to make a movie about it!