scriptygoddess RSS Feed
 
 
 
 

CSS "TOC" style?

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!) :D

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.

6 Responses to “CSS "TOC" style?”

  1. 1
    Jenna:

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

  2. 2
    Jenna:

    Sure enough!

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

    I was impressed when I saw it.

  3. 3
    Derek:

    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. 4
    Daynah:

    Wow, thanks! I love CSS! :D

  5. 5
    jeffld:

    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. 6
    How-to create a "Table of Contents" Navigation - Derek Punsalan - 5ThirtyOne:

    [...] 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 [...]

Leave a Reply

Categories

Archives

Bookmarks

WordPress Resources

Meta

ADVERTISEMENTS