By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,842 Members | 2,186 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,842 IT Pros & Developers. It's quick & easy.

How to format ordered list-item numbers?

P: n/a
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 <liin the <h3heading, 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 <linumber, not the whole <li?

Thanks in advance.

Nov 29 '06 #1
Share this Question
Share on Google+
13 Replies


P: n/a
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 <liin the <h3heading, 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 <linumber, not the whole <li?

Thanks in advance.
You have no selector that specifies only part of the list item.
You could add <spantags around the li 'content' and set font-weight
for that.
A working example:

<html>
<head>
<title>Ordered List - css</title>
<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.
Nov 29 '06 #2

P: n/a
Schraalhans Keukenmeester wrote:
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 <liin the <h3heading, but that fails
validation.
[snip]
<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 <spantags should be *inside* the <li></litags. My bad.
Sh.
Nov 29 '06 #3

P: n/a
In article <ys******************************@comcast.com>,
"deko" <de**@nospam.comwrote:
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.
I tried putting the opening <liin the <h3heading, 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 <linumber, 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></spanon 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...)
Nov 29 '06 #4

P: n/a
David Stone escribió:
In article <ys******************************@comcast.com>,
"deko" <de**@nospam.comwrote:
...
(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
Nov 29 '06 #5

P: n/a
Manuel Collado <m.*******@fi.upm.eswrote:
>(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
Nov 29 '06 #6

P: n/a
deko wrote:
http://www.liarsscourge.com/ewpi.html

How do I apply formatting to only the <linumber, 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
Nov 29 '06 #7

P: n/a
You have no selector that specifies only part of the list item.
You could add <spantags 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
<litags, 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 <spantags 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 <liwithin my ewpi div to whatever size and
weight I want for the heading: ewpi li { font-weight:bold }

Thanks for the tip!

Nov 29 '06 #8

P: n/a

"Bergamot" <be******@visi.comwrote in message
news:4t*************@mid.individual.net...
deko wrote:
>http://www.liarsscourge.com/ewpi.html

How do I apply formatting to only the <linumber, 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 <spanwithin 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;
}

Nov 29 '06 #9

P: n/a
On Wed, 29 Nov 2006 22:42:11 +0100, Manuel Collado wrote:
David Stone escribió:
>In article <ys******************************@comcast.com>,
"deko" <de**@nospam.comwrote:
...
(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 nc*****@linuxha.com
http://www.linuxha.com/ Main site
http://linuxha.blogspot.com/ My HA Blog
http://home.comcast.net/~ncherry/ Backup site
Nov 30 '06 #10

P: n/a
On Wed, 29 Nov 2006 18:22:22 -0600, Neil Cherry wrote:
On Wed, 29 Nov 2006 22:42:11 +0100, Manuel Collado wrote:
>David Stone escribió:
>>In article <ys******************************@comcast.com>,
"deko" <de**@nospam.comwrote:
...
(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 nc*****@linuxha.com
http://www.linuxha.com/ Main site
http://linuxha.blogspot.com/ My HA Blog
http://home.comcast.net/~ncherry/ Backup site
Nov 30 '06 #11

P: n/a
Schraalhans Keukenmeester schrieb:
Schraalhans Keukenmeester wrote:
> <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>
[...]
Oops, sorry, the <spantags should be *inside* the <li></litags. My bad.
li elements can contain span elements.
li elements can contain h3 elements.
h3 elements can contain spa elements.
span elements _cannot_ contain h3 elements.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Nov 30 '06 #12

P: n/a
In article <6l********************************@4ax.com>,
Spartanicus <in*****@invalid.invalidwrote:
Manuel Collado <m.*******@fi.upm.eswrote:
(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.
s/one/the gorilla/

Fortunately, I don't currently have any documents so big that I
can't enter section and sub-section numbering into the header
elements manually.
Nov 30 '06 #13

P: n/a
Spartanicus escribió:
Manuel Collado <m.*******@fi.upm.eswrote:
>>>(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.
My attempt to use CSS2 counters in Mozilla some months ago was
unsuccessful (wrong numbers). The sample code in the CSS2 spec simply
didn't work, and I gave up. A new attempt few days ago has succeded. It
seems that the way Mozilla handles counter scopes requires some care.

For the benefit of others, here are some rules of thumb:
- Instanciate (reset) counters at the <bodyroot.
- A counter reset in the :before seudoelement doesn't work. Do it in the
normal element tag.

There is a working sample at:
http://lml.ls.fi.upm.es/~mcollado/xml/xml.html
It works in Firefox 1.5 and 2.0. Of course, it doesn't work in IE.

Regards.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado
To reply by e-mail, please remove the extra dot
in the given address: m.collado -mcollado

Dec 4 '06 #14

This discussion thread is closed

Replies have been disabled for this discussion.