logo
  Menukaart 1
  Eén van de vele problemen waar je tegen aan loopt als je een soort menukaart wilt maken dat je dat wel kan oplossen met een table zoals hieronder.

lijstje blz 12
klein lijstje blz 23
groot lijstje blz 45

Maar je komt al snel in de knoop als je het duidelijker wilt maken door er een lijn tussen te zetten of puntjes. Maar ook hier is een oplossing voor kijk maar eens hieronder

Soepen

Hoofdgerechten

Nagerechten

Dranken

Je ziet hier 4 verschillende opmaken voor de menu's (soepen, hoofdgerechten, nagerechten en dranken) en natuurlijk ken je er iets neerzetten wat je zelf wilt, dit is alleen maar een voorbeeld.
Soepen = met stippelijntjes
Hoofdgerechten = streepjes
Nagerechten = cliparts
Dranken = hiermee kan je alle gerechten appart maken.

 
IN DE CSS
body {
background: #ffffff;
FONT-FAMILY: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
text-decoration: none;
padding: 0px;
margin: 10px 10px;
}
a {
color: #999;
}
h1 {
FONT-FAMILY: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
margin: -5px;
padding: -5px;
}
.menu {
width: 500px;
list-style: none;
margin: 0px 20px 20px;
padding: 0;
FONT-FAMILY: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}
.menu li {
clear: both;
margin: -3px;
padding: 0px 0px 20px 0px;
position: relative;
border-bottom: dotted 2px #999;
}
.menu strong {
background: #fff;
padding: 0px 10px 0px 0px;
font-weight: normal;
position: absolute;
bottom: -3.5px;
left: 0px;}

.menu em {
background: #fff;
padding: 0px 0px 20px 5px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
position: absolute;
bottom: -23px;
right: 0px;
}
.menu sup {
font-size: 60%;
color: #666;
margin-left: 3px;
}
.style2 li {
border-bottom: dashed 1px #000;
}
.style3 li {
background: url(images/clip.gif) repeat-x left bottom;
border: none;
}
.style4 li {
padding: 0 0 2.3em 0;
border-bottom: dotted 2px #999;
}
.credits {
color: #999;
FONT-FAMILY: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}

 
TUSSEN DE BODY TAGS
<h1>Soepen</h1>
<ul class="menu">
<li>
<strong>Vijgensoep</strong>
<em>4<sup>95</sup></em>
</li>
<li>
<strong>Garnalensoep</strong>
<em>7<sup>45</sup></em>
</li>
<li>
<strong>Gebonden bonensoep</strong>
<em>5<sup>95</sup></em>
</li>
</ul>
<h1>Hoofdgerechten</h1>
<ul class="menu style2">
<li>
<strong>Chinese rijsttafel (2 personen)</strong>
<em>32<sup>50</sup></em>
</li>
<li>
<strong>Boerenkool met worst en spek</strong>
<em>21<sup>00</sup></em>
</li>
<li>
<strong>Hertenbiefstuk</strong>
<em>49<sup>95</sup></em>
</li>
</ul>
<h1>Nagerechten</h1>
<ul class="menu style3">
<li>
<strong>Rock 'n roll jumping sorbet</strong>
<em>9<sup>50</sup></em>
</li>
<li>
<strong>Smartlappen sorbet</strong>
<em>15<sup>00</sup></em>
</li>
<li>
<strong>Kinderijs</strong>
<em>2<sup>99</sup></em>
</li>
</ul>
<h1>Dranken</h1>
<ul class="menu style4">
<li>
<strong>Cola</strong>
<em>2<sup>50</sup></em>
</li>
<li>
<strong>Bier</strong>
<em>3<sup>50</sup></em>
</li>
<li>
<strong>Wijnen</strong>
<em>3<sup>95</sup></em>
</li>
</ul>

 
eind