Prev: menu link to not change color
Next: Material that does no scroll in web page
From: Brian Kendig on 14 Jan 2008 13:54
I'm trying to make a web page with a restaurant menu on it. Each line
on the menu is the name of a dish (left-justified) and that dish's
price (right-justified), with a dotted line between them. I'm doing
something similar to this menu:

http://cunardrestaurant.com/images/menu6.jpg

But three things make it difficult: (1) the names of the dishes are
all different lengths, (2) the prices can be different lengths, and
(3) some of the names of the dishes can be so long that they wrap onto
a second line. I want the dotted line to go from the end of the last
line in the dish's name to the beginning of the price, with no gaps.

How can I achieve this?

From: Beauregard T. Shagnasty on 14 Jan 2008 15:08
Brian Kendig wrote:

> I'm trying to make a web page with a restaurant menu on it. Each line
> on the menu is the name of a dish (left-justified) and that dish's
> price (right-justified), with a dotted line between them. I'm doing
> something similar to this menu:
>
> http://cunardrestaurant.com/images/menu6.jpg
>
> But three things make it difficult: (1) the names of the dishes are
> all different lengths, (2) the prices can be different lengths, and
> (3) some of the names of the dishes can be so long that they wrap
> onto a second line. I want the dotted line to go from the end of the
> last line in the dish's name to the beginning of the price, with no
> gaps.
>
> How can I achieve this?

The first few hits at Google for: dotted line on restaurant menu

This one is rather simple:
http://www.search-this.com/2007/11/26/css-a-recipe-for-success/

--
-bts
-Motorcycles defy gravity; cars just suck
From: Gus Richter on 15 Jan 2008 14:32
Brian Kendig wrote:
> I'm trying to make a web page with a restaurant menu on it. Each line
> on the menu is the name of a dish (left-justified) and that dish's
> price (right-justified), with a dotted line between them. I'm doing
> something similar to this menu:
>
> http://cunardrestaurant.com/images/menu6.jpg
>
> But three things make it difficult: (1) the names of the dishes are
> all different lengths, (2) the prices can be different lengths, and
> (3) some of the names of the dishes can be so long that they wrap onto
> a second line. I want the dotted line to go from the end of the last
> line in the dish's name to the beginning of the price, with no gaps.
>
> How can I achieve this?
>

See if this will suffice:

<style type="text/css">
..menuitem {
width: 400px; /* choose your desired width */
border-bottom: dotted 1px black;
text-align: right;
clear:left;
}
..name {
background: white;
float: left;
margin-top: 3px;
}
..price {
background: white;
position: relative;
top: 3px;
}
</style>
</head>
<body>
<h1>Using Position Relative</h1>

<div class="menuitem">
<span class="name">Steak Diane</span>
<span class="price">15.00</span>
</div>

<div class="menuitem">
<span class="name">Wine "Glen Bretton"</span>
<span class="price">150.00</span>
</div>

</body>
From: Brian Kendig on 16 Jan 2008 09:07
On Jan 14, 3:08 pm, "Beauregard T. Shagnasty"
<a.nony.m...(a)example.invalid> wrote:
> This one is rather simple:http://www.search-this.com/2007/11/26/css-a-recipe-for-success/

Thank you for the link! Actually, right after I posted my original
question, it finally occurred to me to add 'restaurant menu' to my
search for CSS (instead of just 'menu') and then I found that same
page. :) I appreciate the clue!

 | 
Pages: 1
Prev: menu link to not change color
Next: Material that does no scroll in web page