Geek asks and answers

Menu style "...." - fill with periods

I am trying to find the best way to create the effect ".....", for example, in the lunch menu: http://cl.ly/0g263j04322m3F140D40

Not sure if this should be done simply by adding periods or if there is a way to get jQuery or CSS3 to fill it. Just curious.

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

+2
source share
3 answers

You can use old CSS border-style: dottedand floattwo elements on both sides. Just make the two elements on both sides opaque backgrounds and borders to hide the dotted border. See an example here:

http://jsfiddle.net/7BtYC/

NB: CSS3 border-image, , .

+3

CSS2.

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;
}
+3

, . , JavaScript, CSS, . .

, , ; , . .

:

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;
}

Note that I used a very crappy image for ellipses; you can do better.

+1
source

More articles:


All Articles