2

I have been trying to find the best way to create the "....." effect like in a dinner menu: http://cl.ly/0g263j04322m3F140D40

Not sure if it has to be done with just adding in the periods myself or if there is a way to have jQuery or CSS3 to fill it in. Just curious.

Any ideas on what I can do? Or back to the old fashion way of adding periods.

  • possible duplicate of [Adding a dotted line trail after menu description](http://stackoverflow.com/questions/2360830/adding-a-dotted-line-trail-after-menu-description) – NGLN Sep 02 '11 at 00:42

3 Answers3

3

You can use the old CSS border-style: dotted and float the two elements to either side. Just make the two elements either side have opaque backgrounds and borders to hide the dotted border. See example here:

http://jsfiddle.net/7BtYC/

NB: CSS3 provides border-image which could be used to provide a better looking effect than the standard dotted border.

brenjt
  • 15,997
  • 13
  • 77
  • 118
asc99c
  • 3,815
  • 3
  • 31
  • 54
3

Try this CSS2 solution.

HTML:

<ul> 
    <li><span>Soup</span><span>€ 2.99</span></li>
    <li><span>Ice cream</span><span>€ 5.99</span></li>
    <li><span>Steak</span><span>€ 20.99</span></li>
</ul>

CSS:

ul {
    width: 400px;
    list-style: none;
}
li {
    border-bottom: 2px dotted black;
    height: 20px;
    margin-bottom: 6px;
}
li span {
    position: relative;
    top: 6px;
    float: left;
    clear: right;
    background: white;
    height: 26px;
}
li span+span {
    float: right;
}
NGLN
  • 43,011
  • 8
  • 105
  • 200
0

There's a solution using an image as the ellipses. You could probably do it with JavaScript, but this is the only CSS way I can think of. Demo here.

What you need to do is give a container element a repeating background of dots, and then any element on top of it has an opaque background; this will hide the dots, giving a half decent effect. Experimentation is key.

Code as follows:

HTML

<div>
    <strong>Big plate o' food</strong><span>1 million money</span>
</div>

CSS

div
{
    background: url('http://media.avclub.com/images/auth/user/57461/ellipsis_png_35x42_crop_q85.jpg') repeat-x;
}

strong, span
{
    background: white;
}

span
{
    float: right;
}

Please note I've used a really crappy image for the ellipses; you can do better.

Bojangles
  • 99,427
  • 50
  • 170
  • 208