473,411 Members | 1,918 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,411 software developers and data experts.

How to format ordered list-item numbers?

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
13 15938
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
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
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
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
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
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
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

"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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: JohnA | last post by:
Dear all, I'm trying to compose a query, but I don't know how to express the statement. I have 4 tables: Customers, Orders, Order Details and Products. Each customer has many orders and each...
4
by: Ryan Ternier | last post by:
I have a section of my project that is Driving me nuts. No one has been able to help that much on it, so i thought of posting it here in hopes someone could help. I need to print out an...
210
by: Christoph Zwerschke | last post by:
This is probably a FAQ, but I dare to ask it nevertheless since I haven't found a satisfying answer yet: Why isn't there an "ordered dictionary" class at least in the standard list? Time and again...
33
by: Gregory Petrosyan | last post by:
Buenos dias, amigos! I have to write _simple_ gui library, for embedding into game. My first attempt was to use XML: isn't it cute to describe ui in such a way: <window> <title>Hello...
22
by: bearophileHUGS | last post by:
>From this interesting blog entry by Lawrence Oluyede: http://www.oluyede.org/blog/2006/07/05/europython-day-2/ and the Py3.0 PEPs, I think the people working on Py3.0 are doing a good job, I am...
6
by: bearophileHUGS | last post by:
I have found that in certain situations ordered dicts are useful. I use an Odict class written in Python by ROwen that I have improved and updated some for personal use. So I'm thinking about a...
3
by: User | last post by:
Hi, Is it possible to transform Ordered/Unordered list into navigation dropdown menus? Is this effect achieved by CSS? or via Javascript? PLease advise Thanks.
16
by: some old html fumbler | last post by:
I want to use CSS to get an ordered list to start with something other than a 1 or equivalent. I have a list of things that happen during the course of a year. Too long a list is not helpful, so...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.