5 replies [Last post]
Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 24 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

It has been some time here... I hope everyone is well. Although I am not too much involved in the technical aspects anymore, a friend asked me to build a website for his pizza place.

I am looking for opinions, not solutions. The problem is the food menu. You can find an example of how it should appear here: http://cdn.tripwiremagazine.com/wp-content/uploads/2013/04/foodilicious.jpg . Forget the votes; they are not wanted.

I have been a fan of dl solutions from A list apart ever since I read their articles years ago. I find it appropriate as description of the plate and prices define / describe the associated plate. A table is not appropriate here as food name and description would be in the same column.

I look forward to receiving some input.

Stephan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Caposoft, Long time no

Hi Caposoft,
Long time no see.
I think a table would be appropriate with the use of heading for the food name.
You should look at using a schema http://schema.org/docs/schemas.html possibly https://schema.org/FoodEstablishment

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 24 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Tony wrote: Hi Caposoft, Long

Tony wrote:

Hi Caposoft,
Long time no see.
I think a table would be appropriate with the use of heading for the food name.
You should look at using a schema http://schema.org/docs/schemas.html possibly https://schema.org/FoodEstablishment

Thanks Tony. Your opinion is appreciated. Isn't the heading used to define the whole column? This is why I was hesitant using a table. To me, it is more like the food name being the definition term dt, the food description being the definition description dd.

What I have come up with is the following html. Sorry I have not posted it before, it was simply not done by that time. That is probably why I have not had so many responses. Wink

<dl>
<dt>1.</dt>
<dd>Pizza Margherita</dd>
<dd>Ingredients</dd>
<dt>&Oslash; 24cm</dt>
<dd>3,00</dd>
<dt>&Oslash; 28cm</dt>
<dd>4,00</dd>
<dt>&Oslash; 40cm</dt>
<dd>8,50</dd>
</dl>
[code]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

I do like definition lists

I do like definition lists just don't think that is the correct place to use them

Without the schema data this is more like what I was thinking.

<table>
<thead>
<tr><th colspan="2">Items</th><th>Si</th><th>Pri</th></tr>
</thead>
<tbody>
<tr>
<td> <img></td>
<td> 
  <h2>Pan Pizza</h2>
  ....
</td>
<td> 9</td>
<td> 10</td>
</tr>

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 4 years 24 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

I am glad you like definition

I am glad you like definition lists as I hate tables. Laughing out loud This is the reason why I gave up the first time I tried creating a website. It drove me nuts.

I can see where the table makes sense. I was not aware it is semantic using header tag in a table cell. However, I would like to learn. Can you advise why you don't think that is the correct place to use dl here?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Mainly the relationship

Mainly the relationship between the dt and dd items seems incorrect.

Inside a TD you can have any item as far as I know.
The main thing to keep in mind is that the cells in the same row are related.

I don't know where the 1. comes from but it's not correct as a DT in my view.

<dl>
<dt>1.</dt>

would be better semantically as
<ol><li>

Every time i look at the image it screams table to me.
Are you styling the menu to look like the image?