CSS Samples: How to create Numbered Table of Content (TOC) or Index List using CSS

You can create table of contents kind of layout using CSS. Please look at following sample code to create table of content or index page for your web site.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

<head>

<title>Figure 12-31</title>

<style type="text/css">

ol {counter-reset: ordered;}

ol li {display: block; margin-left: .5em;}

ol li:before {counter-increment: ordered;

content: counters(ordered,".") ": ";}

</style>

</head>



<body>

<ol>

<li>Lists

<ol>

<li>Types of Lists</li>

<li>List Item Images</li>

<li>List Marker Positions</li>

<li>List Styles in Shorthand</li>

<li>List Layout</li>

</ol></li>

<li>Generated Content

<ol>

<li>Inserting Generated Content

<ol>

<li>Generated Content and Run-In Content</li>

</ol></li>

<li>Specifying Content

<ol>

<li>Inserting Attribute Values</li>

<li>Generated Quotes</li>

</ol></li>

<li>Counters

<ol>

<li>Resetting and Incrementing</li>

<li>Using Counters</li>

<li>Counters and Scope</li>

</ol></li>

</ol></li>

<li>Conclusion</li>

</ol>

</body>

</html>

The above code will create table of content as follows, you can change it by customizing style sheet as per your requirements:

Lists
1. Types of Lists
2. List Item Images
3. List Marker Positions
4. List Styles in Shorthand
5. List Layout
Generated Content
1. Inserting Generated Content
  1. Generated Content and Run-In Content
2. Specifying Content
  1. Inserting Attribute Values
  2. Generated Quotes
3. Counters
  1. Resetting and Incrementing
  2. Using Counters
  3. Counters and Scope
Conclusion

CSS Samples

How to create Numbered Table of Content (TOC) or Index List using CSS

No comments:

Post a Comment