Quick Table of Contents with CSS3
Marking and Numbering Sections with CSS3 - Part 1
Forward: In this part of the series, we see how to create a table of contents, fast, with CSS3 (and html).
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.
Prerequisite
You should have basic knowledge in CSS and HTML before reading this series.
Description
The links to the different pages are normal hyperlinks. A link to a section of a page is the hyperlink to the page ending with the fragment identifier. A fragment identifier begins with a # followed by the ID of the section. Each link is in an li element.
There is one ol element and nested ol elements. Remember, the ol element numbers its list items. The outer ol element has links to the different web pages. A nested ol element has links to the sections of a web page. A nested ol element is typed between the start and end tags of the li element that has the link to its page.
Let us consider a simple example where there are three chapters. In this example and in this series, each web page is one chapter. Let us assume that each chapter has three sections. So each section (or corresponding heading) in a page has an ID, which is also a fragment identifier in a hyperlink in the table of contents page. We shall look at the sectioning in details, in a later series. Here, let us just look at the coding of the quick simple table of contents web page. This is a code sample:
<!DOCTYPE HTML>
<html>
<head>
<title>Table of Contents</title>
</head>
<body>
<h1>Table of Contents</h1>
<ol list-style-type="decimal">
<li><a href="chapterone.htm">Chapter One</a>
<ol>
<li><a href="chapterone.htm#S1">Chapter One – Section 1</a></li>
<li><a href="chapterone.htm#S2">Chapter One – Section 2</a></li>
<li><a href="chapterone.htm#S3">Chapter One – Section 3</a></li>
</ol>
</li>
<li><a href="chaptertwo.htm">Chapter Two</a>
<ol>
<li><a href="chaptertwo.htm#S1">Chapter Two – Section 1</a></li>
<li><a href="chaptertwo.htm#S2">Chapter Two – Section 2</a></li>
<li><a href="chaptertwo.htm#S3">Chapter Two – Section 3</a></li>
</ol>
</li>
<li><a href="chapterthree.htm">Chapter Three</a>
<ol>
<li><a href="chapterthree.htm#S1">Chapter Three – Section 1</a></li>
<li><a href="chapterthree.htm#S2">Chapter Three – Section 2</a></li>
<li><a href="chapterthree.htm#S3">Chapter Three – Section 3</a></li>
</ol>
</li>
</ol>
</body>
</html>
Read and try the above code if you have not already done so.
The secret in the success of this simple code is in the indentation of the nested lists at the browser. If the nested lists were not indented to the right, there would have been conflict in the numbering of the chapters and numbering of the sections, since whole numbers are used to number the chapters as well as the sections.
Normally, you would want the sections to be numbered, something like, 2.1, 2.2, 2.3, and you would not want to see the decimal points after the whole numbers for the chapters. We shall see how to solve this problem in the later parts of the series. However, before that we should learn a few things first.
Generated Content
The numbers of the list items were not typed by us. They were generated by the browser. Numbers and other content generated by the browser, in that way are called Generated Content.
Pseudo Element
Elements created by CSS, which are not html elements, are called pseudo elements. The numbers created above are pseudo elements.
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