Es gibt immer wieder Situationen wo ich in einem Webprojekt Preise angeben muss und wie immer gibts dafür tausende von möglichen Lösungen. Man könnte alles in verschiedene Divs packen und das eine ganz links und das andere ganz rechts positionieren, man könnte es als Tabelle machen oder oder oder.
Heute zeige ich euch einen Trick wie ihr es als Liste verwenden könnt. So ist es relativ einfach es einzubauen und hat auch eine grosse Freiheit damit es noch weiter ausbauen kann.
Ich liebe diese Lösung vorallem bei Menüs bei Restraurans, Bars usw.
Und selbst Menschen die nicht so computer-affin sind – können damit ihre Daten selbst ändern
Video
HTML
Zuerst einmal müsst ihr die Listenpunkt ein wenig anpassen. Alle Elemente werden in Span Tags eingepckt. Wie in diesem Beispiel hier.
1 | <li><span>XXX</span><span>YYY</span></li> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <h3>Frühstück</h3> <ul class="cb_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="cb_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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ul.cb_menu {
max-width: 100%; /* breite*/
padding: 0;
overflow-x: hidden;
list-style: none}
ul.cb_menu li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
ul.cb_menu span:first-child {
padding-right: 0.33em;
background: #fff; /* farbe produkt*/
}
ul.cb_menu span + span {
float: right;
padding-left: 0.33em;
background: #fff; /* farbe preis*/
} |
0 Kommentare