Re: formatting of html list

Giganews Newsgroups
Subject: Re: formatting of html list
Posted by:  Jukka K. Korpela (jkorpe…
Date: Sun, 14 Nov 2010

cerr wrote:

> Am I able to format an html list the way that the point in an
> unordered list would have a different color than the text behind it?

The simplest way (in a sense) is to create a bullet image of the desired
color and use the CSS property list-style-image.

> I tried following:
> <ul>
> <span style="color: #00FF00;"<li></span>blahblah
> </ul>
> but this wouldn't work is this possible at all?

Well the markup is seriously invalid (a <ul> element must not contain
anything by <li> elements, by HTML syntax), but it suggests a completely
different approach, which works even without any CSS:

<div><font color="green">&bull;</font> foo</div>
<div><font color="green">&bull;</font> bar</div>

This isn't a list at all, in HTML terms, but it creates a rendering of a
bulleted list with green bullets. Using CSS, you could change the markup to
something more reasonable, like

<div class="list">
<div class="li"><font class="bullet">&bull;</font> foo</div>
<div class="li"><font class="bullet">&bull;</font> bar</div>

with some suitable left margin (or padding) for .list and
..bullet { color: green; }

Yet another approach is to use list markup in HTML but with some extra stuff
thrown in, namely containers for list item contents:

<li><span class="li">foo</span></li>
<li><span class="li">bar</span></li>

The you can set

li { color: green; } { color: black; }

in CSS. The point is that the color property as set for an <li> element
affects the entire rendering of the list item, including the
browser-generated list bullet - this isn't a requirement, just a feature of
actual implementations. And then you can set that color to the desired
bullet color and the color of all the rest, the content proper of the <li>
element, to black, or whatever you regard as normal text color.



In response to

formatting of html list posted by cerr on Sat, 13 Nov 2010