SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to present a menu of items using html

    Hi all,

    Im trying to work out the best way to present a restaurant menu so that it looks like this on the site:

    Item #1..............................1.23
    Item thats #2......................1.23
    Item that could be #3...........1.23

    First of all I placed the text in a list and floated it left then placed the prices in another list and floated it left also to line them up but I dont think this is correct as if the text has to take up 2 lines then the prices become jumbled.

    Anyone any suggestions on how I can present this kind of info properly?

    Thanks in advance

    Kyle

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you post your current code we might be able to better assist. There are a few different approaches to accomplish what you're trying to do.

  4. #4
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! cheers kohoutek

  5. #5
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    Having problems in ie7, main background not appearing. Iv tried clearing floats etc but dont seem to be able to fix the problem, can anyone help?

    page is http://www.kylehouston.com/icehouseo...restaurant.php

    Thanks in advance!

    Kyle

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    HI, untested, but the elements that don't have hte images showing probably just need haslayout. Try giving it min-height:0;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Zealot huit's Avatar
    Join Date
    Nov 2009
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would be a good case of when to use tables, not only for accessibility but for ease of styling. When you use tables you can set the width of each column and your prices will all line up. You'd only need two columns, one for item name (and wide enough for dots) and the other for the pricing.

    In cases like this I've used a repeating background for the dots to fill across the width of the item cell and apply the background color to the text (probably needs to be contained in a <span> or <p> tag) so that you don't get the dots behind your text.

    Or you could use the CSS -:after pseudo class if you aren't really concerned about cross-browser support (it works in IE8 but fails in IE6 and IE7).

    The background method would ensure that the dots all line up exactly since the :after pseudo element will start them wherever the text ends.


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
  •