I want to create an ordered list with dotted lines, indicating the size of the file. How do?

Question

Example below:

enter image description here

ignore the "257 px" and "324 px" !

Thank you!

If the picture dont open, try: http://i.imgur.com/7Vzpl6r.png — Romulo Sousa, Aug 03 '13 at 19:03
what have u tried???please send us your code or give us a jsfiddle.. — RbG, Aug 03 '13 at 19:06
http://stackoverflow.com/questions/11664469/adding-a-dotted-line-spacer-infill-with-css, http://stackoverflow.com/questions/4898287/how-to-display-text-a-dotted-line-then-more-text-spanning-the-width-of-the-page, http://stackoverflow.com/questions/7278030/menu-style-fill-in-with-periods, http://stackoverflow.com/questions/2360830/adding-a-dotted-line-trail-after-menu-description — thirtydot, Aug 03 '13 at 19:07
The dotted lines in your image are not indicating the file size, they are simply filling the gap between the file size text and the title text. — Kevin Lynch, Aug 03 '13 at 19:09
@Vector: I think that's just poor grammar. His image explains it better. — mpen, Aug 03 '13 at 19:13
This solution looks great: http://stackoverflow.com/a/17651357/65387 — mpen, Aug 03 '13 at 19:14

Kevin Lynch · Accepted Answer · 2013-08-03T20:15:38.237

2

I would do it in pure CSS

DEMO http://jsfiddle.net/kevinPHPkevin/j6JWT/252/

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt span:after { content: " .................................................................................." }

EDITED

Another solution is by using position absolute, still pure CSS

DEMO http://jsfiddle.net/kevinPHPkevin/nDNsW/

ol {
    list-style:none;
}
li {
    width: 400px;
    position:relative;
     border-bottom: thin black dotted;
    padding:10px 0;
}
.pdf {
    position:absolute;
    right:0;
    bottom:-17px;
}
.one {
    position:absolute;
    left:0;
    bottom:-17px;
}
span {
    background:#fff;
    display:block;
    margin-bottom:13px;
}

edited Aug 03 '13 at 20:15

answered Aug 03 '13 at 19:17

Kevin Lynch

24,427
3
36
37

1

Having the numbers right-aligned usually looks nicer, but Romulo's question doesn't demonstrate which he prefers. – mpen Aug 03 '13 at 19:20
unfortunately don't work! =/ but thanks ! – Romulo Sousa Aug 03 '13 at 19:47
1

As you can see in the fiddle, it does in fact work. Without seeing your exact code there's not a lot else I can do. Good luck in your ventures. – Kevin Lynch Aug 03 '13 at 19:53
1

@Romulo i've added edited my answer with another solution, hope it helps you on the right track. – Kevin Lynch Aug 03 '13 at 20:18

adeneo · Answer 2 · 2013-08-03T19:32:26.107

1

To fill the gaps you'd either have to have some sort of fixed layout, calculate an average width of the characters used in that font, or just use a monospaced font to make sure all characters are the same width. I'll do the latter (using monospace) to show an example of how it's done, and then it's just a matter of figuring out how many periods to insert :

var items = {'Big title text here xyxyxyx':'(pdf) 57mb', 
             'Small title text':'(pdf) 57mb'
            },
     ul   = $('<ul />');

$.each(items, function(k,v) {
    var span1 = $('<span />', {text: k}),
        span2 = $('<span />', {text: Array(60 - (k.length+v.length)).join('.')}),
        span3 = $('<span />', {text: v});

    $('<li />').append(span1, span2, span3).appendTo(ul);
});

ul.appendTo('body');

FIDDLE

EDIT:

Or you could use fake dots like a border : http://jsfiddle.net/Lh7A9/2/

edited Aug 03 '13 at 19:32

answered Aug 03 '13 at 19:14

adeneo

312,895
29
395
388

You don't need a monospaced font. You can use an image for the dots and then cover it up with a solid background. – mpen Aug 03 '13 at 19:17
@Mark - I've seen your comment above, and the image of the fake dots is one way to go, and it looks fairly simple and is in many cases a great way to solve this, but I was trying to show how you'd insert actual periods, and not an image, and without several elements on top of each other etc. There are ways to estimate width of text etc. but a monospaced font makes it a lot easier. – adeneo Aug 03 '13 at 19:20
Even if you estimated the width of the font, it would be off by a little. You could use real dots and mask those too, but it would be trickier. – mpen Aug 03 '13 at 19:25
wow, great code, but very complex... but this may give me more work in the future. But thanks very much! – Romulo Sousa Aug 03 '13 at 20:06
@RomuloSousa - It's probably easier to understand in a simpler example, like [**THIS ONE**](http://jsfiddle.net/Lh7A9/3/) ??? – adeneo Aug 03 '13 at 20:22
yes, you greatly simplified! Very thanks! – Romulo Sousa Aug 03 '13 at 20:44

mpen · Answer 3 · 2013-09-11T17:27:36.817

Here's my solution: fiddle

No images required, no layering/masking (allows patterned background), no requirement for monospaced fonts.

HTML

<div class="table">
    <div class="row">
        <div class="title">Big text here</div>
        <div class="dots"></div>
        <div class="value">57 MB</div>
    </div>
     <div class="row">
        <div class="title">Small title text</div>
        <div class="dots"></div>
        <div class="value">104 MB</div>
    </div>
    <div class="row">
        <div class="title">One more for good luck</div>
        <div class="dots"></div>
        <div class="value">4.8 MB</div>
    </div>
</div>

CSS

body {
    background: url(http://subtlepatterns.com/patterns/ps_neutral.png);
}

.row {
    display: table;
}

.title,.dots,.value {
    display: table-cell;
}

.title, .value {
    white-space:nowrap;
}

.table {
    width: 500px;
    margin: 10px;
}

.dots {
    border-bottom: 1px dotted gray;
    width: 100%;
}

Although you may want to play with the dots a bit, I think they sit a bit too low.

@RomuloSousa, as you can see from the jsFiddle, it is demonstrated as working. Usually it is best to avoid the phrase "it doesn't work" entirely, and just explain what problem you _are_ having. — halfer, Sep 11 '13 at 16:32

I want to create an ordered list with dotted lines, indicating the size of the file. How do?

3 Answers3

HTML

CSS