Post Archive
› July 12, 2005
How to style a restaurant menu with CSS
As every Italian, I love cooking and most of all eating... so the example I'm going to present here is a restaurant menu with CSS. But before going to see the details of its implementation, let me preface with a little background information.
Recently, two techniques on clearing floats without structural markup changed a bit our (or, at least my) way of HTML and CSS coding. The first is the FnE (Float Nearly Everything) by Steve Smith and the second one is Simple Clearing of Floats by Paul O'Brien. These techniques are really helpful, since we don't have to contain floats with markup additions anymore.
Another good point is that sometimes using the clear property is not
possible, especially when the element we're going to apply this property is flanked on
one or both sides by floated elements.
So we have learned how to contain floats without extra markup, even without
using the clear property. My challenge was: is it possible to clear the influence
of a previous floated element without using clear itself?
The answer is yes, we can. The following CSS rule:
div.whatever{clear: both}
is equivalent to the following:
div.whatever{float: left; width: 100%}
That's it. Now we're ready to see and detail the implementation of the example we presented in the opening. It's a restaurant menu with Italian entrees (ingredients and descriptions are real, prices are likely). It has been published today also in Italian as the final part of a three-part series on definition lists.
Let's start from the markup. The whole menu is wrapped in a div id="menu",
the sections are introduced by h2 and the entrees are marked-up with definition lists.
Please note that I've wrapped a single entree within a dl.
This was one of the possible ways (and maybe the most semantical between non-semantical solutions)
to get the dots between entree name and prices without posing too much limits on font size or
lines number. Yes, the markup is a little bit abundant, but I really love dots and
in the end the topic of this article is CSS. So here's the markup for a single entree:
<dl>
<dt>Entree name</dt>
<dd class="price">Price goes here</dd>
<dd class="ingredients">Description and ingredients.</dd>
</dl>
Now let's see the core CSS of the example. Each definition list will contain floated elements, so I've used the easy clearing of floats in order to wrap them entirely. Dots, which are simply done with a 10x3 pixels transparent gif, are repeated horizontally with an em y-axis value:
dl{width: 100%;overflow: auto;margin: 0 0 1em;
background: url(dot.gif) repeat-x 0 1.2em}
If you're wondering why I've used 1.2em: it's because both entree
names (dt) and prices (dd class="price") are 130% of the normal
font-size. Try to change the font-size of your browser, and you'll
see the dots will still guide the entree and prices the right way. They're floated
respectively left and right like this:
dt,dd.price{background: #FFF;font-size: 130%;font-weight: bold}
dt{float: left;padding-right: 3px;color: #F70000}
dd{margin:0}
dd.price{float: right;padding-left: 3px;color: #AAA}
I've used partial grouping in order to lighten the CSS, but it should be quite easy
to understand. I've added a white background to cover the dots and a padding to both entree
name and prices in order to place at little distance from them. Default margins for dd are resetted.
Now the final part. In the case of the example I could have used the clear
property for description, but in most complex cases, as is the menu is immersed in a two or
three columns float layout, using clear without breaking or messing things is impossible.
So here it goes, the dd class="ingredients" emulates the effect of clear:both
without using it:
dd.ingredients{float: left;width: 100%;padding: 3px 0;
font: italic 100% Georgia,Times,sans-serif;color: #555}
That's all: you can view again the example. Compatibility should be quite good: it has been tested with success in IE 5.x, IE6, Firefox, Opera and Safari. Enjoy!
Comments
1. July 13, 2005 10:10 AM
2. July 13, 2005 04:36 PM
3. July 13, 2005 05:37 PM
4. July 13, 2005 06:29 PM
Pete Lasko Posted…
This approach could also apply to event roster (with times, or guest speaker names), tables of contents, etc.
5. July 13, 2005 07:34 PM
(was JWZ) Posted…
Defamatory, unproductive comments will be removed - comment removed by Nate
6. July 13, 2005 08:10 PM
jerome Posted…
JWZ: Speaking of problems from 1994...your nightclub's website could use a redesign.
7. July 14, 2005 05:11 AM
mirod Posted…
Very nice. I am not sure I would have used dl/dt/dd as semantically this is not quite far from a definition list, especially as you have to break each entry into its own dl (why ô why isn't a dl a list of di (definition items), each of those being dtdl+?). I would probably have used a div/p/span approach.
In any case, this is a minor gripe (and a pet peeve of mine;--), nice job, thanks.
8. July 14, 2005 07:32 AM
Vitaly Friedman Posted…
Great work, Alessandro, thanks. However, I'd like to post this link - maybe this "standard" menu (download the .pdf-file) will turn out to become the inspiration for the following versions of your restaurant menu ;)
9. July 14, 2005 10:31 AM
10. July 14, 2005 05:16 PM
Todd Dominey Posted…
This is something I've been wanting to figure out for a long time. I tried something similar a few years ago, but couldn't quite get it to work. So after reading this I went back to an old site I designed for a restaurant and overhauled the menu. Check it out:
http://earlygirleatery.com/menu.shtml
I made a few modifications to the code, namely adding subclasses to handle items with more than one price (lines like 'add chicken'). Oddly, IE/Win kicked on scrollbars for a few of the items for no apparent reason, so I added a little CSS hackery to force IE/Win into never using scrollbars, without affecting other browsers. As in...
dl {overflow:auto;_overflow:visible}
Everything but IE ignores the underscore version, which IE/Win needed to avoid the scrollbars.
Thanks so much for posting this!
11. July 14, 2005 05:58 PM
wisbin Posted…
I remember an old discussion/experiment how to create the dotting. Long time ago :)
.. I would make the dd.ingredients a bit smaller though, so the price stands out a bit more.
thanks for sharing!
12. July 14, 2005 06:21 PM
Alessandro Posted…
Todd, your menu is really nice looking! For the scrollbar problems, you may try to use the FnE method, as is:
dl{float:left;width:100%}
For what I've seen, it works in the same way to contain floats, and in this case you shouldn't get scrollbars.
The dots in your case could be reapeated at 1.1em, 1em or even also at 0.95em (effectively, I've used the 1.2em value because of the bigger font for entree name and prices).
13. July 14, 2005 07:58 PM
Jürgen Posted…
@Todd
In my Firefox 1.0.5 + Mozilla (Linux) your menu is wildly jittering when I do a mouse over on the menu's menu bar. The menu looks great, btw.
14. July 15, 2005 08:37 AM
15. July 17, 2005 12:08 AM
Anthony Yeung Posted…
First of all, the coding looks great. No doubt on that.
However, on the design side of things, the menu does not look particulary impressive. It simply doesn't hit it for me. For the lack of I better word, I think it looks ugly.
The colour scheme and choice of typography is bad. It's lacking any form and again, I can't stand the Trebuchet MS, it's really killing me.
Just My two cents. Slap back at me if you think I'm wrong.
16. July 17, 2005 09:53 AM
Andreas Posted…
Anthony - Alessandro's menu is just a proof-of-concept, illustrating how you can achieve a certain effect while keeping the code as compact as possible. Complaints about typography, colour scheme, etc. are kind of off-topic, to be honest.
17. July 19, 2005 01:11 PM
Charlie Posted…
In Netscape Nav 4 (the acid test for backwards compat. I get black boxes with black text for each item on that link. Just an FYI.
18. July 21, 2005 04:32 AM
Albatross2147 Posted…
To be quite frank who cares about NN4 or IE5 mac - it's ages I have seen them show up on the logs of the 100s sites we host.
19. July 22, 2005 10:56 AM
Darrel Posted…
I would probably have used a div/p/span approach.
But that's not nearly as semantic. The list approach here is much more semantic. Not sure if it's better than a good ol' table (as menu items really are tabular data) but it's definitely better than divs/spans everywhere. Which leads me to...
To be quite frank who cares about NN4 or IE5 mac - it's ages I have seen them show up on the logs of the 100s sites we host.
Well, that's the beauty of an approach like this. You CAN care about them. Just deliver them the unstyled content. They still have an easy to read menu, albeit just not as pretty.
20. September 16, 2005 12:45 AM
Lea de Groot Posted…
I found that if I use this layout in a horizontally resizable block then I needed to add overflow: hidden to the dl style. Otherwise very nasty vertical and horizontal scroll bars appeared on the dl. Looked really bad, and not something the user is used to seeing. :(21. September 16, 2005 12:45 AM
Lea de Groot Posted…
Err, meant to say - scrollbars appear in IE 622. December 6, 2005 08:06 AM
Posted…
Anthony - Alessandro's menu is just a proof-of-concept, illustrating how you can achieve a certain effect while keeping the code as compact as possible. Complaints about typography, colour scheme, etc. are kind of off-topic, to be honest.
23. December 29, 2005 07:31 AM
kamal Posted…
please send me drop down menu for mine website so please contact me immidieatly untitlled verson of ur company so please contact me at 989156189524. March 3, 2006 08:21 AM
applebees Posted…
The colour scheme and choice of typography is bad. It's lacking any form and again, I can't stand the Trebuchet MS, it's really killing me.
25. March 20, 2006 05:30 AM
Avasilcai Daniel Constantin Posted…
I think this is very interesting. I will use with the next site i build. I design an hotel website, an my client want's the daily menu, so now i've solve 2 problems writing a menu in word and print and then write on website on daily menu page. Now my client can write the menu, on web and printed from there.
steve Posted…
Looks appetizing... div for two please.