Dot Leaders With Picture Background

June 28, 2023 Post a Comment

So I'm building a website for a restaurant and I'm in a pickle. I'm trying to create the menu there. The idea is to align the food name to the left, the price to the right and fill

Solution 1:

I am kinda late, but you can quite easily do it with a radial-gradient:

.col {
  display: inline-block;
  vertical-align: top;
}

.namesspan {
  width: 200px;
  display: flex;
}

.pricesspan {
  display: block;
  text-align:right;
}

.namesspan:after {
  content: "";
  display: inline-block;
  height: 1em;
  flex-grow: 1;
  background: radial-gradient(black 25%, transparent 25%) scroll repeat-x bottom left/5px5px;
}

<divclass='names col'><span>Hamburger</span><span>Hot Dogs</span><span>Superman Hamburger</span></div><divclass='prices col'><span>$1.00</span><span>$0.50</span><span>$400.00</span></div>

JSFiddle Demo

Solution 2:

It's easy to do with some simple javascript and css, here's a fiddle: jsfiddle

The key is to set the width of the div that holds the dots to the width of the column minus the width of the food name minus the width of the price, and to make sure there are more than enough dots to cover the distance, and to set overflow: hidden for the dot div.

$(".menu-row").each(function(index, element) {
    var menuRowWidth = $(element).width();
    var foodItemWidth = $(element).children('.food-item').width();
    var priceWidth = $(element).children('.price').width();
    var $dotFiller = $(element).children('.dot-filler');
    var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
    $dotFiller.width(dotFillerWidth + "px"); 
});

Then float the item and dot div left, the price right, all within a set width column. It's also important that overflow: hidden is set for the dots, because when we set the width of that div in javascript we want all extra dots to just be cut off. The CSS:

.food-item {
  float: left
}

.dot-filler {
  overflow: hidden;
  width: 0;
  float: left;
}

.price {
  float: right;
}

.menu-row {
  width: 400px;
}

Then structure your html as follows:

<divclass="menu-row"><divclass="food-item">Steak</div><divclass="dot-filler">............................................................................................</div><divclass="price">$18.00</div></div><divclass="menu-row"><divclass="food-item">Hamburger</div><divclass="dot-filler">............................................................................................</div><divclass="price">$8.00</div></div>

Solution 3:

You can use a wrapper to set a fix width of your Name + Dots.

The css will look like this:

.wrapper {
  width: 300px;
  overflow: hidden;
  display: inline-block;;
  white-space: nowrap;
}

The HTML like this:

<div><ulclass="noDisc"><li><divclass="wrapper"><span>HAMBURGER </span><span>...............................................................</span></div><span>$ 40.00</span></li><li><divclass="wrapper"><span>FRIED CHIKEN </span><span>...............................................................</span></div><span>$ 13.00</span></li><li><divclass="wrapper"><span>STEAK ON A STICK </span><span>...............................................................</span></div><span>$ 99.00</span></li></ul></div>

Live sample:

fiddle

Solution 4:

Use display:table; and display: table-cell; for the divs inside the list-elements and border-bottom: Xpx dotted black; for the dots.

ul{
  margin: 0;
  padding: 0;
}
ulli{
  display: table;
  width: 100%;
}
ullidiv {
  display: table-cell;
}
ullidiv.food {
  padding-right: 5px;
}
ullidiv.dots {
  border-bottom: 1px dotted #000;
  width: 100%;
  position: relative;
  top: -4px;
}
ullidiv.price {
  padding-left: 5px;
}

<ul><li><divclass="food">Spaghetti</div><divclass="dots">&nbsp;</div><divclass="price">10.00$</div></li><li><divclass="food">Spaghetti</div><divclass="dots"></div><divclass="price">10.00$</div></li><li><divclass="food">Spaghetti</div><divclass="dots"></div><divclass="price">10.00$</div></li></ul>

Solution 5:

Thanks. I used what you had here and improved on it. This code is meant for woocommerce product items, but can be edited for whatever you need. $containerElement is the element you are measuring the width of.

/**
 * dotFiller
 * adds dynamic dot leaders between product title and count element (<mark>)
 * @return void
 */var dotFiller = function(){
    var$containerElement = $('ul.products li.product.has-children h2'),
        df  = '<div class="df">.....................................................................</div>';
        $containerElement.each(function(i,el){
                var$el = $(el),
                    w   = $el.width(),
                    mw  = $el.find('mark').width(),
                    tw  = $el.find('span').width(),
                    dfw = (w - mw - tw) - 24;
                // if its not there, lets add itif (!$(el).has('.df').length){
                    $el.find('span').after(df);
                }
                $el.find('.df').css('width',dfw + "px");
        });
};
dotFiller();

With this code, you can update/ recalculate on resize like so :

$('window').on('resize',function(){ dotFiller(); });

And here is my css for the internal elements:

mark {
            background-color: transparent;
            color: $secondary;
            display: inline-block; float: right;
            font-weight: normal;
        }
        div.df { 
            overflow: hidden; 
            display: inline-block; 
            margin-left: 10px; 
            position: relative; 
            top: 2px; 
            font-weight: normal; 
            opacity: 0.8; 
        }

I hope this helps someone!

Html5 Tutorial