14 comments

  • Mike RundleMike Rundle, over 3 years ago

    You should use an HTML definition list, it was made for this. More semantically-correct than any other tags you could use.

    3 points
  • Gergo Bekes, over 3 years ago

    Almost forgot to add the codepen link http://codepen.io/seanclayton/pen/ryPWMM

    3 points
    • Antoine Louis, over 3 years ago

      Nicely done, I forked and styled it. I also replaced the "dashed" by "dotted". http://codepen.io/antoinelouis/pen/qrvEVd

      3 points
      • Dirk HCM van BoxtelDirk HCM van Boxtel, over 3 years ago

        Sweet. Love where you took this :D

        I'll fight you though!

        Quick note;

        • Make sure you set a line-height (1.5em for body, 1.2 for headings) - especially when you have a large x-height. In this case I'd go 1.65-ish em. That way your copy doesn't risk looking like a brick :x (sorry! lol)

        I personally almost always use relevant copy. Makes it easier to spot issues.

        Also, I love not using upper-case. That way you can use uppercase letters to show abbreviations, names, etc. Just gives you more room to let the copy do the talking!

        With those tweaks, and a wee bit of padding rejig, here's my iteration :D

        http://codepen.io/AboutaDirk/pen/EWMXXE

        Who's next? :p

        0 points
  • Cooper McGoodwin, over 3 years ago

    Will this menu be printed as well?

    If so, then have you considered using LaTeX? I would code the menu in LaTeX, then use the PDF to print and display online. Reduces the amount of places you need to manage changes.

    http://tex.stackexchange.com/questions/38091/document-class-for-a-restaurant-menu

    2 points
    • Tristam GochTristam Goch, over 3 years ago

      Seems like an odd choice; if your endgame is just to have a PDF then any visual design tool would be fine, no need to code.

      There's nothing there that couldn't be handled by some print CSS and HTML, so why forego all the benefits of that?

      3 points
  • Mirza SadovicMirza Sadovic, over 3 years ago

    If you're avoiding flexbox for whatever reason, one option is to create a dot (e.g. border-bottom or top) div and then put it behind the title/price. Set relative position accordingly to center the dots. Layer things with z-index. Put background color on the title/price div to match the background color of choice.

    It's a hack, and it won't really work if you have variable background colors or a background image behind it, but it's the best method unless you're using flex.

    1 point
    • Olivier FOlivier F, over 3 years ago

      The only reason I can think of to avoid using flexbox is to support old ie. Are there any other reasons?

      0 points
      • Mirza SadovicMirza Sadovic, over 3 years ago

        IE support is sketchy, up to 11. Of course, you can choose to ignore that, considering thats not a significant part of the market nowadays.

        0 points
  • Art VandelayArt Vandelay, over 3 years ago

    Definition List or table plus schema formatting.

    0 points
  • Dean HaydenDean Hayden, over 3 years ago

    Tables. That's how you'd do it for print, why do it any other way for web?

    0 points
    • Account deleted over 3 years ago

      Yes, I think tables are semantically correct (menus are just fancy pricing tables).

      0 points