scriptygoddess

08 Mar, 2007

CSS "TOC" style?

Posted by: Jennifer In: Call for help|CSS|CSS related

I'm just curious… is there a fancy way to do something like this in CSS:

Introduction …………… Page 1
Information ……………. Page 2
More Info ……………… Page 3

… where the "Page" text lines up and the "….." just fills in until it reaches the "Page" text… kind of like you'd see in a table of contents in a book? (Ideally the "…." wouldn't even be text in the markup. It would just be a background fill or something…) Is that even possible?

Update: Jenna got me on the right track…. (Thank you!) 😀

Make each line part of a list item. Apply the background image to <li> style. Wrap each part with another tag. Float one right, the other left, and give them both a solid color background the same as the rest of the page (so that it covers the dot, so it won't show through under the text). I also wanted the right column to line up, so I gave it a width, and told the text to align-left. Here's the example.

7 Responses to "CSS "TOC" style?"

1 | Jenna

March 9th, 2007 at 8:22 pm

Avatar

I'm almost CERTAIN that I've seen that in a WordPress Theme recently.

2 | Jenna

March 9th, 2007 at 8:23 pm

Avatar

Sure enough!

WordPress Foliage Mod
http://5thirtyone.com/foliagemod/

I was impressed when I saw it.

3 | Derek

March 10th, 2007 at 3:55 pm

Avatar

Yup. The Foliage Mod had a table of contents type navigation block in the header. Funny, I was just about to post the tutorial / code for that on my site. It's going up tomorrow. 😉

4 | Daynah

March 15th, 2007 at 12:41 am

Avatar

Wow, thanks! I love CSS! 😀

5 | jeffld

March 9th, 2008 at 3:46 pm

Avatar

Thank you for posting a simple example. Most of the examples that I find are not shown on a page by themself, which I LOVE by the way. It is so much easier to grasp when on a standalone page like that.

6 | How-to create a "Table of Contents" Navigation - Derek Punsalan - 5ThirtyOne

March 10th, 2009 at 9:22 am

Avatar

[…] which included a Table of Contents (TOC) styled navigation block in the header. A recent post on ScriptyGoddess prompted me to upload the download & tutorial post straight away which is what you find […]

7 | 65 Must-Know CSS Strategies and Tutorials - Webitect

August 11th, 2009 at 1:40 pm

Avatar

[…] which included a Table of Contents (TOC) styled navigation block in the header. A recent post on ScriptyGoddess prompted me to upload the download & tutorial post straight away which is what you find […]

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements