Stylesheets - changing the bullet of <li>

Author

changing the bullet of <li>

Udo Marx

2005-01-20, 4:17 am

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@netzteil.com

A.Translator

2005-01-20, 4:17 am

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

Jukka K. Korpela

2005-01-20, 12:22 pm

Chris Leipold <cleipold@dietzk.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/

Spartanicus

2005-01-20, 7:22 pm

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote:

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

2005-01-20, 7:23 pm

A.Translator wrote:
> On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:
>
>
>
>
> You can do lots with bullets

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

Chris Leipold

2005-01-20, 7:23 pm

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

Christoph Paeper

2005-01-20, 7:23 pm

*Brian* <usenet3@julietremblay.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

2005-01-23, 7:15 am

Christoph Paeper wrote:
> Brian:
>
>
>
> That would be
>
> ::marker {content: '*'}
>
> with the CSS 3 Lists draft
> <http://www.w3.org/TR/css3-lists/#markers>.

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

2005-01-23, 7:15 am

*Brian* <usenet3@julietremblay.com.invalid>:
> Christoph Paeper wrote:
>
>
> 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!