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;
}

View Demo

(Continue)..