How to present a menu of items using html

HTML & CSS
1

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

http://www.pmob.co.uk/search-this/list-with-dotted-leader8.htm

3

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

Excellent! cheers kohoutek

5

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/icehouseonline.co.uk/new/restaurant.php

Thanks in advance!

Kyle

6

HI, untested, but the elements that don’t have hte images showing probably just need haslayout. Try giving it min-height:0; :slight_smile:

7

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.