Speisekarte Preisliste Inhaltsverzeichnis

Speisekarten, Preislisten und Inhaltsverzeichnisse

Einfache Beispiele für Speisekarte oder Inhaltsverzeichnis mit Dot Leaders in einem HTLM-Objekt.

Am Ende der Seite gibt es Tipps zur Formatierung der Texte und zu den Einstellungen für die Ränder.

Beispiele:

Speisekarte mit Beschreibung

Gericht Nr. 1: 15,80

Gericht Nr. 2: 17,50

Gericht Nr. 3: 22,30

Gericht Nr. 4: 28,50

Gericht Nr. 5: 17,90

Einfaches Inhaltsverzeichnis

Einleitung: 1

Kapitel 1: 2

Kapitel 2: 3

Kapitel 3: 4

Zusammenfassung: 5

Speisekarte mit Beschreibung

Gericht Nr. 1: 15,80

Gericht Nr. 2: 17,50

Gericht Nr. 3: 22,30

Gericht Nr. 4: 28,50

Gericht Nr. 5: 17,90

Einfache Speisekarte

Salmon Ravioli: 7.95

Fried Calamari: 8.95

Almond Prawn Cocktail: 12.95

Bruschetta: 5.25

Margherita Pizza: 0.95

Einfaches Inhaltsverzeichnis

Einleitung: 1

Kapitel 1: 2

Kapitel 2: 3

Kapitel 3: 4

Zusammenfassung: 5

Einfache Speisekarte

Salmon Ravioli: 7.95

Fried Calamari: 8.95

Almond Prawn Cocktail: 12.95

Bruschetta: 5.25

Margherita Pizza: 0.95

Einfaches Inhaltsverzeichnis

Einleitung: 1

Kapitel 1: 2

Kapitel 2: 3

Kapitel 3: 4

Zusammenfassung: 5

Einfache Speisekarte

Salmon Ravioli: 7.95

Fried Calamari: 8.95

Almond Prawn Cocktail: 12.95

Bruschetta: 5.25

Margherita Pizza: 0.95

Beispiele ohne Punkte als Screenshots

Kleine Anleitung - siehe unten bei:

>> Aussehen der Punktreihe ändern

A) Einfache Variante

Im HTML-Objekt wird dieser Code unter "HTML-Code" eingefügt:

Einfache Speisekarte
<dl>
   <dt>Salmon Ravioli</dt>
   <dd>7.95</dd>
</dl>
<dl>
   <dt>Fried Calamari</dt>
   <dd>8.95</dd>
</dl>
<dl>
   <dt>Almond Prawn Cocktail</dt>
   <dd>12.95</dd>
</dl>
<dl>
   <dt>Bruschetta</dt>
   <dd>5.25</dd>
</dl>
<dl>
   <dt>Margherita Pizza </dt>
   <dd>0.95</dd>
</dl>

Und diesen Code im gleichen HTML-Objekt unter "Erweitert":

dl {
overflow: hidden;
font-weight: bold;
margin: 12px;
}
dt {
float: left;
padding: 0 .4em 0 0;
margin: 0;
}
dd {
float: right;
padding: 0 0 0 .4em;
margin: 0;
}
/* That's the leader! */
dl:after {
content: "";
display: block;
overflow: hidden;
height: 1em;
border-bottom: 1px dotted;
}

B) Variante mit Beschreibung

Im HTML-Objekt wird dieser Code unter "HTML-Code" eingefügt:

<div style="font-size: 24px; font-weight: bold, margin: 20px">Einfache Speisekarte</div>
<dl>
   <dt>Gericht Nr. 1</dt>
   <dd>15,80</dd>
</dl>
<p class="menu-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<dl>
   <dt>Gericht Nr. 2</dt>
   <dd>17,50</dd>
</dl>
<p class="menu-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<dl>
   <dt>Gericht Nr. 3</dt>
   <dd>22,30</dd>
</dl>
<p class="menu-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<dl>
   <dt>Gericht Nr. 4</dt>
   <dd>28,50</dd>
</dl>
<p class="menu-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<dl>
   <dt>Gericht Nr. 5</dt>
   <dd>17,90</dd>
</dl>
<p class="menu-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

Und diesen Code im gleichen HTML-Objekt unter "Erweitert":

dl {
overflow: hidden;
font-weight: bold;
margin: 12px;
}
dt {
float: left;
padding: 0 .4em 0 0;
margin: 0;
}
dd {
float: right;
padding: 0 0 0 .4em;
margin: 0;
}
/* That's the leader! */
dl:after {
content: "";
display: block;
overflow: hidden;
height: 1em;
border-bottom: 1px dotted;
}
.menu-text { text-align: left; margin: 15px;
}

C) Variante mit kleinen Bildern

Diese Abschnitte um IMG-Tags für kleine Bilder erweitern, z.B. für Schärfe der Gerichte oder für vegetarische Gerichte:

<dl>
<dt>Gericht Nr. 2 <img src="images/pepperoni-1.gif"><img src="images/pepperoni-1.gif"></dt>
<dd>17,50</dd>
</dl>

D) Variante mit größeren Bildern

Diesen Abschnitt mit Beschreibung bei Bedarf um Code für Zeilenumbrüche und Bild erweitern, z.B. für Fotos der Gerichte.

<dl>
<dt>Gericht Nr. 3</dt>
<dd>22,30</dd>
</dl>
<p class="menu-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.<br><br><img src="images/menue123.jpg" width=100%"></p>

Nach der Beschreibung den HTML-Code <br><br> für 2 Zeilenumbrüche und den IMG-Tag mit width="100%" für das Foto hinzufügen.

Tipps zur Formatierung der Texte

CSS-Code:

color: red; <--- (Schriftfarbe)
font-weight: bold; <--- (Fette Schrift)
font-style: italic; <--- (kursive Schrift)
font-size: 14px; <--- (Schriftgröße)
font-family: Arial, Helvetica, sans-serif; <--- (Schriftarten)

margin: 20px; <---- (Aussenabstand, z.B. beim Text "Speisekarte")

Hinzugefügter CSS-Code im HTML-Objekt unter "Erweitert":

dl {
overflow: hidden;
margin: 12px;
font-weight: bold;
font-size: 14px;
}

Hinzugefügter HTML-/CSS-Code im HTML-Objekt unter "HTML-Code":

<div style="font-size: 24px; font-weight: bold, margin: 20px">Speisekarte</div>

Aussehen der Punktreihe ändern:

Sollen keine Punkte erscheinen, dann bei "Erweitert" beim unteren CSS-Code satt 1px einfach 0px angeben.

/* That's the leader! */
dl:after {
content: "";
display: block;
overflow: hidden;
height: 1em;
border-bottom: 0px dotted;
}

Zeilen mit mehr oder weniger Abstand:

Damit die Zeilen einen größeren oder kleineren Abstand haben, einfach die Zahl bei margin: 12px; ändern.

dl {
overflow: hidden;
font-weight: bold;
margin: 12px;
}

Tipps für Ränder:

Das HTML-Objekt im Raster markieren und oben auf "Stil" klicken, hier können Breite, Farbe, runde Ecken und Schatten des Rahmen sowie die Hintergrundfarbe eingestellt werden. Es sind auch ein Hintergrundbilder möglich, dabei kann die Deckkraft reduziert werden, damit das Bild blasser wird und der Text besser lesbar ist.

Dabei ist zu beachten, wenn das HTML-Objekt neben einem anderen Objekt platziert wird, dass das daneben liegende Objekt nicht länger ist, sonst verlängert sich der Rahmen oder die Hintergrundfarbe (wenn ohne Rahmen) und es entsteht unten ein unschöner Leerraum.

In der Vorschau oben auf die verschiedenen Geräte-Symbole klicken, um die verschiedenen Bildschirmbreiten zu testen.