Connecting Tech Pros Worldwide Forums | Help | Site Map

Can the color of list markers change?

futurepy@yahoo.com
Guest
 
Posts: n/a
#1: Jul 24 '05
By default color of the list marker, disc or circle or square, is
black. Is there a way to change the color, for example, to red or
blue? Thanks.


David Ross
Guest
 
Posts: n/a
#2: Jul 24 '05

re: Can the color of list markers change?


futurepy@yahoo.com wrote:[color=blue]
>
> By default color of the list marker, disc or circle or square, is
> black. Is there a way to change the color, for example, to red or
> blue? Thanks.[/color]

There is no HTML for this. However, you can create a list marker
graphic (e.g., a GIF file) that has your desired color. Then use a
style-sheet to specify list-style-image. See section 5.6.4 of the
CSS1 specification. Note that, if the user changes the font size
on his or her browser, the size of a marker graphic will NOT
change.

Also, you can use a style-sheet to set the color of the text of
list items. The marker then has the same color.

Now for two design comments:

To me, bulleted text (i.e., a list with markers) is easier to read
if the markers are the same color as the text. Green bullets with
red text (or vice-versa) would be very annoying.
If you create list marker graphics, keep them on the same server
and in the same domain as the page that uses them. You don't want
the graphics lost when a different server is down.
--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.
Jukka K. Korpela
Guest
 
Posts: n/a
#3: Jul 24 '05

re: Can the color of list markers change?


David Ross <nobody@nowhere.not> wrote:
[color=blue]
> Also, you can use a style-sheet to set the color of the text of
> list items. The marker then has the same color.[/color]

It is also possible to use extra markup that makes the content of each
LI element an element of its own, normally using SPAN or DIV, as in
<li><span>list item, text level content</span></li>
and then set the color of LI to something, the color of the inner
element to something else. This would result in a list bullet that is
of different color than the list item. With the usual caveats of
course.

Whether that's a good idea is debatable. On the technical side, using
an image as a bullet (via list-style-image in CSS) sounds better,
though it's impossible to adjust the positioning of the bullet well
that way. Regarding useability, I would not object to a colored bullet
if it is not too striking.

Well, there _is_ even an HTML approach (though it may or may not work,
and it's debatable whether it should work - the specs are vague on the
BASEFONT element):

<basefont color="red">
<ul>
<li><font color="black">...</font></li>
<li><font color="black">...</font></li>
...
</ul>
<basefont color="black">

It's hopefully needless to say that I mentioned this possibility for
your entertainment only.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Closed Thread