Geek asks and answers

Adding a dashed line trace after a menu description

How can I add a dynamic ".........." to the restaurant menu in CSS? As in print, they have "our food is made of blah blah blah ............. 24.99 dollars."

How would you do this in CSS? Or is it possible?

+3
source share
4 answers

The best decision:

<ul>
    <li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>

then CSS to match (untested, but customizable to get the effect)

li {
    width: 300px;
    height: 20px;
    border-bottom: 1px dotted black;
    background-color: white;
}

.food, .price {
    height: 22px; //key: just a bit taller than the LI
    background-color: white;
}

.food {
    float: left;
}

.price {
    float: right;
}

Thus, it basically fixes the LI rectangle and draws a border from below, then the price and product name cover it dynamically with their width. YMMV with browsers, but perhaps a negative bottom border — will the border get the border border, probably obscured by P.

+4
source

, . :after psuedo-selector content. . : http://www.quirksmode.org/css/beforeafter.html , IE F .

javascript. "". , , , , , , .

. :

<ul class="menu">
  <li><span class="name">Yummy stuff</span> <span class="price">$400</span></li>
</ul>

CSS :

.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; }
.menu li {
  display:block;
  overflow:hidden; //contain the float
  background-image: url(dots.gif);
  background-repeat:repeat-x;
}
.menu .name { background-color:#ffffff; }
.menu .price { float:right; clear:none; background-color:#ffffff; }
+2

Alex - .food .

: http://www.search-this.com/2007/11/26/css-a-recipe-for-success/ (demo)

Here is a live demo of a small modified old solution (try resizing): http://cssdesk.com/BqR96

And the modified css:

.restaurant_menu__list {      
  min-width: 320px; /* For mobile devices */
  max-width: 500px; /* Custom max width for readbility */
}

.restaurant_menu__row {
  border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
  position: relative;
  float: left;
  line-height: 1.2em;  

  margin: -.9em 0 0 0;  
  width: 100%;

  text-align: left;  
}

.restaurant_menu__meal span
, .restaurant_menu__price
{
  background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}

.restaurant_menu__meal {
  padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}

.restaurant_menu__meal span {
  margin:0;
    position:relative;
    top: 1.6em;
    padding-right:5px; /* Custom number for space between text and dotted line */
}

.restaurant_menu__price {  
    padding:1px 0 1px 5px;
    position:relative;
    top:.4em;
    left:1px;/* ie6 rounding error*/
    float:right;
}

And the modified html:

<ul class="restaurant_menu__list">

  <li class="restaurant_menu__row">
    <!-- Inside div we need inline element, to handle multiline meals -->
    <div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div>
    <span class="restaurant_menu__price">€25</span>
  </li>

  <li class="restaurant_menu__row">
    <div class="restaurant_menu__meal"><span>French Onion Soup</span></div>
    <span class="restaurant_menu__price">€32</span>
  </li>

</ul>
+2
source

This is really graphics, not text, even if it usually runs as ASCII art with dots. So a repeating background image can do the trick appropriately?

-1
source

More articles:


All Articles