Any idea how to code a list of credits or table of contents?

[jmroberts70]

I've been trying to figure out how to code this type of a page in either a table or CSS:

I see it applying to either a list of credits (as shown above) or a table of contents. I'd like to make the dotted line work more smoothly than the above example that looks like it was done by hand (and poorly). Any ideas?

 

[GJSNeptune]

Could try placing a div between each item with a bottom dotted border. Then mess with spacing properties to make the bottom of the text line up with the border.

 

[Sgraffite]

You could make a 4 column table or equivalent with divs, and string pad the right side of the first and third columns with periods.

 

[Pwyl_The_Destroyer]

You could make a 4 column table or equivalent with divs, and string pad the right side of the first and third columns with periods.

This is what I was thinking as well, but:
Variable character width will give you some headaches with trying to line everything up.
like:

iiiiiiiiii..........
DDDDDDDDDD..........

10 letters and 10 periods on each line.

 

[ShadowStriker]

Monospace fonts ftw.

 

[Whatsisname]

Use a table with variable sized cells, and in the middle cell with the periods have a dotted line that matches the periods in the font.

Or: stop wasting your time with the damn dots and do something else that looks nice but isn't a pain in the ass.

 

[jmroberts70]

I think I'm getting warmer. I used the code from this guy and worked into an example on my test page here. It's basically a unsorted list that puts a repeating GIF image in the background that acts as the dotted line. Then he masks out the background with a black colored background behind each text element so you only see the dotted line between each element. I'm still having trouble adjusting the line spacing but this looks like it may be the simplest solution. Let me know what you guys think!