Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorinfinimedia
- CommentTimeFeb 23rd 2006 edited
Is it possible to modify the size of the # next to a list item in an ordered list?
I'm looking to make the numbers big, and drop-capped so to speak.
i.e. the # should be something like size 18 font, but align to the left of the list item.
(so it would be: 1.whatever 2. whatever where 1 and 2 were big and spanning 2 lines, but the whatever text would be normal).
second and related question: could I create a background image to load BELOW the number in an OL LI ? and have this image be defined by the LI class it was associated with?
OL are rarely discussed in this community, so i figure this might prove a challenge to people. so any help is greatly appreciated. -
have you tried applying the font styling to the list and then having the content like
<li>span>some text</span></li>
and then having some css to style the spanned content? -
yeah... sort of
li {font-size: 20px}
li span {font-size: 10px}
and then
<ol>
<li><span>whatever 1</span></li>
<li><span>whatever 2</span></li>
</ol>
should work
the same way with the background... try applying it to the list, but not the <span> within the list
hope this helps -
- CommentAuthorNick Presta
- CommentTimeFeb 23rd 2006
Or, if you want to be cool, use a UL, and use :before and counters to create your own numbers. -
- CommentAuthorclimaxdesigns
- CommentTimeFeb 24th 2006
yeah but :before wont degrade. -
- CommentAuthorinfinimedia
- CommentTimeFeb 24th 2006
hmm thats what i thought to do, but thought there might be a way of defining font on a bullet style. -
- CommentAuthorNick Presta
- CommentTimeFeb 24th 2006
This looks fine to me:
http://nickpresta.ath.cx/source/beforeLists.html
Of course, it requires a CSS hack for browsers that don't support :before and content/counters. -
You can also set your list style to none and then use the psuedo class of :first-letter to style the numbers in any way you want.
1 to 8 of 8