Menü für Speisekarten erstellen
Du möchtest oder musst eine Speisekarte für dich oder deinen Kunden erstellen, aber hast das Problem, dass Du zwischen dem Menü und dem Preis eine gepunktete Linie brauchst und das auch noch flexibel?
Hier zeige ich eine von vielen Lösungen um das Problem zu beheben.
In diesem Beispiel nutzen ich die Hintergrundfarben die zu meiner Webseite passen. In der CSS hast Du die Möglichkeit die Farben für deine Seite anzupassen.
Text-Modul ohne HTML & CSS
⇓
TEXT-Modul
Frühstück
Kaffee ………………………………………….. 4.20,- €
Kaffee & Gipfeli …………………………….. 6.00,- €
Tee ………………………………………………. 4.00,- €
Ovi ………………………………………………. 4.70,- €
Mittagessen
Schnipo35.00,- €
Rösti28.50,- €
Spätzle12.00,- €
Text-Modul
⇓
Frühstück
Mittagessen
HTML (TEXT-MODUL)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<h3>Frühstück</h3> <ul class="sp_menu"> <li><span>Kaffee</span><span>4.20,- €</span></li> <li><span>Kaffee & Gipfeli</span><span>6,00,- €</span></li> <li><span>Tee</span><span>4,00,- €</span></li> <li><span>Ovi</span><span>4,70,- €</span></li> </ul> <h3>Mittagessen</h3> <ul class="sp_menu"> <li><span>Schnipo</span><span>35,00,- €</span></li> <li><span>Rösti</span><span>28,50,- €</span></li> <li><span>Spätzle</span><span>12,00,- €</span></li> </ul> |
CSS (CODE-MODUL)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
ul.sp_menu { max-width: 100%; /* breite*/ padding: 0; overflow-x: hidden; list-style: none !important; margin-left: -20px !important; } ul.sp_menu li:before { float: left; width: 0; white-space: nowrap; content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; } /* !!! WICHTIG !!! Die folgenden Hintergrund-Farben sollten dem Hintergrund der Website angepasst werden. */ ul.sp_menu span:first-child { padding-right: 0.33em; background: #0e9300; /* farbe produkt*/ } ul.sp_menu span + span { float: right; padding-left: 0.33em; background: #0e9300; /* farbe preis*/ } |