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 <li><p>...</p></li> (or at least <li><p>...). 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
> >
> > <li><div>...</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/
