Quellcode im Code Editor
Eigene Liste mit rechtsbündigen Preisen und Dot Leaders
Hier habe ich eine eigene Liste erstellt und die Preise dabei rechtsbündig gestellt und den Raum davor mit Punkten, den sogenannten "Dot Leaders", gefüllt.
Hier habe ich dieses Beispiel von w3.org nachgebaut.
Dazu habe ich mir folgende CSS erstellt und diese in den Bereich "CSS Editor" vom "Code Editor" kopiert. Dabei habe ich hier 140 Punkte geschrieben (7 x 20), damit ich auch auf eine Breite von 100% des Blocks einstellen kann. Anstelle des normalen Punktes könnte man natürlich auch einen ···· Middle-Dot oder andere HTML Ersatzzeichen verwenden. Solltet ihr mehr Punkte benötigen, könnt ihr einfach noch Zeilen hinzu kopieren.
Achtet bitte darauf, dass im globalen Site-Style die "line-height" (Linienhöhe) vom <span> Tag auf 1.5 steht und nicht auf 1, wie manchmal bei Mobirise-Themen. Ich habe diese CSS-Anweisung daher noch vorsichtshalber mit hinzugefügt.
Weiterhin muss als Farbe die Hintergrundfarbe eures Blocks eingetragen werden, damit die Punkte nicht in den Text hinein dargestellt werden, hier also:
background: #bbbbbb;
ul.leaders {
max-width: 100%;
padding: 0;
overflow-x: hidden;
list-style: none;
}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . ";
}
ul.leaders span:first-child {
padding-right: 0.33em;
background: #bbbbbb;
}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: #bbbbbb;
}
li {
font-size: 1.2rem;
}
span {
line-height: 1.5;
}
Zum Einbau des Listen-Codes habe ich hier einen einfachen Textblock aus der Rubrik "Article" gewählt.
Bemerkung: das Mobirise-Attribut mbr-article habe ich nur hinzugefügt, damit der Inhalt auf der Arbeitsseite editierbar ist.
Der Listen-Code gehört in den Bereich "HTML Editor" vom "Code Editor":
<ul class="leaders" mbr-article>
<li>
<span>Salmon Ravioli</span>
<span>7,95 €</span>
</li>
<li>
<span>Fried Calamari</span>
<span>8,95 €</span>
</li>
<li>
<span>Almond Prawn Cocktail</span>
<span>7,95 €</span>
</li>
<li>
<span>Bruschetta</span>
<span>5,25 €</span>
</li>
<li>
<span>Margherita Pizza</span>
<span>10,95 €</span>
</li>
</ul>
Unten noch ein Screenshot vom "Code Editor" mit dem oben gezeigten Code und der CSS.
Unten noch ein Beispiel Block mit zwei Spalten und Middle-Dots
Siehe auch dieses Beispiel mit CSS float
Viel Erfolg beim Nachbau.
Quellcode im Code Editor
Hier in einem Mobirise-Block mit zwei Spalten und mit Middle-Dots als Dot Leaders
Zur Darstellung von solchen "Middle-Dots" - vertikal mittigen Punkten - könnt ihr dieses HTML-Ersatzzeichen verwenden: ·
Kopiert das Ersatzzeichen zur Darstellung direkt in einen Textblock und erstellt dann mit dem · Middle-Dot · eine neue Class oder ihr kopiert einfach meine bereits erstellte Class mit den Middle-Dots unten, anstelle der Class mit den normalen Punkten von oben, in euren "CSS Editor":
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
"····················"
"····················"
"····················"
"····················"
"····················"
"····················"
"····················";
}