Verschiedene Text Größen

[scherenschlag]

Moin.
Habe mal wieder ein Problem.
Ich möchte eine Getränkekarte erstellen.
Damit man das alles beser erkennen kann, sollen sich
Menge und Preis in der Größe unterscheiden.
Sagen wir mal als Beispiel die Glasgröße in Schrift Punkt 10.
Und der Preis in Größe Punkt 14.
Nur mal so. Wie mache ich das?

Brinkhoff's No. 1
0,2 l-1,90 0,3 l-2,70 0,5 l-4,40

[Tommy Herrmann]

Moin,

hier mal ein Beispiel, das Du natürlich auch ganz anders machen könntest.

Solche "Bereiche" erstellt man mit dem Bereichs-Element <span>. Das <p> Tag kann bei Dir ganz andere CSS-Klassen haben.

Code: Alles auswählen

<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                    
    Brinkhoff's No. 1 
    <span style="float: right;">
        <span style="font-size: 1.0rem;">0,2 l</span>
        <span style="font-size: 1.5rem; padding-left: 50px;">€ 1,90</span>
    </span>
    
</p> 

Ich habe hier außen rum noch ein "float: right" (nach rechts schweben) eingebaut, sodass die Preise sich rechtsbündig darstellen. Das wird dann rechts an der Breite des Blocks angezeigt. Die meisten Textblöcke kann man in der Breite bei den Block-Werkzeugen beliebig einstellen.

Das "padding-left: 50px" stellt noch einen Abstand von 50px zwischen dem Litermaß und dem Preis dar.

Anstelle der dynamischen Größe "rem" (Root EM) kannst Du natürlich auch "px" (Pixel) verwenden.

Gucke dazu auch mal mein neuestes Tutorial hier an, bei dem ich noch die Option von vorangestellten Punkten, sogenannten "Dot Leaders", in dynamischer Länge beschreibe:

https://www.mobirise-tutorials.com/Tuto ... reise.html


Meine Code oben stellt sich dann so dar:

[scherenschlag]

Danke.
So hatte ich mir das vorgestellt