CSS3 Table of Contents
Marking and Numbering Sections with CSS3 – Part 4
Forward: In this part of the series, we look at the web page of CSS3 Table of Contents.
By: Chrysanthus Date Published: 3 Aug 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Web Page Table of Contents
A web page table of contents has one order lists for the chapters, then ordered lists for the sections nested into the chapter ordered list. The problem here is that the section numbering of say, 2.1,.2.2, 2.3, etc. do not appear; instead you have 1, 2, 3, etc. without the number after the decimal point. With the knowledge acquired in the previous tutorials, this weakness can be removed.
Recall
To number a set of consecutive html elements in a web page, you need the :before pseudo element, which will be inserted in front (on the left) of each of the consecutive elements. You also need three css properties, which are: counter-reset, counter-increment and content, in that order. For ordinary numbering, the value of the counter-reset property is a name of your choice that you give to the counter that will do the counting. There is no code for the counter, the counter-reset property declares the counter and gives it the name of your choice. The value of the counter-increment property for ordinary counting is the name of the counter, and the default counting increment is 1. The value of the counter property is a string code consisting of short text and spacing and the counter function call, for ordinary numbering. The argument of the counter function for ordinary numbering is the name of the counter.
You need two counters here: One for the whole numbers and the other for the numbers after the decimal point. You also have to remove the default numbering scheme. You do this by typing the following property and value in the ol declaration block:
list-style-type:none;
Counting for the whole numbers and for the numbers after the decimal point are done independently. The decimal point is just a character that is printed. It is not the result of some calculation.
What does the counter-reset property really do? We want that, after counting the nested li items, the counter for the number after the decimal point should start counting again from the initial value. So, the counter-reset property and value for the numbers after the decimal point, should be placed in the declaration block of the ol element and not in the body element declaration block. In this way each time a new ol element is arrived at down in the code, counting re-starts.
The Style Sheet
This is the style sheet for any ordinary table of contents that has one level of nesting.
<style type="text/css">
body {counter-reset:chapter}
ol {list-style-type:none; counter-reset:section}
li.chapter:before
{
counter-increment:chapter;
content:counter(chapter)" ";
}
li.section:before
{
counter-increment:section;
content:counter(chapter)"."counter(section)" ";
}
</style>
As I said, there are two counters: one for the chapters or whole numbers and the other for the sections or numbers after the decimal point. The counter-reset property and its counter name (value) for the whole numbers is placed in the declaration block of the body element; that is the place to put a counter-reset property and value, everything being equal. The counter for the chapter (or whole number), will start counting and only end at the bottom of the web page (that is, at the end of the outer ol element).
The first property and value in the ol declaration block is,
list-style-type:none;
The list-style-type property is what determines the counting scheme. The value of “none” here, removes any default counting scheme (number followed only by point), giving you room to use whatever numeration you want, and room to place the decimal point in any position of your choice within digits.
The counter-reset property and value (counter name) for the sections (or numbers after the decimal point), is placed in the ol declaration block as its counting has to be repeating for each ol content.
The last two rule sets in the style sheet are for the other properties of the two different counters.
Note: In the html ol elements in the body element, do not forget to type the class for the chapters and class for the sections correspondingly.
Here is the complete code for a sample table of contents page. Read and try it.
<!DOCTYPE HTML>
<html>
<head>
<title>Table of Contents</title>
<style type="text/css">
body {counter-reset:chapter}
ol {list-style-type:none; counter-reset:section}
li.chapter:before
{
counter-increment:chapter;
content:counter(chapter)" ";
}
li.section:before
{
counter-increment:section;
content:counter(chapter)"."counter(section)" ";
}
</style>
</head>
<body>
<h1>Table of Contents</h1>
<ol>
<li class="chapter"><a href="chapterone.htm">Chapter One</a>
<ol>
<li class="section"><a href="chapterone.htm#S1">Chapter One – Section 1</a></li>
<li class="section"><a href="chapterone.htm#S2">Chapter One – Section 2</a></li>
<li class="section"><a href="chapterone.htm#S3">Chapter One – Section 3</a></li>
</ol>
</li>
<li class="chapter"><a href="chaptertwo.htm">Chapter Two</a>
<ol>
<li class="section"><a href="chaptertwo.htm#S1">Chapter Two – Section 1</a></li>
<li class="section"><a href="chaptertwo.htm#S2">Chapter Two – Section 2</a></li>
<li class="section"><a href="chaptertwo.htm#S3">Chapter Two – Section 3</a></li>
</ol>
</li>
<li class="chapter"><a href="chapterthree.htm">Chapter Three</a>
<ol>
<li class="section"><a href="chapterthree.htm#S1">Chapter Three – Section 1</a></li>
<li class="section"><a href="chapterthree.htm#S2">Chapter Three – Section 2</a></li>
<li class="section"><a href="chapterthree.htm#S3">Chapter Three – Section 3</a></li>
</ol>
</li>
</ol>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT