CODEWITHSUNDEEP
html
tonyf
tonyf

Reputation: 35567

Continuous Ordered List

I have a Terms and Conditions document that I want to place in my website, that consists of a number of sub-headings with bullet points under these sub-headings.

In HTML, I want to make these bullet points into an ordered lists within each sub-section, which seems to work fine, but how can I carry the numbering so that from the first ordered list to the very last one, the numbers start from 1 and carry through right to N?

At the moment, I have to create for each sub-section, an open and close ordered list tag, so I never have a incremental list from start to finish.

Thanks.

Upvotes: 2

Views: 3474

Answers (2)

Ms2ger
Ms2ger

Reputation: 15993

This is one of the reasons HTML5 allows the start attribute again:

<h1>1</h1>
<ol>
  <li>...
  <li>...
  <li>...
</ol>
<h1>2</h1>
<ol start=4>
  <li>...
  <li>...
  <li>...
</ol>

You'll need to update them all if you add or remove an item, but that shouldn't be too common in a ToC.

Upvotes: 2

Jacob Mattison
Jacob Mattison

Reputation: 51062

Give the first ordered list a CSS style that includes counter-reset: chapter, and give all subsequent ordered lists a style that includes counter-increment: chapter.

Edited to add: My understanding here wasn't complete. The "counter" stuff works only with the CSS "content" attribute, which inserts generated content. So the solution needs to use that attribute. Unfortunately, that is only supported in Internet Explorer starting with version 8.

<html>
<style type="text/css">

#firstList {
   counter-reset: chapter;
}
li{
   list-style-type:none;
   counter-increment: chapter;
}
li:before {
   content:counter(chapter) ". ";
}
</style>
<ul id="firstList">
   <li>first item</li>
   <li>second item</li>
   <li>third item</li>
</ul>
<p>intermediate text</p>
<ul>
   <li>fourth item</li>
   <li>fifth item</li>
   <li>sixth item</li>
</ul>
</html>

Upvotes: 4

Related Questions