469,267 Members | 1,085 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,267 developers. It's quick & easy.

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:ma**@netzteil.com
Jul 21 '05 #1
8 61216
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
'----

Jul 21 '05 #2
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.

Jul 21 '05 #3
Chris Leipold <cl******@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/
Jul 21 '05 #4
"Jukka K. Korpela" <jk******@cs.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
Jul 21 '05 #5
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


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
Jul 21 '05 #6
*Brian* <us*****@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
Jul 21 '05 #7
Christoph Paeper wrote:
Brian:
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>.


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
Jul 21 '05 #8
*Brian* <us*****@julietremblay.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!
Jul 21 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Michael | last post: by
2 posts views Thread by Andrew Donaldson | last post: by
1 post views Thread by Alex Nitulescu | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.