7

Reference this fiddle: http://jsfiddle.net/exGnZ/

Hi, I'm trying to reproduce a table of contents with an unordered list and leader dots. Unfortunately, when there's a long line of content, the formatting breaks down. Does anyone know how to get Chapter 2 in the image below to appear on the same line as the dots?

enter image description here

Here's the code I've got at the moment: http://jsfiddle.net/exGnZ/

I'm also pasting it here:

    <div>
    <ul id="toc">
    <li><span>Introduction</span> <a href="#">Chapter 1</a></li>
    <li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming</span> <a href="#">Chapter 2</a></li>
    <li><span>Sun breaks</span> <a href="#">Chapter 3</a></li>
    <li><span>Lost and confused</span> <a href="#">Chapter 4</a></li>
    <li><span>The pot of gold</span> <a href="#">Chapter 5</a></li>
    <li><span>Nom nom nom</span> <a href="#">Chapter 6</a></li>
    </ul></div>

And the CSS: 

    div {padding:10px;}
    #toc {
        list-style: none;
        margin-bottom: 20px;
    }
    #toc li {
        background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom left;
        overflow: hidden;
        padding-bottom: 2px;
    }
    #toc a,
    #toc span {
        display: inline-block;
        background: #fff;
        position: relative;
        bottom: -4px;
    }
    #toc a {
        float: right;
        padding: 0 0 3px 2px;
    }
    #toc span {
        float: left;
        padding: 0 2px 3px 0;
    }
Fred
  • 222
  • 1
  • 6
  • 11

3 Answers3

3

Here is my crack at it: JSFiddle

The only downside of this technique is that it requires a fixed width to the right side (100 pixels, in this case) to work, but it's a minor trade-off.

Nate B
  • 6,338
  • 25
  • 23
  • Great solution. I did notice IE7 would need a hack, though to get dots on the same line... – Fred Jan 19 '12 at 19:51
  • Flipping the position of the `span` and the `a` tags in the code would fix that IE7 bug, without any hacks. – Nate B Jan 19 '12 at 20:45
3

How about this: http://jsfiddle.net/exGnZ/40/

Best I could manage in the time I had.

Deadlykipper
  • 878
  • 2
  • 7
  • 18
  • Great solution. The only thing I wish I could change about it is not having the text on the left-hand side underlined, but I think this is as close as we can get with current browsers... Picking this as the answer. – Fred Jan 19 '12 at 19:52
  • I did notice that. If I had a bit more time I'm sure I could come up with something. Bit busy at the moment though. I'll post back later if I come up with anything. – Deadlykipper Jan 20 '12 at 09:52
  • Hey, an extra span (that's not block level) solves the problem. One inline-block span will set the width and one (the non-block level span) can be used to set the background white. Thanks for your help! – Fred Jan 20 '12 at 14:59
2

My two pence worth is here.

I used relative positioning instead of floats and added a pseudo element after the spans to prevent underlapping(?) the links if the width of the ul is reduced.

magicalex
  • 917
  • 7
  • 11