How to format ordered list-item numbers?

#1

http://www.liarsscourge.com/ewpi.html

The list numbers should be formatted as <h3>, but other text within the <li>
should be normal text.

<ol>
<li>
<h3 id="d2">Download latest WordPress code</h3>
[other text, images and formatting here]
</li>
</ol>

I tried putting the opening <li> in the <h3> heading, but that fails validation.

I also tried modifying the stylesheet like this:

#ewpi li {
font-weight:bold;
}

but that changes the whole <li>, not just the list number.

How do I apply formatting to only the <li> number, not the whole <li> ?

Thanks in advance.

#2

Schraalhans Keukenmeester wrote:

Quote:

deko wrote:
http://www.liarsscourge.com/ewpi.html

The list numbers should be formatted as <h3>, but other text within
the <li
should be normal text.

ol
li
h3 id="d2">Download latest WordPress code</h3
[other text, images and formatting here]
/li
/ol

I tried putting the opening <li> in the <h3> heading, but that fails
validation.

[snip]

Quote:

style
li.bold {
font-weight : bold;
}
li.bold span {
font-weight : normal;
}
/style
/head
body
ol
li class="bold"><span><h3>Yadda yadda</h3>foo and bar</li></span
li class="bold"><span><h3>Bladibla</h3>bar vs foo</li></span
/ol
/body
/html

HTH,
Sh.
Oops, sorry, the <span> tags should be *inside* the <li></li> tags. My bad.

Sh.

#3

In article <ysSdnWhjA-WPWvDYnZ2dnUVZ_vqdnZ2d (AT) comcast (DOT) com>,
"deko" <deko (AT) nospam (DOT) com> wrote:

Quote:

http://www.liarsscourge.com/ewpi.html

The list numbers should be formatted as <h3>, but other text within the <li
should be normal text.

ol
li
h3 id="d2">Download latest WordPress code</h3
[other text, images and formatting here]
/li
/ol

But your list content is not properly a set of list items, is it?
Each "item" is actually a series of paragraphs. The easiest solution
would be to simply write the number explicitly in the heading.

<h2>1. Download latest WordPress code</h2>

<p>blah blah blah</p>

<h2>2. Next step</h2>

<p>More blah</p>

(Note I've also fixed your headers, which are second-level in the
context of the document who's URL you provided; if you are using
h3 to make the text appear smaller than an h2, don't - that's what
CSS is for!)

If you _really_ want to have the user agent put the numbers in the
headings, then you need to so something like this:

<ol class="mainheadings">
<li">Download latest WordPress code
<ul class="subsectioncontent">
<li>blah</li>
<li>blah</li>
</ul>
</li>
...
</ol>

- but I'm not convinced that stuffing images and text into
unordered list items is such a great idea, either, and still
makes more work by trying to force non-list content into a
list format.

Quote:

I tried putting the opening <li> in the <h3> heading, but that fails
validation.

I also tried modifying the stylesheet like this:

#ewpi li {
font-weight:bold;
}

but that changes the whole <li>, not just the list number.
How do I apply formatting to only the <li> number, not the whole <li> ?

The short answer is that you're making life more difficult by trying
to make it easier. A quick browse of "list-item" in the CSS spec suggests
that you might need to use a styled <span></span> on the list item
text to get the difference you want. Again, I would ask, why? You
really don't have that many things that need numbering.

(Hmm - is there an html/css option for automatically numbering
headers according to their h1/h2/h3/etc occurrence? Have to look
that one up, but it would certainly be useful...)

#4

David Stone escribió:

Quote:

In article <ysSdnWhjA-WPWvDYnZ2dnUVZ_vqdnZ2d (AT) comcast (DOT) com>,
"deko" <deko (AT) nospam (DOT) com> wrote:
...
(Hmm - is there an html/css option for automatically numbering
headers according to their h1/h2/h3/etc occurrence? Have to look
that one up, but it would certainly be useful...)

This is available in CSS2:

http://www.w3.org/TR/CSS21/generate.html#counters

But I don't know any browser that supports it.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado

#5

Manuel Collado <m.collado (AT) fi (DOT) upm.es> wrote:

Quote:

(Hmm - is there an html/css option for automatically numbering
headers according to their h1/h2/h3/etc occurrence? Have to look
that one up, but it would certainly be useful...)

This is available in CSS2:

http://www.w3.org/TR/CSS21/generate.html#counters

But I don't know any browser that supports it.

Opera since v4.
Recent Mozilla based browsers.
I'm pretty sure that iCab and HTML Kit based browsers such as Safari and
Konqueror also support it.

That covers all relevant recent browsers, minus one.

--
Spartanicus

#6

deko wrote:

Quote:

http://www.liarsscourge.com/ewpi.html

How do I apply formatting to only the <li> number, not the whole <li> ?

li {font-weight: bold}
li * {font-weight: normal}
li h3 {font-weight: bold} (or whatever else needs bolding)

This does require everything within the li to be in an explicit
container, though (hx, div, p, a, etc.) or it will be bolded.

--
Berg

#7

Quote:

You have no selector that specifies only part of the list item.
You could add <span> tags around the li 'content' and set font-weight for
that.

I guess the key here is understanding that a list item is everything between the
<li> tags, including the auto-generated number - so there is no way to apply
formatting *only* to the auto-generated list-item number in an ordered list.

Using <span> tags as you suggested is a reasonable work-around. I can just
define whatever classes I need for formatting within the list items: <span
class="whatever">, and define <li> within my ewpi div to whatever size and
weight I want for the heading: ewpi li { font-weight:bold }

Thanks for the tip!

#8

"Bergamot" <bergamot (AT) visi (DOT) com> wrote

Quote:

deko wrote:
http://www.liarsscourge.com/ewpi.html

How do I apply formatting to only the <li> number, not the whole <li> ?

li {font-weight: bold}
li * {font-weight: normal}
li h3 {font-weight: bold} (or whatever else needs bolding)

This does require everything within the li to be in an explicit
container, though (hx, div, p, a, etc.) or it will be bolded.

10-4

I think this is cleaner than using <span> within the <li>

Is there an easy way to get the list-item number to match <h3>?

or should I use this:

ewpi li {
font-size: 1.6em;
font-weight: bold;
}

or perhaps this:

ewpi li, h3 {
font-size: 1.6em;
font-weight: bold;
}

#9

On Wed, 29 Nov 2006 22:42:11 +0100, Manuel Collado wrote:

Quote:

David Stone escribió:
In article <ysSdnWhjA-WPWvDYnZ2dnUVZ_vqdnZ2d (AT) comcast (DOT) com>,
"deko" <deko (AT) nospam (DOT) com> wrote:
...
(Hmm - is there an html/css option for automatically numbering
headers according to their h1/h2/h3/etc occurrence? Have to look
that one up, but it would certainly be useful...)

This is available in CSS2:

http://www.w3.org/TR/CSS21/generate.html#counters

But I don't know any browser that supports it.

Dang, I was about to ask questions about that very topic. I think I
can make them work under HTML 4.0 transistional but XHTML 1.0
transitional won't verify (can't have the class inside the li tag,
must have a closing tag). I'm no HTML/XHTML/CSS expert (in every sense
of the word), I just wnat nice 1. and 1.1 and 1.1.1 when I need them
without resorting to javascript or php.

Anyone got any pointers?

--
Linux Home Automation Neil Cherry ncherry (AT) linuxha (DOT) com
http://www.linuxha.com/ Main site
http://linuxha.blogspot.com/ My HA Blog
http://home.comcast.net/~ncherry/ Backup site

#10

On Wed, 29 Nov 2006 18:22:22 -0600, Neil Cherry wrote:

Quote:

On Wed, 29 Nov 2006 22:42:11 +0100, Manuel Collado wrote:
David Stone escribió:
In article <ysSdnWhjA-WPWvDYnZ2dnUVZ_vqdnZ2d (AT) comcast (DOT) com>,
"deko" <deko (AT) nospam (DOT) com> wrote:
...
(Hmm - is there an html/css option for automatically numbering
headers according to their h1/h2/h3/etc occurrence? Have to look
that one up, but it would certainly be useful...)

This is available in CSS2:

http://www.w3.org/TR/CSS21/generate.html#counters

But I don't know any browser that supports it.

Dang, I was about to ask questions about that very topic. I think I
can make them work under HTML 4.0 transistional but XHTML 1.0
transitional won't verify (can't have the class inside the li tag,
must have a closing tag). I'm no HTML/XHTML/CSS expert (in every sense
of the word), I just wnat nice 1. and 1.1 and 1.1.1 when I need them
without resorting to javascript or php.

Anyone got any pointers?

Never mind, I've got it fix, XHTML 1.0 will allow me to use a class in
the li tag. I've got the little 1. 1.1 1.1.1 working fine now. I'll go
stand in the corner.

--
Linux Home Automation Neil Cherry ncherry (AT) linuxha (DOT) com
http://www.linuxha.com/ Main site
http://linuxha.blogspot.com/ My HA Blog
http://home.comcast.net/~ncherry/ Backup site