PDA

View Full Version : Resolved how to present a menu of items using html



kyllle
Mar 24th, 2010, 05:06 PM
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

DJCMBear
Mar 24th, 2010, 05:28 PM
This is probs the best and most easiest way to do it:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<title>Untitled Document</title>
<style type="text/css" media="screen">
#R_menu {
width: 300px;
}
#R_menu .Item, #R_menu .Headers {
width: 100%;
border-bottom: 1px solid #CCCCCC;
padding: 15px;
}
#R_menu .Item .Name, #R_menu .Headers .Name {
float: left;
}
#R_menu .Item .Price, #R_menu .Headers .Price {
float: right;
}
#R_menu .Headers .Name, #R_menu .Headers .Price {
font-weight: bold;
}
</style>
</head>
<body>
<div id="R_menu">
<div class="Headers">
<span class="Name">Item Name</span>
<span class="Price">Price</span>
</div>
<div class="Item">
<span class="Name">Item #1</span>
<span class="Price">&pound;1.23</span>
</div>
<div class="Item">
<span class="Name">Item thats #2</span>
<span class="Price">&pound;1.23</span>
</div>
<div class="Item">
<span class="Name">Item that could be #3</span>
<span class="Price">&pound;1.23</span>
</div>
</div>
</body>
</html>

Excavator
Mar 24th, 2010, 05:38 PM
Hello kyllle,
This is marked solved, did you already figure this out?
A while back I did a table of contents that looks exactly like what you're wanting your menu to look like.
I used a ul with 3 spans in each li to control text placement.

I've rarred the whole thing up since the .... is a repeated image, check it out here -deleted

kyllle
Mar 24th, 2010, 06:23 PM
Hey Excavator,

Yeah i found an example online http://www.pmob.co.uk/search-this/list-with-dotted-leader9.htm but il def have a lok at your example also! Thanks!