SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a dotted line from restaurant menu item to price

    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.

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  3. #3
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doctor, I think I'm suffering from divitis.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amy55407 View Post
    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.

    Quote Originally Posted by amy55407 View Post
    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.

    Quote Originally Posted by amy55407 View Post
    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.

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •