Ralf Baumann: Speisekarte mit Punkte zwischen Speisen und..........Preis

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

  1. 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 a.k.a. Riders Flame a.k.a. Janosch Zoller
    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    1. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Aloha ;)

        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.

        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

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
  2. 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

    --
    Es gibt nichts Gutes, außer man tut es!
    Das Leben selbst ist der Sinn.
    1. Hello,

      welcher Troll gibt warum für das Posting Minuspunkte?

      Glück Auf
      Tom vom Berg

      --
      Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
      1. Hallo TS,

        welcher Troll gibt warum für das Posting Minuspunkte?

        eine negative Bewertung ist kein trollen.

        LG,
        CK

        1. 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

          --
          Es gibt nichts Gutes, außer man tut es!
          Das Leben selbst ist der Sinn.
          1. 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

    2. @@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.

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. 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 dotted wä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

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.
        1. 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.

          1. 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

            --
            Es gibt nichts Gutes, außer man tut es!
            Das Leben selbst ist der Sinn.
            1. 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

        2. Und wo bleibt die ultimative Lösung des fachlich qualifizierten Meisters?

          Genau das frag ich mich auch!

    3. In PHP gibts str_pad() für dasda. Und wie schon angemerkt, es braucht eine dickengleiche Schriftart. MFG

      1. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. Wenn möglich mit CSS.

    Natürlich. Erste Voraussetzung ist eine dickengleiche Schriftart, die mit CSS eingestellt wird. MFG

    1. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. 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

      --
      Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
      1. 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

        --
        Pantoffeltierchen haben keine Hobbys.
        ¯\_(ツ)_/¯
        1. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. 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 😉

  4. Hi,

    ich werf mal meine Lösung in den Raum ⇒ CodePen.

    1. 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

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    2. @@’sup

      ich werf mal meine Lösung in den Raum ⇒ CodePen.

      Da fehlen ein paar Punkte:

      Screenshot

      Daran knabbere ich auch noch.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. @@Gunnar Bittersmann

        Screenshot

        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:

        Screenshot

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  5. 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

    1. 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.

      1. Hallo,

        ich fand den Vorschlag vom w3c wegen der einfachen Umsetzung interessant. Leider versagt auch er bei „mehrzeiligen Gerichten“.

        Gruß
        Jürgen

        1. 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

          1. Aloha ;)

            ich habe die w3c-Version mal etwas erweitert, jetzt geht es auch mit „mehrzeiligen Gerichten“:

            https://codepen.io/anon/pen/GaLYqM#anon-login

            Was mir daran einfach nicht gefallen mag ist die doppelte, rein aus Präsentationsgründen vorgenommene spanspan-Kappselung.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. 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

            2. @@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 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  6. @@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:

    <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 dtdiv::afterdd 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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. 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

      --
      Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
      1. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. Aloha ;)

      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.

      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

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
  7. Meine Lösung mit Grid und Bio-Saft 😉

    DEMO: https://codepen.io/anon/pen/qGGRZP

    (Das <span> im <dt> braucht es leider.)

    1. 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

      1. 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