changing the bullet of <li>

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 (AT) netzteil (DOT) com

On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:

Is there a way to change the bullet form, color, etc, of the element
li> under<ul> via css?

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

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:

On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:


Is there a way to change the bullet form, color, etc, of the element
li> under<ul> via css?


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.

Chris Leipold <cleipold (AT) dietzk (DOT) de> wrote:

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(...);

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/

"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

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(...);

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

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

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.

(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.

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* <usenet3 (AT) julietremblay (DOT) com.invalid>:

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.

That would be

::marker {content: '*'}

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

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

*Brian* <usenet3 (AT) julietremblay (DOT) com.invalid>:

Christoph Paeper wrote:

::marker {content: '*'}
http://www.w3.org/TR/css3-lists/#markers>.

Of course, it'll be years before it is of any use.

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.)

Not to sound cranky, but why wasn't this in CSS 1?

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!