nicht angemeldet
Camping_RIDER
TS
TS
TS
Gunnar Bittersmann
Gunnar Bittersmann
TS
JürgenB
Gunnar Bittersmann
MudGuard
Hallo,
ich möchte eine Speisekarte erstellen, in der Form, dass zwischen Speisen und Preis Punkte sind. Etwa so:
Fisch.....................12,50 €
Überbackene Nudeln.........3,50 €
Fleisch...................23,50 €
Wenn möglich mit CSS.
Geht das?
Viele Grüße Ralf
Aloha ;)
ich möchte eine Speisekarte erstellen, in der Form, dass zwischen Speisen und Preis Punkte sind. Etwa so:
Fisch.....................12,50 €
Überbackene Nudeln.........3,50 €
Fleisch...................23,50 €
Wenn möglich mit CSS.
Geht das?
Klar. Es gibt dafür mehrere Möglichkeiten.
Die einfachsten, aber auch unsinnvollsten, sind die, in denen die Punkte durch ein eigenes HTML-Element repräsentiert werden - zum Beispiel durch eine Leerspalte in einer Tabelle, die einen entsprechenden unteren Rahmen bekommt. Die Tabelle hat auch noch andere Schwachpunkte.
Eine nette Möglichkeit bietet die dl-Liste mit entsprechendem Floating. Ein Beispiel habe ich dir mal schnell zusammengeschrieben.
Vorteil: Semantisch einigermaßen sinnvoll, kein Element nur für die Punkte.
Nachteil: Die Punkte sind durchgängig auch unter Bezeichnung und Preis.
Weiterer (ausgleichbarer) Nachteil: So kann man keine weitere dd-Eigenschaft hinzufügen (zum Beispiel um bei den überbackenen Nudeln klarzustellen, dass Rigatoni verwendet werden), da man schlicht den Preis nicht optimal selektieren kann. Das kann man allerdings umgehen, indem man den Preis-dd's einfach eine entsprechende Klasse mitgibt und diese dann selektiert.
Grüße,
RIDER
@@Camping_RIDER
Weiterer (ausgleichbarer) Nachteil: So kann man keine weitere dd-Eigenschaft hinzufügen (zum Beispiel um bei den überbackenen Nudeln klarzustellen, dass Rigatoni verwendet werden), da man schlicht den Preis nicht optimal selektieren kann.
Wenn man die Gruppierung von jeweils zusammengehörenden dt und dd im Markup mit div-Elementen vornimmt, kann man das mit dd:last-child tun.
Das kann man allerdings umgehen, indem man den Preis-dd's einfach eine entsprechende Klasse mitgibt und diese dann selektiert.
Wozu Klassen, wenn’s doch Pseudoklassen gibt‽ 😜
LLAP 🖖
Aloha ;)
Wenn man die Gruppierung von jeweils zusammengehörenden
dtundddim Markup mitdiv-Elementen vornimmt, kann man das mitdd:last-childtun.Wozu Klassen, wenn’s doch Pseudoklassen gibt‽ 😜
Ich weiß nicht, welche der Möglichkeiten da die sinnvollere ist xD
Aber mal Spaß beiseite: das Problem wird auf CSS-Seite ohne Weiteres lösbar - sobald der has-Selektor mal flächendeckend in CSS verfügbar ist.
Grüße,
RIDER
Hello,
ich möchte eine Speisekarte erstellen, in der Form, dass zwischen Speisen und Preis Punkte sind. Etwa so:
Fisch.....................12,50 €
Überbackene Nudeln.........3,50 €
Fleisch...................23,50 €
Wenn möglich mit CSS.
Ich würde das mit Position Absolute, bzw. Position relative lösen.
Ein Behälter(div), in dem pro Zeile ein repeated Image (die Punkte) untergebracht wird und dann darüber die linken und rechten Textteile der Zeilen angeordnet wetden.
Es geht auch ohne Bild, aber da werden mir die Punkte zu klein.
Eine Lösung siehe Stackoverflow. im Beispiel.
Wenn ich nachher wieder zuhause bin, versuche ich das nochmal zu zeigen.
Glück Auf
Tom vom Berg
Hello,
welcher Troll gibt warum für das Posting Minuspunkte?
Glück Auf
Tom vom Berg
Hallo TS,
welcher Troll gibt warum für das Posting Minuspunkte?
eine negative Bewertung ist kein trollen.
LG,
CK
Hello,
welcher Troll gibt warum für das Posting Minuspunkte?
eine negative Bewertung ist kein trollen.
Ach Du warst das?!
Interessiert mich auch nur, was genau an der Idee schlecht sein soll und wie man es dann besser machen kann.
Glück Auf
Tom vom Berg
Hallo TS,
hör auf mit der Hexenjagd!
welcher Troll gibt warum für das Posting Minuspunkte?
eine negative Bewertung ist kein trollen.
Ach Du warst das?!
Nein.
Interessiert mich auch nur, was genau an der Idee schlecht sein soll und wie man es dann besser machen kann.
das ist legitim. Aber das kann man auch sinnvoller nachfragen als „wer trollt mich da.“
LG,
CK
@@TS
Ich würde das mit Position Absolute, bzw. Position relative lösen.
Ein Behälter(div), in dem pro Zeile ein repeated Image (die Punkte) untergebracht wird und dann darüber die linken und rechten Textteile der Zeilen angeordnet wetden.
Auf die Art wirst du kaum (in allen Fällen!) verhindern können, dass sich Gericht und Preis überlappen.
Es gehf auch ohne Bild, aber da werden mir die Punkte zu klein.
?? Bei border-bottom: 3em dotted wären mir die Punkte eher zu groß.
LLAP 🖖
PS: Damit dürfte auch deine Nachfrage geklärt sein. Kein Troll, sondern jemand mit Ahnung. Weil fachlich unsinnig.
Hello,
Ich würde das mit Position Absolute, bzw. Position relative lösen.
Ein Behälter(div), in dem pro Zeile ein repeated Image (die Punkte) untergebracht wird und dann darüber die linken und rechten Textteile der Zeilen angeordnet wetden.Auf die Art wirst du kaum (in allen Fällen!) verhindern können, dass sich Gericht und Preis überlappen.
Zeig mal bitte ein Beispiel.
Es geht auch ohne Bild, aber da werden mir die Punkte zu klein.
?? Bei
border-bottom: 3em dottedwären mir die Punkte eher zu groß.
Ok, das stimmt. Ist auch nicht genau das Beispiel, das ich bauen wollte.
PS: Damit dürfte auch deine Nachfrage geklärt sein. Kein Troll, sondern jemand mit Ahnung. Weil fachlich unsinnig.
Und wo bleibt die ultimative Lösung des fachlich qualifizierten Meisters?
Glück Auf
Tom vom Berg
Tach!
Und wo bleibt die ultimative Lösung des fachlich qualifizierten Meisters?
Während Gunnar vermutlich an seiner Lösung feilt, kann man ja mal einen Blick in andere Lösungen werfen. "css restaurant menu dotted" sind Stichwörter, mit denen ich solche fand. Es hätte mich gewundert, wenn das Web nicht bereits Antworten auf diese Frage enthalten würde. Restaurants und den Wunsch, die Karte derart zu gestalten, gibt es ja nicht erst seit gestern. Selbst beim W3C gibt es dazu etwas.
dedlfix.
Hello,
Und wo bleibt die ultimative Lösung des fachlich qualifizierten Meisters?
Während Gunnar vermutlich an seiner Lösung feilt, kann man ja mal einen Blick in andere Lösungen werfen. "css restaurant menu dotted" sind Stichwörter, mit denen ich solche fand. Es hätte mich gewundert, wenn das Web nicht bereits Antworten auf diese Frage enthalten würde. Restaurants und den Wunsch, die Karte derart zu gestalten, gibt es ja nicht erst seit gestern. Selbst beim W3C gibt es dazu etwas.
Ich hab noch nicht gefrühstückt. Da bekomme ich gleich Appetit ;-)
Ich würde mich später für die einfachste Lösung entscheiden. Die vom W3C ist schon ganz schön aufgeblasen.
Glück Auf
Tom vom Berg
Hallo Tom,
Ich würde mich später für die einfachste Lösung entscheiden. Die vom W3C ist schon ganz schön aufgeblasen.
was ist an einer zusätzlichen css-Regel aufgeblasen?
Gruß
Jürgen
Und wo bleibt die ultimative Lösung des fachlich qualifizierten Meisters?
Genau das frag ich mich auch!
In PHP gibts str_pad() für dasda. Und wie schon angemerkt, es braucht eine dickengleiche Schriftart. MFG
@@pl
In PHP gibts
str_pad()für dasda. Und wie schon angemerkt, es braucht eine dickengleiche Schriftart.
Und wie schon angemerkt, ist das Quatsch.
LLAP 🖖
Wenn möglich mit CSS.
Natürlich. Erste Voraussetzung ist eine dickengleiche Schriftart, die mit CSS eingestellt wird. MFG
@@pl
Natürlich. Erste Voraussetzung ist eine dickengleiche Schriftart
Ich weiß nicht, ob du ein falsches Wort verwendest oder ob es sich um einen Tippfehler handelt – es heißt dicktengleiche Schrift.
Und das eine solche Voraussetzung ist, ist natürlich Quatsch. Mit Soße à la carte.
LLAP 🖖
Hello,
Wenn möglich mit CSS.
Natürlich. Erste Voraussetzung ist eine dickengleiche Schriftart, die mit CSS eingestellt wird.
Ist nicht unbedingt notwendig, hauptsachd der Font stellt die Ziffern ungefähr gleich breit dar. Sonst siehts auf der Preisseite hässlich aus.
Glück Auf
Tom vom Berg
Hallo TS,
Ist nicht unbedingt notwendig, hauptsachd der Font stellt die Ziffern ungefähr gleich breit dar.
Das sollten die meisten Schriftarten (vielleicht abgesehen von Fantasy-Schriften) tun, und zwar nicht ungefähr sondern genau.
Bis demnächst
Matthias
@@Matthias Apsel
Ist nicht unbedingt notwendig, hauptsachd der Font stellt die Ziffern ungefähr gleich breit dar.
Richtig. Und das lässt sich mit CSS regeln (bei Schriftarten mit OpenType-Features).
Das sollten die meisten Schriftarten (vielleicht abgesehen von Fantasy-Schriften) tun, und zwar nicht ungefähr sondern genau.
Nein, das kann man so nicht sagen.
Heutzutage bringen Schriften OpenType-Features mit, darunter auch die Wahl zwischen gleich breiten Ziffern (tabular figures) und unterschiedlich breiten (proportional figures) wie auch die Wahl zwischen gleich hohen Ziffern (lining figures) und unterschiedlich hohen (old-style figures).
Angabe in CSS mit font-feature-settings (älter, bessere Browserunterstützung) oder mit font-variant-numeric. Die Spec enthält ein Bild mit den Kombinationen.
Welche der Varianten jeweils default ist, ist von Schriftart zu Schriftart verschieden.
LLAP 🖖
Ist nicht unbedingt notwendig, hauptsachd der Font stellt die Ziffern ungefähr gleich breit dar. Sonst siehts auf der Preisseite hässlich aus.
Ungefähr sieht auch schon häßlich aus! Schließlich isst das Auge ja mit 😉
Hi,
ich werf mal meine Lösung in den Raum ⇒ CodePen.
Aloha ;)
ich werf mal meine Lösung in den Raum ⇒ CodePen.
Die find ich super. Gleicher Ansatz wie bei mir, plus Gruppierung, dafür die Anzeige genau so wie sie sein soll. Sollte soweit auch responsiv sein.
Merke ich mir.
Grüße,
RIDER
@@’sup
ich werf mal meine Lösung in den Raum ⇒ CodePen.
Da fehlen ein paar Punkte:
Daran knabbere ich auch noch.
LLAP 🖖
@@Gunnar Bittersmann
Die Defaultschrift (auf meinem System ist das die Times) ist nicht dafür geeignet, Dezimalzahlen mit Komma darzustellen. Das Komma sitzt zu weit rechts.
In Times New Roman sieht das schon besser aus:
LLAP 🖖
Hallo,
damit dedlfix's Posting und link nicht ganz in der Diskussion um dick(t)engleiche Schriften untergeht, hier noch mal der Link zum w3c-Vorschlag.
Gruß
Jürgen
Tach!
damit dedlfix's Posting und link nicht ganz in der Diskussion um dick(t)engleiche Schriften untergeht, hier noch mal der Link zum w3c-Vorschlag.
Nur zur Info, ich hab nicht diesen Link aus den vielen Fundstellen gewählt, weil er besonders gut sei, sondern weil er auf einer besonders prominenten Seite zu finden ist. Geschrieben wurde der Artikel ja auch schon vor ein paar Jahren. Zur Qualität der Umsetzung an sich und im Vergleich zu anderen Möglichkeiten kann ich nichts weiter sagen.
dedlfix.
Hallo,
ich fand den Vorschlag vom w3c wegen der einfachen Umsetzung interessant. Leider versagt auch er bei „mehrzeiligen Gerichten“.
Gruß
Jürgen
Hallo,
Leider versagt auch er bei „mehrzeiligen Gerichten“.
ich habe die w3c-Version mal etwas erweitert, jetzt geht es auch mit „mehrzeiligen Gerichten“:
https://codepen.io/anon/pen/GaLYqM#anon-login
Gruß
Jürgen
Aloha ;)
ich habe die w3c-Version mal etwas erweitert, jetzt geht es auch mit „mehrzeiligen Gerichten“:
Was mir daran einfach nicht gefallen mag ist die doppelte, rein aus Präsentationsgründen vorgenommene spanspan-Kappselung.
Grüße,
RIDER
Hallo Jamosch,
Was mir daran einfach nicht gefallen mag ist die doppelte, rein aus Präsentationsgründen vorgenommene spanspan-Kappselung.
das ist auch nicht schön und bei Einzeilern kann darauf verzichtet werden. Mir gefiel die Lösung mit frei wählbaren Füllzeichen aber besser als die Border-Lösung, daher der Versuch, die Mehrzeiligkeit einzubauen.
Gruß
Jürgen
@@Camping_RIDER
Was mir daran einfach nicht gefallen mag ist die doppelte, rein aus Präsentationsgründen vorgenommene spanspan-Kappselung.
Na dann – ab ins Shadow DOM damit! 👻
LLAP 🖖
@@Ralf Baumann
ich möchte eine Speisekarte erstellen, in der Form, dass zwischen Speisen und Preis Punkte sind. Etwa so:
Fisch.....................12,50 €
Überbackene Nudeln.........3,50 €
Fleisch...................23,50 €
Wenn möglich mit CSS.
Geht das?
Nicht so ganz trivial.
Als Markup bietet sich eine Beschreibungsliste (description list dl) an:
Matthias Apsel
Tabellenkalk<dl>
<div>
<dt>Pizza Margherita</dt>
<dd>5,50 €</dd>
</div>
<div>
<dt>Pizza Salame</dt>
<dd>6,50 €</dd>
</div>
</dl>
Die div sind Flexboxen mit Abstand zwischen dt und dd:
dl > div
{
display: flex;
justify-content: space-between;
}
☞ Pizza 1
Fehlen nur noch die Punkte … Die ließen sich als Rahmenlinie eines Pseudoelements div::after realisieren. Damit die visuelle Reihenfolge dt – div::after – dd ist, wird letzters mit order: 1 ans Ende plaziert.
☞ Pizza 2 (was so ziemlich genau dem entspricht, was ’sup als Lösung präsentierte)
Fehlen immer noch Punkte, wenn das Gericht mehrere Gänge Zeilen beansprucht, weil sich die dt-Box über die Breite bis zur dd-Box ausdehnt und div::after nichts von der Breite abbekommt.
Versuche, die Rahmenlinie mit Pseudoelementen dt::after oder dd::before umzusetzen, schlagen ebenso fehl.
Beibt noch, die Rahmenlinie für das div anzugeben; dt und dd einen weißen Hintergrund zu verpassen und nach untern aus dem div herausragen zu lassen, also die Rahmenlinie überdecken zu lassen.
☞ Pizza 3
Aber auch hier ist die dt-Box ja rechteckig (Flex-Item), nimmt die Breite bis zur dd-Box ein und lässt von der Rahmenlinie nichts mehr zu sehen.
Eine Lösung wäre, nicht dt weißen Hintergrund zu geben, sondern einem darin befindlichen span-Element (welches keine Block-Box, sondern eine Inline-Box ist). Das zusätzliche Markup wäre aber ein kleiner Makel.
☞ Pizza 4
LLAP 🖖
Hello,
wie könnte man denn so eine Descriptionlist noch um eine odef zwei Spalten erweitern bei sonst gleichem Design (mif den Linien)?
Manchmal muss man noch Gewichtsangaben/Literangaben und Alkoholgehalt angeben. Das ist in der Gastronomie inzwischen Vorschrift.
Glück Auf
Tom vom Berg
@@TS
wie könnte man denn so eine Descriptionlist noch um eine odef zwei Spalten erweitern bei sonst gleichem Design (mif den Linien)?
Manchmal muss man noch Gewichtsangaben/Literangaben und Alkoholgehalt angeben. Das ist in der Gastronomie inzwischen Vorschrift.
Zusätzliche dt-Elemente. ☞ Pizza 5
Wobei man dann wohl eher eine Umsetzung mit Grid denn mit Flexbox will.
LLAP 🖖
@@Gunnar Bittersmann
Wobei man dann wohl eher eine Umsetzung mit Grid denn mit Flexbox will.
Dürfte schwierig werden. Subgrid FTW, aber erst irgendwann …
Eher min-width für bestimmte td; bei Pizza 5 ergänzt.
LLAP 🖖
Aloha ;)
Beibt noch, die Rahmenlinie für das
divanzugeben;dtundddeinen weißen Hintergrund zu verpassen und nach untern aus demdivherausragen zu lassen, also die Rahmenlinie überdecken zu lassen.
Daran hatte ich auch schon gedacht. Für viele Anwendungsfälle wird das leider trotzdem (dank nicht-einfarbigem Hintergrund) eher keine Option sein.
Uns fehlen da einfach noch Möglichkeiten, um richtig gute Lösungen zu finden.
Grüße,
RIDER
Meine Lösung mit Grid und Bio-Saft 😉
DEMO: https://codepen.io/anon/pen/qGGRZP
(Das <span> im <dt> braucht es leider.)
Hi,
Meine Lösung mit Grid und Bio-Saft 😉
DEMO: https://codepen.io/anon/pen/qGGRZP
(Das
<span>im<dt>braucht es leider.)
Da braucht's etwa 3mal soviele » - sonst ist bei 4-K-Bildschirm mit maximiertem Browser die Linie der » vorzeitig zu Ende.
Noch ein kleiner Nachteil: ggf. werden vom letzten » nur Teile dargestellt.
cu,
Andreas a/k/a MudGuard
Hallo,
Da braucht's etwa 3mal soviele » - sonst ist bei 4-K-Bildschirm mit maximiertem Browser die Linie der » vorzeitig zu Ende.
Da wäre es abr sinnvoller, mit max-width einzugreifen.
Noch ein kleiner Nachteil: ggf. werden vom letzten » nur Teile dargestellt.
Das kriegen Browser auch bei gepunkteten Rahmenlinien hin…
Gruß
Kalk