Styling List Items

[Peter Collinson]

Hi...

Is there any way to style a List Item a different color and size than
the <LI> in an Ordered List?

I'd like a red super-script number and a dark blue text in a page's
footnotes. And this be done using style sheets?

--
- Yours truly, Pete Collinson

[Jukka K. Korpela]

"Peter Collinson" <bl******@optonline.net> wrote:

Is there any way to style a List Item a different color and size than
the <LI> in an Ordered List?
The question does not parse. Do you mean to ask whether there is a way to
style a list item except by styling a list item? (Of course, you can style
list items in an unordered list, too.)
I'd like a red super-script number and a dark blue text in a page's
footnotes. And this be done using style sheets?

How does this relate to the above? It should relate, since the Subject
line mentions styling list items only.

Using red color for text is almost always a mistake, unless it's a warning
of some kind. Using dark blue for something that isn't a link is usually a
mistake, too.

But what is it that you are really trying to accomplish? I don't think we
can see that unless you post a URL of the current design. Specifically,
what do you mean by "footnotes"?

For some ideas on how to "map" footnotes of print design to something that
works on the Web, see http://www.cs.tut.fi/~jkorpela/www/fn.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Peter Collinson]

Jukka Korpela <jk******@cs.tut.fi> wrote:

Is there any way to style a List Item a different color
and size than the <LI> in an Ordered List?

The question does not parse. Do you mean to ask whether
there is a way to style a list item except by styling a list item?
(Of course, you can style list items in an unordered list, too.)
How 'bout this... I would like to make the number in an ol list a link a
separate color from the List Item.
I'd like a red super-script number and a dark blue text in
a page's footnotes. And this be done using style sheets?

How does this relate to the above? It should relate,
since the Subject line mentions styling list items only.
Could we please get past that? If I used improper nomenclature, I
apologize.
Using red color for text is almost always a mistake...
I do not wish to use red for the text. I wish to use dark blue (#084570)
for the text.
...unless it's a warning of some kind. Using dark blue
for something that isn't a link is usually a mistake, too.
I'll take that under advisement.
But what is it that you are really trying to accomplish?
I don't think we can see that unless you post a URL of
the current design. Specifically, what do you mean by
"footnotes"?

Exactly what you mean by "Footnotes" or "Endnotes" in your referenced
page.

1. Greeking greeking greeking greeking
greeking greeking greeking greeking.

The number and period ("1.") should be red superscript. The text should
be in dark blue. I can get everything but the Number, but can fake the
effect with a nested DIV styled as a hanging indent.

Div.nb {
text-indent: -2.0em;
padding-left: 2.5em;
}

Rather than number "manually," I'd prefer to do it as an Ordered List.

--
- Yours truly, Pete Collinson

[Lauri Raittila]

In article <xK***********************@news4.srv.hcvlny.cv.net >, Peter
Collinson wrote:

Exactly what you mean by "Footnotes" or "Endnotes" in your referenced
page.
I believe footnotes are those that in book on same page, and endnotes
ones that are in the end. But I haven't even yet read the article, so I
could be wrong. (will read it later, it'll be useful)
1. Greeking greeking greeking greeking
greeking greeking greeking greeking.

The number and period ("1.") should be red superscript. The text should
be in dark blue.
I don't comment colors, that was already done.
Rather than number "manually," I'd prefer to do it as an Ordered List.

I suppose you mean not numbering it by hand?

I think you have at least 2 choises:
1. Position contents of list relatively, so figure seems superscript, and
make font-size smaller using small font for list and normal on links.
http://www.student.oulu.fi/~laurirai...footnotes.html

2. Use generated content. (only works Opera 5+)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Jukka K. Korpela]

"Peter Collinson" <bl******@optonline.net> wrote:

How 'bout this... I would like to make the number in an ol list a link a
separate color from the List Item.
It still doesn't quite parse. I mean the "to make [something] a link
a separate color". To make something a link, you use HTML markup, not CSS.
If I used improper nomenclature, I apologize.
Apology accepted, but this doesn't solve the problem that your problem
hasn't been adequately described. A URL would at least have shown the
markup you use.
1. Greeking greeking greeking greeking
greeking greeking greeking greeking.
I suppose this refers to an <ol> element at the end of your page.
The number and period ("1.") should be red superscript.
That doesn't sound like a good idea. In an endnotes section, there is no
reason to make the numbers superscripts. In footnote or endnote
_references_, superscripting has the purpose of making them less
noticeable, less disturbing for normal reading of the text. But this
reason is lost when we turn to the footnotes or endnotes themselves.

Anyway, technically, they could be affected by using the marker-related
features of CSS 2, but these are poorly supported.
I can get everything but the Number, but can fake the
effect with a nested DIV styled as a hanging indent.

Div.nb {
text-indent: -2.0em;
padding-left: 2.5em;
}
How does this affect the vertical position or color of the number?
It's not faking - instead, it's a simple (and not uncommon) solution to
the problem of getting hanging indents, but that's a completely different
problem.

To make it possible to style the endnote numbers in the endnotes
themselves, the only way that works reasonably is to use extra markup. For
example, make the list <ul>, with list-style-type: none in CSS, and use
markup like
<li><a name="fn1" href="#fr1" class="fnn">1.</a> text of list item</li>
which implies that you can use .fnn as a selector when specifying the
style of the numbers. Here the name and href attributes are not relevant
to that styling but useful for the functionality (making the entry a link
destination and a link back to the reference).
Rather than number "manually," I'd prefer to do it as an Ordered List.

But you need to number the endnote _references_ "manually" anyway - unless
you rely on generated content and counters, which would have little
browser coverage and isn't a good idea even in principle, since it would
fail in non-CSS browsing situations
--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Philipp Lenssen]

Peter Collinson wrote:

Jukka Korpela <jk******@cs.tut.fi> wrote:

Is there any way to style a List Item a different color
and size than the <LI> in an Ordered List?

The question does not parse. Do you mean to ask whether
there is a way to style a list item except by styling a list item?
(Of course, you can style list items in an unordered list, too.)

How 'bout this... I would like to make the number in an ol list a
link a separate color from the List Item.

I think you are confused about the names, or I just don't understand
what you mean; in HTML you got:
"Unordered lists (UL), ordered lists (OL), and list items (LI)"
http://www.w3.org/TR/html401/struct/lists.html#h-10.2

To differentiate a link within a list item of an unordered list from
one of an ordered list, use following CSS:

ol li a { bla; }
ul li a { bla; bla; }

Or do you want to make a link out of the number of an <ol>?

--
Google Blogoscoped
http://blog.outer-court.com