Making a dotted line from restaurant menu item to price

**amy55407** · Jan 8, 2007 19:50

My main question: Can periods be used to create a dotted line from one set of text to another? Is this innappropriate because a row of periods is formatting rather than meaningful content? Is there another way to do this?

This is the context.

I'm trying to develop my CSS/XHTML skills and redoing the websites I've done in the past. The first website I ever did was for a Thai Restaurant. I used lots of tables, columns and rows and was able to lay out the menu the way I wanted. I lined up the menu like this. I'm exaggerating it here but when you try to line things up with just periods or spaces they don't really line up. I solved this by having the item and periods in one cell and the price in another.

Item 1....................................$11.50
Item 2.................................$5.95
Item 3..................................$7.95

I had a couple of thoughts without tables. One was to float the items to the left and the prices to the right. I realized right away that any changes to the menu would be very difficult unless there was a comment by each price with the name of the item (which I could do).

Another was to have a class for the prices that positioned them precisely (I haven't tried this yet).

It was at this point I thought that maybe I should't be using periods at all and decided I better find out before proceeding.

The current website is: http://www.truethairestaurant.com/menu.htm. If you dare look at the source code, you'll see that it's a disasterous mess which is why I'm working on it. Thanks.

**Rob_D** · Jan 8, 2007 20:11

Hm, interesting. Maybe a div with x-repeating background will solve the problem of trying to work out how many periods you need. This will get rid of the text resize problem too.

**Rob_D** · Jan 8, 2007 20:53

Maybe something like this

HTML Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.item {
width:400px;
background:url(period.gif) repeat-x bottom;
}
.description, .price {
background:#666; /* needs to be same as menu background */
}
.description {
max-width:250px;
float:left;
}
.price {
vertical-align:bottom;
height:30px;
position:relative;
top:-30px;
margin:auto 0 0 300px;
width:100px;
}
.clear {
clear:both;
}
</style>
</head>

<body>
<h2>Menu item</h2>
<div class="item">
<p class="description">
This describes the item but maybe too many words will be a problem, especially if max-width is not supported in all browsers. 
</p>
<div class="clear"></div>
</div>
<div class="price">&pound;3.45
</div>
</body>

Might be easier to have the price in line with the header with periods between and have the dscription below.

**Tyssen** · Jan 8, 2007 21:56

Your example has each menu item numbered, so an ordered list is probably the best choice. The following has a problem with the position of the numbers in IE, but it's a start:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu</title>
<style type="text/css">
body { width: 500px; }

p { margin: 0 0 -5px 0; }

li { 
    width: 100&#37;;
    position: relative;
    margin-bottom: 1em;
    border-bottom: 1px dotted #000; 
}

span { 
    position: relative; 
    bottom: -1px;
    padding: 0 1px;
    background: #FFF;     
}

span.price { 
    position: absolute;
    right: 0; bottom: -6px;
}
</style>
</head>

<body>

<ol>
  <li>
        <h2>Golden Wheel of Shrimp & Ham Delight</h2>
        <p><span>Shrimp and ham are chopped and infused with herbs. Comes with plum sauce for dipping. (8 slices)</span><span class="price">$8.50</span></p>
    </li>
  <li>
        <h2>Golden Wheel of Shrimp & Ham Delight</h2>
        <p><span>Shrimp and ham are chopped and infused with herbs. Comes with plum sauce for dipping. (8 slices)</span><span class="price">$8.50</span></p>
    </li>
  <li>
        <h2>Golden Wheel of Shrimp & Ham Delight</h2>
        <p><span>Shrimp and ham are chopped and infused with herbs. Comes with plum sauce for dipping. (8 slices)</span><span class="price">$8.50</span></p>
    </li>        
</ol>
</body>

**Nadia P** · Jan 9, 2007 01:58

This may help:
How to style a restaurant menu with CSS

Nadia

**Rob_D** · Jan 9, 2007 03:19

Doctor, I think I'm suffering from divitis.

**amy55407** · Jan 9, 2007 14:24

My head always starts spinning. There is so much I don't know and/or understand.

But, I was sort of able to do the menu with Tyssen's code. I did an unordered list because some of the later items added to the list are A., B., C., etc. I have a couple of issues. Here's the page.

http://peacefuldriver.net/truethaicss/menu2.htm

You can see that the dotted line goes under the price. I could fix that by setting the "span.price" right position to -50 and the menu width to 75%. I just left it as is here.

In Firefox, the dotted line drops down to the next line and doesn't run across from the item to the price. Neither of those things happen with Tyssen's page.

One other thing. Some of the menu items have one price for say tofu and another for chicken. I couldn't figure out how to get two dotted linesfor one list item when there were two prices. Eg.,

Item 10 Pad Thai
With Tofu......................$7.95
With Chicken..................$8.95

Code:

#contents{
	background-color: #E7DB84;
	width: 700px;
	/*height:100%;*/
	text-align: left;
	padding: 10px 10px 10px 10px;
}



#menu{
	width:100%;
}
#menu ul{
	list-style-type: none;
}
#menu li{
	width: 100%;
    position: relative;
    margin-bottom: 1em;
    border-bottom: 1px dotted #000;
}
span.item {
	position: relative;
	bottom: -1px;
	padding: 0 1px;
	background-color: #E7DB84;
}

span.price { 
    position: absolute;
    right: 0px; bottom: -6px;
}
h2 {
	color: #630000;
	font-family: "Times New Roman", Times, serif;
	font-size: 1em;
	font-weight: bold;
	margin-bottom: -1.2em;
}

HTML Code:

<div id="contents">
	
<div id="menu">
Appetizers

<ul>
	<li>
	<h2>1. Golden Wheel of Shrimp &amp; Ham Delight</h2>
	<p><span class="item">Shrimp and ham are chopped and infused with herbs
	Comes with plum sauce for dipping. (8 slices)</span><span class="price">$8.50</span></p>
	</li>
	
	<li>
	<h2>2. Fried Egg Rolls — Golden Kingdom style</h2>
	<p><span class="item">The best eggrolls in the world! (2)</span><span class="price"> $3.95</span> 
	</p>
	</li>
	
	<li>
	<h2>3. True Thai Vegetable Fried Egg Rolls</h2>
	<p><span class="item">Meatless vegetarian egg rolls.(2)</span><span class="price">$3.75 </span>
	</p>
	</li>
	
	<li>
	<h2>4. Original Fresh Thai Spring Rolls</h2>
	<p><span class="item">Seasoned pork and jumbo shrimp wrapped in a
	delicate rice paper with fresh vegetables and angel
	hair noodles. Peanut vinegraitte sauce. (2)</span><span class="price"> $4.95 </span>
	</p>
	</li>
</ul>

</div><!--menu-->
  	

</div><!--contents-->
</body>
</html>

**Tyssen** · Jan 9, 2007 18:51

Originally Posted by amy55407

In Firefox, the dotted line drops down to the next line and doesn't run across from the item to the price. Neither of those things happen with Tyssen's page.

Try this instead:

Code:

#menu { width:100%; }

#menu li {
    width: 100%;
    position: relative;
    margin-bottom: 1em;
    border-bottom: 1px dotted #000;
}

#menu li p { margin: 0 0 -5px 0; }

#menu span {
    position: relative;
    bottom: -1px;
    padding: 0 1px;
    background-color: #E7DB84;
}

#menu span.price { 
    position: absolute;
    right: 0px; bottom: -6px;
}
#menu h2 {
    color: #630000;
    font-family: "Times New Roman", Times, serif;
    font-size: 1em;
    font-weight: bold;
}

You'd left off the negative bottom margin on the p which pulls it down over the dotted line. The negative margin on the h2 isn't needed either cos it messes things up.
Also, you don't need to add a class of .item to the first span. There's rules that need to apply to both spans (bottom, padding & bg-color) which is the way I set it up originally.

Originally Posted by amy55407

But, I was sort of able to do the menu with Tyssen's code. I did an unordered list because some of the later items added to the list are A., B., C., etc.

An ordered list is still the best choice because a, b, c is an order too. If you want to have a list of numbers followed by a list of letters, use two different <ol>s and give the one with letters a list-style of lower-alpha or
upper-alpha.

Originally Posted by amy55407

One other thing. Some of the menu items have one price for say tofu and another for chicken. I couldn't figure out how to get two dotted linesfor one list item when there were two prices. Eg.,

Item 10 Pad Thai
With Tofu......................$7.95
With Chicken..................$8.95

To do that, you could maybe put the lines that aren't on the bottom inside another container (a div) to which you'd attach a bottom border. You'd need a new div with a border for each line.

**amy55407** · Jan 10, 2007 19:28

Thanks, that helps. I never thought of a <span> tag as standing alone. I haven't tired the ordered list yet. The only thing I seem to be having trouble with now is a div for 2 prices under one item. I can get the item, the dotted line and the price but I can't seem to get the dotted line to budge from under the item. This is probably because I can make this work but I don't completely understand it. I sometimes exaggerate margins, padding, etc. so I can see what they're doing which should help me figure it out.

User Tag List

Thread: Making a dotted line from restaurant menu item to price

Thread Tools

Display

Making a dotted line from restaurant menu item to price

Bookmarks

Bookmarks

Posting Permissions