|
|
Posted by Aaron Beall on 09/14/07 20:07
Cheers, that will do it! Thanks.
On Sep 14, 2:50 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> Scripsit Aaron Beall:
>
> > Is there a way to style the numbers generated by an <ol> without
> > changing the <li> contents?
>
> It depends on what you mean by changing the <li> contents. You would need to
> add markup there, but you need not change the textual content. Basically,
> you need to wrap the list item content inside an extra container, e.g.
>
> <li><div>...</div></li>
>
> Then you can say e.g.
>
> ol { font-size: 200%; }
> ol li div { font-size: 50%; }
>
> This makes the font in the numbers twice as big as copy text font size,
> without affecting the list item contents font size.
>
> This postulates that you use <div> markup inside <li> elements for this
> "wrapper" purpose only. If this is not the case, you need to add class
> attributes and use a class selector, in practice.
>
> > I'm finding that styling the <li> styles
> > the number also. I would like to make the number be larger, bolder,
> > and a different color than the actual content.
>
> In the approach described above, you would set the stylistic features for
> the <ol> element (or the <li> elements) and override them for the list item
> contents, using the auxiliary <div> content. For example,
>
> ol { font-size: 200%;
> font-weight: bold;
> color: #900;
> background: white; }
> ol li div { font-size: 50%;
> font-weight: normal;
> color: black;
> background: white; }
>
> --
> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
Navigation:
[Reply to this message]
|