Creating numeric lists (1.2.3) with <ol>

HTML & CSS
1

Hello

I need to make a list that should be like this:

  1. Item one
    1.1 Sub item one
    1.1.1 Sub-sub item one
    1.2 Sub item two
  2. Item two
    etc.

I though about doing something like this:
<ol>
<li>Item one</li>
<ol>
<li>Sub item one</li>
<ol>
<li>SubSub item one</li>
</ol>
<li>Sub item two</li>
</ol>
<li>Item two</li>
</ol>
But that would result in getting only single number in front of the item, (eg just 1 instead of 1.1.1).

So, can this be done (with some list-style-type setting or something?) or would I simply need to place the 1.1.1 my self and place it in <ol>? Or any other way to solve this?

Thanks in advance!

Edit:

/me slaps vB for deleting all space in front of a line

2

You’d have to do something along the lines of:


.sub li:before
  {
  content:".";
  }



<ol>
<li />main item 1
  <ol>
  <li class="sub"/>sub 1
  <li class="sub/>sub2
  </ol>
<li />main item 2
</ol>

should work, but not sure how widely supported. Prolly not IE.

3

Try this one :slight_smile:


<ol style="list-style-type: decimal;">
4

I guess that is the simple way to do it, huh? :wink:

5

Maybe :smiley:

6

Yes, that produces the numbers, but it doesn’t seem to make the list appear like 1.1.1 instead of just 1 if I have nested <ol> lists. At least when I tried this html


<ol style="list-style-type: decimal;">
<li>Item one</li>
<ol style="list-style-type: decimal;">
<li>Sub item one</li>
<ol style="list-style-type: decimal;">
<li>SubSub item one</li>
</ol>
<li>Sub item two</li>
</ol>
<li>Item two</li>
</ol>

I get this


1. Item one
  1. Sub item one
    1.SubSub item one
  2. Sub item two
2. Item two

instead of as I would prefare


1. Item one
  1.1. Sub item one
    1.1.1. SubSub item one
  1.2. Sub item two
2. Item two

so… any way to achive that?

7

Do they need to be numbered like that? Couldn’t you just start with Roman numbering, then go to alpha lettering, then regular numbers, like this?


ol {
  list-style-type: upper-roman;
}
ol ol {
  list-style-type: upper-alpha;
}
ol ol ol {
  list-style-type: decimal;
}

It’s not what you want, but will give the same sense of organization.

8

well, not exactly, this is laws for organisation, needs to be numbers but the single ones will just have to do. Thanks anyway :slight_smile:

9

I believe only Opera supports what you are asking. That sucks. :frowning:

10

Ok, thanks, but what would the html be to do this?

11

/me slaps vB for deleting all space in front of a line
well, my forum software doesn’t :stuck_out_tongue:

12

I think this is how it’s theoretically supposed to work:

12.5.1 Nested counters and scope

…but I don’t think theory has been put into practice yet. :wink: Nothing but gobbly-gook in IE 6, Netscape 7, Opera 7.1, Mozilla 1.4 and Firebird 0.6.1. I’d be interested to hear if anyone gets it to work…

13

Just picking this one up again, the link provided above gives an example which didn’t work for me in IE6, Opera 7 or Moz 1.3. I’m looking now for an inbetween solution, I want list numbering like so, is it possible?

  1. 1.1
    1.2
    1.3

  2. 2.1
    2.2

14

I didn’t get this to work, don’t know if something has changed since then…

15

:frowning:

16

I’ve been trying to implement a tailored solution for this where I need paragraph numbering in a list like so
1.
1.1
1.2
1.3 etc etc

It works fine only when I come to 1.10 where theres a double figure after the decimal point the text is not properly aligned ie its shifted one character to the right. Does anyone have any ideas as to how I can fix this without having to add a space before every <a> tag from 1.1 to 1.9?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)" xml:lang="en" lang="en">
<head>
 <title></title>
<style>
#annex ul {
 margin: 0px;
 padding: 0.5em;
 list-style: none;
}
#annex ul li {
 margin: 0px;
 padding: 0.2em;
}
#annex span { margin-right: 2.0em; }
</style>
</head>
<body>
 <div id="annex">
 <ol>
  <li><h2>Managing Your Project - An Overview</h2>
   <ul>
	<li><span>1.1</span><a href="1.1.htm">Background</a></li>
	<li><span>1.2</span><a href="1.2.htm">Do I have a Programme or Project?</a></li>
	<li><span>1.3</span><a href="1.3.htm">Identifying a Project</a></li>
	<li><span>1.4</span><a href="1.4.htm">Why Project Management?</a></li>
	<li><span>1.5</span><a href="1.5.htm">Structure of Guidance</a></li>
	<li><span>1.6</span><a href="1.6.htm">Receiving a Mandate</a></li>
	<li><span>1.7</span><a href="1.7.htm">Getting Started</a></li>
	<li><span>1.8</span><a href="1.8.htm">Planning and Delivering a Project</a></li>
	<li><span>1.9</span><a href="1.9.htm">Closing a Project</a></li>
	<li><span>1.10</span><a href="1.10.htm">Post Project Review</a></li>
   </ul>
  </li>
</ol>
</body>
</html>
17

Give the span a width? If that doesn’t work right away, try setting the display to block.

18

I tired giving the span a width but it just gets ignored :s
Setting display to block forces the text onto the next line.

19

I got the basic decimal numbering system to work with Opera 7.xx alone.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hmmmm</title>
<style type="text/css">
<!--
 ol:before {
    content: "" counter(chapter) ". I am the Wizard of Frobozz ";
    counter-increment: chapter;  /* Add 1 */
    counter-reset: section;      /* Set section to 0 */
}
li:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
li {
    list-style-type: none;
}
-->
</style>
  </head>
  <body>
    <ol>
      <li>Paper Shuffling is Fun.</li>
      <li>Grues are fierce.</li>
      <li>XYZZY</li>
    </ol>
  </body>
</html>