Links- und Rechtsbündig

[Löwenpapa14]

Moin,

so Tommy, ich bin hier =)

Meine Herausforderung. Ich bin am Erstellen einer Speisekarte. Und habe z.B. Sommerrollen. Diese werden mit Tofu, Huhn, Rind und Garnelen angeboten. Nun hat jedes dieser Gerichte einen eigenen Preis (siehe Screenshot). Mein Wunsch wäre es, TOFU linksbündig und den Preis rechtsbündig zu schreiben. Geht bestimmt, aber wie?

Ich bin schon am schauen, aber mit Hilfe geht es ja bekanntlich schneller und besser.

Danke Euch.

Ronny

[Tommy Herrmann]

Moin Ronny,

... wusste ja gar nicht, dass Du hier schon registriert bist

... nun muss ich aber (ausgerechnet) gleich für heute hier weg.

Das Hersteller-Forum ist ja englischsprachig und da Du dort auf Deutsch geschrieben hattest, dachte ich es könnte für Dich hier angenehmer sein.

Gucke mal hier dieses Beispiel auf einer alten Testseite von mir:

https://www.mobirise-tutorials.com/Test ... ml#Tabelle

... solche Dinge gehen alle immer über CSS, das ist eine mächtige Auszeichnungssprache zum Stylen von HTML-Code.

Das macht man (meist) mit der CSS-Eigenschaft:

"text-align"

Gucke auch mal hier:

https://www.w3schools.com/cssref/pr_text_text-align.php

[Löwenpapa14]

Doch war ich, aber ich habe mich ins andere Forum "verklickt".

Tommy, ich bin leider in "html und co" noch nicht so bewandert. Momentan bekomme ich es noch nicht hin.
Anbei schreibe ich mal meinen Code rein. Vielleicht kannst du mir so besser helfen? Oder wer schneller ist als Tommy. Er ist ja gerade unterwegs =)

1. GOI CUON^B,C,M,L<br></p>
<div class="line"></div>
<span mbr-text class="mbr-fonts-style mbr-bold box-price mbr-black" mbr-theme-style="display-7">Test</span>
</div>
<h3 class="item-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".item-title"><p>Frische Sommerrollen, Reisnudeln, Salat, Rucola, Basilikum mit Limettensoße<br><i>Cuon - Fresh summer rolls, rice noodles, salad, rocket, basil with limetten sauce</i></p><p><br><i>A. TOFU^M / tofu</i></p><p><span style="font-size: 1.4rem;">B. HÜHNERFLEISCH / chicken - 5,50 €</span></p><p>C. ENTE / duck - 6,00 €</p><p>D. GARNELEN^E / prawn - 5,50 €</p></h3>
</div>
<div class="col-md-12 menu-item">
<div class="menu-box">
<p class="box-text mbr-black mbr-bold mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".box-text">

Richtig toll wäre noch die Linie mit den Punkten wie oben zwischen den Zeilen. Siehe Screenshot oben..

Ich danke Euch

[Tommy Herrmann]

Moin,

ja das mit den Punkten füllen geht auch - habe ich aber selbst auch noch nie gemacht und auch gerade nicht die rechte Lust zu.

... guckst Du hier (das sollte einfach gehen):

https://www.w3.org/Style/Examples/007/leaders.en.html

... oder hier (ist für Mobirise eher schwierig):

https://codepen.io/Kseso/pen/AwRYgZ

Ich würde das dann schon am besten mit einer Tabelle machen und dann der rechten Spalte mit dem Preis eben die Position rechtsbündig geben, denn Du musst ja schon irgendwie 2 feste Bereiche haben, damit Du den einen Bereich (Preis) auch rechtsbündig darstellen kannst.

Code: Alles auswählen

<h3 class="item-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".item-title"><p>Frische Sommerrollen, Reisnudeln, Salat, Rucola, Basilikum mit Limettensoße<br><i>Cuon - Fresh summer rolls, rice noodles, salad, rocket, basil with limetten sauce</i></p>
<br><br>
<span style="font-size: 1.4rem;">

<!-- Beginn der Tabelle -->
<table id="Tabelle1">
    <tbody>
        <tr>
            <td>A. TOFU<sup>M</sup> / tofu</td>
            <td class="position"></td>
        </tr>
        <tr>
            <td>B. HÜHNERFLEISCH / chicken</td>
            <td class="position">5,50 €</td>
        </tr>
        <tr>
            <td>C. Ente / duck</td>
            <td class="position">6,00 €</td>
        </tr>
        <tr>
            <td>D. GARNELEN<sup>E</sup> / prawn</td>
            <td class="position">5,50 €</td>
        </tr>
    </tbody>
</table>
<!-- Ende der Tabelle -->

</span>

</h3>

Dann diese CSS in den rechten Bereich "CSS Editor" vom Block kopieren:

Code: Alles auswählen

table#Tabelle1 {
  margin: Auto;
  width: 100%;
}
table#Tabelle1 tr th, table#Tabelle1 tr td {
  padding: 10px;
}
.position {
  text-align: right;
}

So würde das dann aussehen, je nachdem wie breit Du den Textbereich bei den Blockwerkzeugen von Mobirise einstellst.

Tipps:

1) unser Werner-Zenk.de hat hier einen kleinen "Tabellen-Generator", den man dazu gut gebrauchen kann:

https://werner-zenk.de/tools/tabelle.php


2) Alternativ geht das auch mit "float":

https://www.mobirise-tutorials.com/Lawy ... rticle6-4j


3) übrigens Deine vergrößerte Schrift durch das <span style="font-size: 1.4rem;">...</span> ist nicht gut, denn dann wird diese Größe auch so am Handy dargestellt und nicht automatisch reduziet und das ist viel zu groß. Denke daran.

[Tommy Herrmann]

... also ich habe jetzt mal "ChatGPT" (künstliche Intelligenz) benutz und mit dieser Hilfe diese CSS erstellt, allerdings selbst auch noch etwas anders bearbeitet:

Code: Alles auswählen

table#Tabelle1 {
  margin: Auto;
  width: 100%;
}
table#Tabelle1 tr th, table#Tabelle1 tr td {
  padding: 10px;
}
.position {
  text-align: right;
}
.tabellenzelle {
  width: 60%;
  position: relative;
}
.tabellenzelle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 50%;
  border-bottom: 2px dotted;
}
// Für die Ansicht am Handy, sonst laufen die Punkte in den Preis hinein
@media (max-width: 767px) {
  .tabellenzelle::before {
    width: 50%;
  }
}

Die Tabelle erhält also an der Spalte für den Preis noch zusätzlich die class="tabellenzelle":

Code: Alles auswählen

<table id="Tabelle1">
    <tbody>
        <tr>
            <td>A. TOFU<sup>M</sup> / tofu</td>
            <td class="position tabellenzelle"></td>
        </tr>
        <tr>
            <td>B. HÜHNERFLEISCH / chicken</td>
            <td class="position tabellenzelle">5,50 €</td>
        </tr>
        <tr>
            <td>C. Ente / duck</td>
            <td class="position tabellenzelle">6,00 €</td>
        </tr>
        <tr>
            <td>D. GARNELEN<sup>E</sup> / prawn</td>
            <td class="position tabellenzelle">5,50 €</td>
        </tr>
    </tbody>
</table>

Das würde dann diese Punkte erzeugen, die Du noch größer oder kleiner machen kannst, jetzt 2px:

border-bottom: 2px dotted;

... und könnte dann zum Beispiel so aussehen:

Hier habe ich diese Anleitung nochmals als Tutorial zusammengefasst:

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

[Andyneu]

Hallo,
hier eine weitere Variante.

Ist gelöst mit den normalen Bootstrap 5 Klassen. Bietet sich bei Mobirise ja an.

Code: Alles auswählen

<div class="allgemeinInfo w-70 justify-content-center d-flex">
        <h1>Speisekarte</h1>
    </div>

    <div class="allgemeinInfo w-70 justify-content-center d-flex">


        <div class="w-50 mt-4 mb-4">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, earum commodi quae eos architecto, enim,
                recusandae eveniet vero repellat ullam consequatur ratione quia unde assumenda corrupti magnam?
                Consequuntur, dolores hic?
                Harum impedit beatae numquam excepturi, laboriosam error
            </p>
        </div>
    </div>
    <div class="gerichte  w-75 justify-content-center d-flex mt-4 mx-auto">
        <div class="speise w-25">
            <h5>Gerichte</h5>
            <p>Gericht1</p>
            <p>Gericht2</p>
            <p>Gericht3</p>
            <p>Gericht4</p>
            <p>Gericht5</p>
        </div>
        <div class="zwr w-25">
            <h5></h5>
            <p>........................</p>
            <p>........................</p>
            <p>........................</p>
            <p>........................</p>
            <p>........................</p>
        </div>
        <div class="preise w-25">
            <h5>Preis</h5>
            <p>7,50€</p>
            <p>5,50€</p>
            <p>12,50€</p>
            <p>15,50€</p>
            <p>12,50€</p>
        </div>
    </div>

Hier ein Link zur Testseite: https://www.awm-websoft.de/entwicklung/ ... index.html
Zugangsdaten:
User: KdUser
Pw: start123

[Tommy Herrmann]

Andy,

... danke, dass auch Du Dir Gedanken gemacht hast - prima

Allerdings sitzen die Punkte vertikal genau zwischen den Gerichten und nicht mittig und sie schieben sich am Handy auch in die Texte. Ich finde auch die Definition der class="preise" gar nicht auf Deiner Seite und die Preise sind nicht rechtsbündig. Hast Du die vielleicht vergessen?

Das Problem hatte ich auch und man benötigt dann eher eine Anpassung in der Breite.

Ich habe gerade eben noch ein zweites Beispiel als Tutorial mit einer Liste erstellt. Das ist wahrscheinlich noch einfacher als meines mit der Tabelle und die vorangestellten Füller Punkte (Dot Leaders) passen sich eben dynamisch jeder Breite an:

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

... oder auch in 2 Containern:

[Andyneu]

Hallo Tommy,
ja dieses Beispiel hat nicht den Anspruch auf perfekte Optik. Ich wollte hier lediglich zeigen das man diese Tabellenlayout eben auch ohne Tabelle und mit einfachen Bootstrap Klassen erzeugen kann.

Die Definition der Klassen sowohl (allgemeininfo, preise, zwr und speise) kannst du nicht finden, denn die habe ich nur vergeben für den Fall das man dieses Bsp. perfektionieren und anpassen möchte. Genutzt werden hier nur die Bootstrap Klassen.

Ich bin hier auch nur auf die Grundfragestellung eingegangen: Gerichte links -> Preise rechts

Optisch und auch Funktionalität sollte hier noch deutlich angepasst werden. Da gebe ich dir voll und ganz recht

[Tommy Herrmann]

ach so - ja klar - viele Wege führen zum Ziel

Aber wenn es nur um links: Gerichte und rechts: Preise geht, dann wäre wohl die CSS Regel "float" angebracht:

https://www.mobirise-tutorials.com/Lawy ... rticle6-4j

also ganz einfach so:

Code: Alles auswählen

<p>Insalata Mista - gemischte grüne Salate mit Tomaten<span style="float: right;"><b>7,50 €</b></span></p>

Die eigentlich Herausforderung sind ja diese dynamisch angepassten Punkte.

[Andyneu]

Ja viele Wege führen zum Ziel ! Da hast du recht.

Aber wenn es nur um links: Gerichte und rechts: Preise geht, dann wäre wohl die CSS Regel "float" angebracht:

Ich würde trotzdem die Flexbox-Funktionen bevorzugen, da wesentlich flexibler. Mann kann eben auch nachträglich noch Änderungen einbringen und man kann es noch schön mit Grid kombinieren.

Aber es ist auch Geschmackssache und es hängt häufig auch von der gestellten Aufgabe ab.

[ezi]

Hallo Tommy,
eine tolle Sache die du da wieder vorstellst.
Ich habe zwar schon eine Speisekarte erstellt mit deinem Tutorial „Text linksbündig, Preise rechtsbündig mit float: right“ aber dies mit den Punkten finde ich schöner. Also habe ich es versucht nachzubauen, aber ich bekomme immer wieder denselben Fehler: die Punkte enden unterhalb des €-Zeichens und die Preise selber liegen über den Punkten.
Habe es mit verschiedenen Textblöcken probiert und schaffe dies leider nicht

Zu sehen unter https://www.mk-konstanz.eu/test.php

Wie immer sage ich schon ganz lieben Dank für mögliche Lösungsvorschläge.
VG Ezi

[Tommy Herrmann]

Moin Ezi,

... also - das war nicht so ganz leicht von hier zu erkennen - aber ich denke Du hast ein Thema mit dem altbekannten Mobirise-Bug einer falschen "line-height" (Linien-Höhe) erwischt.

Bei manchen Themen steht diese Line-Height (Linien-Höhe) auf 1 anstatt (richtig) auf 1.5. Daher steht auch der Text auf Deiner Startseite (index.html) eigentlich zu dicht in der Höhe aneinander.

Das hat dann eben auch zur Folge, das bei Deinem <li> Tag die Höhe zwar eigentlich richtig mit 1.5 ist aber durch das <span> Tag, aus Deiner CSS, zurück auf 1 gesetzt wird - weil das so im globalen Style definiert ist und weil Du daher zwei verschiedenen Linien-Höhen in der gleichen Zeile hast - und somit die Hintergrundfarbe nicht mehr diese Punkte verdeckt.

Um das Problem zu beheben, könntest Du das an Deine CSS noch mit ran schreiben:

Code: Alles auswählen

span {
   line-height: 1.5;
}

Ich habe mein Tutorial bezüglich der line-height: 1.5; jetzt noch angepasst und diese CSS-Anweisung vorsichtshalber mit dran geschrieben. Danke für diesen wertvollen Tipp

Weiterhin habe ich noch ein Beispiel mit "Middle-Dots" als Dot-Leaders erstellt (anstelle des normalen Punktes), vielleicht gefällt das jemandem besser:

https://www.mobirise-tutorials.com/Tuto ... #ColAmount




Ich würde Dir aber raten das gleich im globalen Site-Style richtig einzutragen, dann stimmt das automatisch auch beim <span> Tag.


1) Klicke auf den Pinsel (unten rechts) für die globalen "Site Styles" Einträge (CSS):

2) Klicke dann im Fenster der "Site Styles" Werkzeuge auf den Button "EDIT IN CODE EDITOR":

3) Ich habe diese CSS-Anweisungen dort im linken Bereich "Static Styles" im Screenshot (unten) markiert:

Dort steht bei Dir die falsche Linien-Höhe, unter anderen eben auch für den Selektor "span":

line-height: 1;

überschreibe das mit der richtigen Linien-Höhe, so wie diese auch für das <body> Tag eingerichtet ist:

line-height: 1.5;

wie hier in diesem Code bereits getan:

Code: Alles auswählen

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-4,
.display-5,
.display-7,
span,
p,
a {
  line-height: 1.5;
  word-break: break-word;
  word-wrap: break-word;
  font-weight: 400;
}

... dann sollte schon alles richtig sein - also auch die Punkte nicht mehr unter den Preisen angezeigt werden, sondern nun von der Hintergrundfarbe des <span> Tags, wie in Deiner CSS angegeben, überdeckt werden.

Im Online-Editor vom Browser habe ich das hier auf Deiner Seite simuliert:

[ezi]

Tommy du bist ein Genie,
nach deinem Tipp klappt das wunderbar
DANKESCHÖN

[Tommy Herrmann]

prima