Table of Contents Style Layout with CSS
Blog » CSS/XHTML » Table of Contents Style Layout with CSSTable of Contents Style Layout with CSS
January 13th, 2009
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!
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: Column Layouts
This entry was posted on Tuesday, January 13th, 2009 at 12:03 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
You should use definition list (dl, dt, dd) instead of ul and li