Having read Oli Warners post on ThePCSpy.com about a CSS Table of Contents I decided to knock up a quick demo myself with some fairly good results.
the code
The CSS for this is fairlty simple and is as follows:
margin:0px 0px 0px 25px;
padding:0px 0px 9px 0px;
}
#document ol ol{
margin:0px 0px 0px 50px;
list-style:lower-roman;
}
#document ol ol ol{
margin:0px 0px 0px 75px;
list-style:lower-alpha;
}
li{
position:relative;
margin:5px 0px 0px 0px;
}
li span{
position:absolute;
right:0px;
}
li a:link,
li a:visited{
cursor:pointer;
border-bottom:1px dashed #CCCCCC;
display:block;
width:100%;
height:1.1em;
margin-right:-20px;
text-decoration:none;
}
li a:hover{
border-bottom:1px solid #CCCCCC;
}
As can be seen in the CSS above I am simply styling ordered list items and the a tags within in side them as I see fit. The effect this generates can be seen below.
The HTML is as follows:
<ol class="toc">
<li><a href="#introduction">Introduction <span>Page 1</span></a>
<ol>
<li><a href="#subtitle1">Subtitle 1 <span>Page 1</span></a></li>
<li><a href="#subtitle2">Subtitle 2 <span>Page 1</span></a>
<ol>
<li><a href="#subtitle3">Subtitle 3 <span>Page 1</span></a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#experiment">Experiment <span>Page 2</span></a></li>
<li><a href="#conclusion">Conclusion <span>Page 3</span></a></li>
<li><a href="#discussion">Discussion <span>Page 4</span></a></li>
</ol>
</div>
Again the HTML as shown above is very simple and simply structures nested ordered lists as required for the table of contents.
demo
This is the CSS Table of Contents using Ordered Lists demo.
extending the demo
I then thought of extending this slightly with the following demo to produce an actual document. Notice in print preview mode each page is defined when an hr tag finishes using the page-break-after: always; CSS attribute.
Here it is the CSS Table of Contents within a document demo.
P.S. This is valid XHTML 
3 Comments Received
That’s a good demonstration on what you can do with a little more CSS =)
My remit for the one I did was to do it all with as few CSS classes as possible. I also wanted to hide the underlining so it looked how it usually does in books.
I noticed yours is a little (and I do mean very slightly) squiffy in IE7. Probably something that could be hacked around…
I’ll be revisiting the topic in a little bit and I’ll be sure to reference your work.
Fantastic I look forward to reading your new article. Post a message here when you’ve completed it and I’ll be sure to visit.
Looks pretty crap compared to the original at thepcspy.com…
Leave A Reply