|
|
Posted by Jukka K. Korpela on 09/14/07 18:50
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]
|