Geek asks and answers

Adding a dashed spacer / infill line using CSS

I work on a restaurant website. Design requires a typical filling of the dotted line between the menu item and the price. I cleaned the net and messed with it for an hour or so now and didn't seem to find any good ways to do this with CSS only. I found several other solutions that work fine if you have a solid background color, however on this site it uses a background image and these solutions will not work.

Example: The menu style "...." - fill with periods , has a good solution, but sets the background colors to white for the menu item and prices to hide the dashed lines behind them, but the page I create has a background image, so any solid color backgrounds would look bad.

I tried using all kinds of combinations of table-row / table-cell or any other types of CSS display attributes and width settings for elements, but not for bones.

Here is some fake sample markup:

<ul> 
    <li><span>Soup</span><span class="dots">&nbsp;</span><span>$2.99</span></li>
    <li><span>Ice cream</span><span class="dots">&nbsp;</span><span>$5.99</span></li>
    <li><span>Steak</span><span class="dots">&nbsp;</span><span>$20.99</span></li>
</ul>

I am trying to get this to work using a dot class element with a lower bound to fill in the blank, but I am not trying anything to work. I also just placed the bottom border on the LI element completely at the bottom of each line, but this is not what the designer wants. I can only think about doing this in javascript as a last resort, but I wanted to see if you guys have any ideas. Or, I can just use tables, but really wanted to avoid this.

Thank!

+5
source share
2 answers

I would say something like this:

.dots .

ul li {
    display:table-row;
    width:15em;
}
ul li span{
  display:table-cell;   
}
.dots{
    min-width:10em;
    position:relative;
    bottom:4px;
 border-bottom:1px dotted #777;   
}

- . display:table-cell, IE (< IE8).
span .

+4

(fiddle):

HTML:

<div id="wrap">
    <div class="inner">
        <dl>
            <dt>$2.89</dt>
            <dd><em>Lorem ipsum dolor sit amet </em></dd>
        </dl>
        <dl>
            <dt>$21.89</dt>
            <dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd>
        </dl>
        <dl>
            <dt>$8.99</dt>
            <dd><em>Donec sed felis sit amet risus</em></dd>
        </dl>
        <dl>
            <dt>$11.50</dt>
            <dd><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Etiam ante ligula,</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Fusce condimentum</em></dd>
        </dl>
        <dl>
            <dt>$7.55</dt>
            <dd><em>Morbi nibh velit, sodales eu</em></dd>
        </dl>
        <dl>
            <dt>$6.50</dt>
            <dd><em>Etiam ante ligula,</em></dd>
        </dl>
        <dl>
            <dt>$11.50</dt>
            <dd><em>Fusce condimentum</em></dd>
        </dl>
        <dl>
            <dt>$2.50</dt>
            <dd><em>Morbi nibh velit, sodales eu</em></dd>
        </dl>
        <dl>
            <dt>$21.50</dt>
            <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
        </dl>
    </div>
</div>

CSS

* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
    width:500px;
    border:1px solid #eff2df;
    margin:20px 20px;
    background:#809900;
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
    padding:20px 40px;
    border:1px solid #4c7300;
    position:relative;
    left:-2px;
    top:-2px;
    background:#eff2df;
    color:#4c7300;
    width:418px;
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
    position:relative;
    width:100%;
    border-bottom:1px solid #eff2df;
}
#wrap dd{
    line-height:1.2em;
    position:relative;
    padding:0 5em 0 0;
    text-align:left;
    border-bottom:1px dotted #000;
    clear:both;
    margin:0 0 .4em 0;
    min-height:0;
}
* html #wrap dd{
    border:none;
    background: url(images/dotted-leader.gif) repeat-x left bottom;
    height:1%;
}
#wrap dt{
    background:#eff2df;
    padding:1px 0 1px 5px;
    color:#809900;
    position:absolute;
    bottom:0px;
    right:-1px;
    z-index:99;
}
#wrap dd em{
    margin:0 ;
    position:relative;
    top:.25em;
    padding:0 5px 0 0;
    background:#eff2df;
}

+4

More articles:


All Articles