3 replies [Last post]
Surreal-Dreams
Offline
newbie
Charlottesville, VA
Last seen: 17 years 1 week ago
Charlottesville, VA
Timezone: GMT-5
Joined: 2004-01-13
Posts: 1
Points: 0

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

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 17 years 5 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

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)...

PAUL - SkyRocket Design Co
web design sydney northern beaches

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 17 years 2 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

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 />

http//mark.axsysdesign.com

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 17 years 2 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

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 />

http//mark.axsysdesign.com