Create an Attractive Illustrated Table of Contents for the Web

Longer articles/content on the web are well served by a Table of Contents. Like in a book, they increase usability by allowing readers to jump directly to specific sections, rather than laboriously scroll the entire article to find something. A typical Table of Contents rather boring, let’s spice it up a little bit with a little color and illustration!

Here is what we will build:

1. Source Material

The character illustration we will use is a vector image available from the illustrator 9Lives on iStockPhoto. The vector file was built very well, so it was easy to isolate the woman graphic. I dropped it in photoshop to resize it to the exact pixel size I wanted.

From Photoshop, I used the “Save for Web & Devices” export option and saved using the PNG-24 option. This is the setting for a full 32-bit alpha-transparent PNG. The only browser that will have any trouble with this is IE 6, so if that is going to be an issue for you, you should look into either using the PNG Hack, saving as a GIF or 8-bit PNG instead, or using a conditional stylesheet to hide the graphic from IE 6.

2. Writing the HTML markup

Nested ordered lists are the meat of a Table of Contents. Our markup will use those, but then wrap the whole thing in a DIV we’ll use to create the tan box. We’ll also use a traditional H1 tag for a header. Clean and simple.

<div id="ToC">
	<img src="images/woman.png" alt="" class="woman" />
	<h1>Table of Contents</h1>
	<ol>
		<li>Article Heading</li>
		<li>
			Article Heading
			<ol>
				<li>Article Subhead</li>
				<li>Article Subhead</li>
			</ol>
		</li>
		<li>Article Heading</li>
		<li>
			Article Heading
			<ol>
				<li>Article Subhead</li>
				<li>Article Subhead</li>
				<li>Article Subhead</li>
				<li>Article Subhead</li>
			</ol>
		</li>
		<li>Article Heading</li>
		<li>Article Heading</li>
		<li>
			Article Heading
			<ol>
				<li>Article Subhead</li>
			</ol>
		</li>
	</ol>
</div>

Note that we add the illustration of the woman here right at the top and give here a unique class. This is the hook we will use to target and position her with the CSS. This is also the hook you could use in the conditional stylesheet to hide her if need be.

In a live Table of Contents, the text within each list item would be wrapped in an anchor link as well. The href attribute would be pointing to a hash value URL like “#article-two” which, when clicked, would jump down the page to the element which had that ID. At the bottom of each section, you could even make “Back to Top” links that link to #ToC, which would jump people back to to the Table of Contents.

3. The CSS

The CSS is also pretty straightforward. I’ll just show you the whole thing, then point out a few things below.

*				{ margin: 0; padding: 0; }
body				{ font-size: 62.5%; font-family: Helvetica, sans-serif;
	 				 padding: 50px; }

#ToC				{ background: #f4e5b1; border: 1px solid #b1a041; margin: 25px;
					  -moz-border-radius: 12px; -webkit-border-radius: 12px; padding: 10px;
					  width: 260px; position: relative; min-height: 320px; }

h1				{ font-size: 22px; margin: 5px 0 10px 75px;
					 letter-spacing: -1px; }

ol				{ margin-left: 100px; font-weight: bold; letter-spacing: -1px; }
ol ol				{ margin-left: 20px; list-style: lower-alpha;}
ol li				{ font-size: 18px; margin: 3px 0;}
ol li ol li			{ font-size: 12px; }

.woman				{ position: absolute; top: -25px; left: -55px; }

Things to note:

- The #ToC is styled very simply just using a background color and a single pixel border color. Browser-specific attributes are added to do the rounded corners. This will work and look great in all Mozilla based browsers (Flock, Firefox, etc.) as well as Webkit based browsers (Konqueror, Safari, etc.). If you view the page in IE 7 or Opera, it degrades nicely just to having regular square corners. Not a big deal.

- The ordered lists are pushed away from the left side of the box (to make room for the illustration) with left margin. The nested ordered lists also have a left margin set, to a smaller value. Without this, they would be indented still, but using the same 100px which would be too far. Also notice on the sub ordered lists the list-style is set to lower-alpha. This uses lettering instead of numbering then on the nested lists, which makes it easier to browse visually.

- Because the #ToC has relative positioning applied, we can use absolute positioning on the .woman class to get that illustration exactly where we want it. No need to be nervous about using absolute positioning here, this isn’t for layout. More about absolute positioning inside relative positioning.

Finished Product

VIEW DEMO

DOWNLOAD FILES