Tutorials

Table of Contents Style Layout with CSS

Tags: Beginner

For a recent project, I was designing a price guide that was basically very similar to a typical Table of Contents type of layout. I hope it can come in handy for some of you.

HTML

<ul class="tablel_content">
	<li>
		<strong>Chapter 1</strong>
		<em>4</em>
	</li>
	<li>
		<strong>Chapter 2</strong>
		<em>10</em>
	</li>
</ul>

CSS

We will be using a background image that would repeat the dotted lines across each list item. Using the background positioning we will keep it aligned with the rest of the text and use the padding to cover the areas where it should not overlap.

ul.tablel_content {
	width: 500px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-size: 1.7em;
}
ul.tablel_content li {
	margin: 0;
	padding: 10px 0;
	text-align:right;
	background: url(dotted.gif) repeat-x left 22px;
}
ul.tablel_content li strong, ul.tablel_content li em {
	float: left;
	background: #1d1d1d; /*--Combined Property with 'li em'--*/
	padding: 0 10px; /*--Combined Property with 'li em'--*/
}
ul.tablel_content li em {
	float: none;
}

Conclusion

This technique requires a background image to repeat the dotted lines, I was messing around with a version that just relies on the border property. Here is a quick sample , it works but requires more code and relies on absolute positioning (To fix an IE6 Bug I had to use this method). Let me know if you have other ways to style this up!