CSS Restaurant Menu — CSS Wizardry Toybox — CSS, Web Standards, Typography, Grids and now HTML5 (HTML5 Version)

Using CSS and semantics to build a restaurant menu

When out having a meal with a few guys from work once we got talking about the menu, and how it would be intereting to work on a restaurant website in terms of using semantics and CSS to build menus properly. When I got in that night I had a spare few minutes and came up with the following lightweight and semantic xHTML with a sprinkle of CSS:

Shitake, Portobello, button mushrooms (v) £10.50: & leeks with blue cheese guacamole & home-made salsa
Chicken fillet strips £12.50: with lemon & paprika, creamy guacamole & home-made salsa
Flame-grilled sirloin steak £13.50: with horseradish guacamole & salsa Criollo

Markup

<dl>
  <dt>
    <strong>Shitake, Portobello, button mushrooms (v)</strong>
    <span>&pound;10.50</span>
  </dt>
  <dd>&amp; leeks with blue cheese guacamole &amp; home-made salsa</dd>
  <dt>
    <strong>Chicken fillet strips</strong>
    <span>&pound;12.50</span>
  </dt>
  <dd>with lemon &amp; paprika, creamy guacamole &amp; home-made salsa</dd>
  <dt>
    <strong>Flame-grilled sirloin steak</strong>
    <span>&pound;13.50</span>
  </dt>
  <dd>with horseradish guacamole &amp; salsa Criollo</dd>
</dl>

CSS

dt{
  position:relative;
  background:url(images/dot.gif) bottom left repeat-x;
}
dt strong{
  background:#fff;
  font-weight:bold;
  padding:0.1em 0.3em 0.2em 0;
}
dt span{
  position:absolute;
  right:0;
  background:#fff;
  padding:0.1em 0 0.2em 0.3em;
}

Adding PHP

Further to a discussion on a web design form I decided to integrate some PHP with this to build it dynamically.

CSS Wizardry CSS Restaurant Menu

[Content]

Using CSS and semantics to build a restaurant menu

The Menu

Markup

CSS

Adding PHP

[Sub Content]

From the Toybox

Twitter

Resources