Setting Up Your Restaurant Menu Using CSS

Print Friendly, PDF & Email

If this blog post helped you in some way, please leave a comment letting me know. Thanks!

Looking at a restaurant menu, you may think it is quite easy to get the item on the left and the prices on the right. After all, in Microsoft Word, you can just hit tab a couple times after each item and voila!

Unfortunately for coding for the web, its not nearly as easy. You have three options. The easiest is to just create a giant image and use that with a couple splices here and there. The other option is two use a table layout. But, if you’re a <div> purist, you may have just grimaced at the mention of using tables. So, how do you setup your menu using as little code as possible and keeping it simple?

I have found <span> to be my new best friend. Let’s start with your CSS file first. The following code will allow you to use an unordered list for each item. After each item, you’ll insert a <span> with the price and this will display at the far right. Now, to make sure this doesn’t affect any other elements on your page, I recommend wrapping it all in a <div>. I called my <div> #foodmenu. I didn’t use #menu as I needed my menu to be W3CĀ compliantĀ for HTML5.

#foodmenu li span{float:right;}
#foodmenu li em{float:left; font-style:normal;}
#foodmenu li{width:100%; float:left}

Now for your actual HTML.

<div id=”foodmenu”>
<li>Sandwich<span>$7.99</span></li>
<li>Salad<span>$6.99</span></li>
<li>Burger<span>$5.99</span></li>
<ul>
</div>

From here, you can easily go back and adjust your CSS to change how the menu is displayed and adjust your positioning. You can see how easy and simple the actual HTML is to place. If you compare this to a <table> layout, you’ll see how much more complicated the code can get, not to mention harder to style.

Example screenshot based on the code above:

css restaurant menu

For help in setting up your own online restaurant menu, send me an e-mail.

, , , , ,

2 Responses to Setting Up Your Restaurant Menu Using CSS

    Error thrown

    Call to undefined function ereg()