Tue, 2004-01-13 22:04
I'm trying to do something that looks like a restaraunt menu. However, I'm pretty new to CSS, and I'm not doing so well at solving this problem.
I'd like to replicate how a menu often works.
1) Assorted Danish $9.00/doz
petit $6.00/doz
2) Assorted Muffins $7.50/doz
I defined a class called .prices, and put span tags around the prices with class=".prices" in each span. It's defined .prices {float: right;} and it comes out looking like:
1) Assorted Danish
petit $6.00/doz
2) Assorted Muffins $9.00/doz
$7.50/doz
As you can see, the prices aren't even in the same order as they were before. That's bad, because I'm actually advertising the wrong price with my items. Or at least it appears that way.
I would like to list each of these items as parts of an ordered list, which is how they appear in print. If I can't, I'll live. No biggie.
When all is said and done, I'd like for this to work in as many browsers as possible, but if NS4 users must suffer some uglyness, so be it, as long as it makes some sense.
All help is appreciated!
Thanks,
Frank
Thu, 2004-01-15 01:42
#1
left and right align, in the same line
This looks like a job where you can get away with using a table. You're not using the table for page layout as such but can legitimately say you are presenting data - which is what tables were designed to do on web pages. Go on - you know you want to - just...one...small...table. (cackles maniacally and shakily reaches for the phone to ring the Betty Ford tables addiction clinic)...
Thu, 2004-01-15 03:49
#2
left and right align, in the same line
I agree...If you know how to do tables well then go ahead with it...unless you want to be a css "purist" of course. In this case you would use divs with a float:left attribute and you would have a fixed width. This would be more flexible and less code involved. Its really up to you though.
Stylesheet properties:
div.menuitem {
float:left;
width: (whatever needed);
}
div.price {
float:left;
width: (whatever needed);
}
For each Menu Item:
<div class="menuitem"> Assorted Danish </div> <div class="price"> $9.00/doz </div><br />
Thu, 2004-01-15 03:54
#3
left and right align, in the same line
Actually if you wanted to have multiple pricing options you might want to do something like this:
div.menuitem {
float:left;
}
div.price {
margin-left: (distance from left desired)
(also any top or bottom margins separating prices)
}
<div class="menuitem"> Assorted Danish </div> <div class="price"> $9.00/doz </div> <div class="price"> petit $6.00/doz </div><br />