I just realized that you wouldn't have ascending selectors if you were to do
my aforementioned method. So:
What you could do is give each li a class or id=list_one list_two , etc.
And then in your css set this:
ul {list-style: none;}
ul li {padding-left: 25px; }/* Padding is based on the width of the .gif
+ the distance from the number you want */
ul li.list_one {background: url(big_one.gif) center left;}
ul li.list_two {background: url(big_two.gif) center left;}
etc...
This way you don't have to put a div or a p in your li.
If you want to get real fancy, you could dynamically create this using
javascript for all lists (but I don't have the time to write that down for
you here).
Hope this helps :)
-Andy
On 4/16/07, Andy Vaughn [EMAIL PROTECTED] wrote:
Or you could just use the list-style-image CSS property:
ol
{
list-style-image: url(blueball.gif);
list-style-type: circle
}
(W3C Reference)
http://w3schools.com/css/pr_list-style-image.asp
Supported throughout.
-Andy
On 4/16/07, Jukka K. Korpela [EMAIL PROTECTED] wrote:
On Fri, 13 Apr 2007, Pamela Denchfield wrote:
I'm new to CSS, and I'm looking for a way to use the stylesheet to
apply the following formats to autonumbers (prepended digits) in declared
ordered lists:
* bolding the digits (while other text is normal)
* removing the periods
Possible? Perhaps not.
Unfortunately, there seems to be no way of doing that without adding
artificial extra markup. In theory, you could use generated content, but
it does not work on IE.
The problem is that browsers treat the numbers as anonymous elements
inside the li elements, so anything you set for a li element applies
to the number as well, but you can't specify rules for the number
specifically. Using extra markup, though, you can wrap the content
proper
of a li element in an element that can be styled separately, so that
what you set for li has an effect on the number only.
ol li { font-weight: bold; }
ol li p { font-weight: normal; }
That's one way of using artificial extra markup, requiring the items to
be
coded as lip.../p/li (or at least lip...). It's more natural
to use div markup instead of p markup, since the item content is not
necessarily a paragraph, and using p markup typically causes some
default spacing. So I'd use
lidiv.../div/li
with
ol li { font-weight: bold; }
ol li div { font-weight: normal; }
together with some margins specifically set for the li elements (or
div elements inside them) if desired. As a rule of thumb, no extra
spacing is needed if the items are short (typically less than one line)
but some extra spacing (e.g. li { margin-bottom: 0.5em; }) is useful if
the items are long.
--
Jukka Yucca Korpela,
http://www.cs.tut.fi/~jkorpela/http://www.cs.tut.fi/%7Ejkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
