Benutzerdefinierte Aufzählungszeichen

    Joomla Version
    5.0.2
    PHP Version
    PHP 8.1.x
    Hoster
    cloudaccess
    Link (URL) zur Seite mit dem Problem
    https://balance.joomla.com

    Hallo,

    auf der Startseite sind vertikal die Buchstaben BALANCE KIDS mit dem Text (z.B. ... Begeisterung weitergeben) in einer Zeile angeordnet.

    In der Mobilen Ansicht schiebt es aber die überschüssigen Worte unter die senkrechten Buchstaben.


    Meine erste Idee dazu war eine Tabelle, allerdings bleibt da der "grüne " Buchstabe vertikal zentriert, und der Text verschiebt sich dann auch senkrecht. (blöd zu erklären, sorry) In der Zelle Oben angeordnet schaut doof aus, wegen der unterschiedlichen Schriftgröße...


    Jetzt die Frage, wenn ich eine "Aufzählungsliste" erstelle, kann ich dann jeder Zeile ein eigenes Aufzählungszeichen (B, A, L, ...) zuweisen und löse damit das Problem? Und wenn ja wie geht das?


    Oder gibt es am Ende noch eine einfachere Lösung dazu :)


    LG

    Patrick

    Danke erstmal für diese Idee.


    In dieser Testumgebung funktioniert es genau so wie ich es mir gedacht habe. Ich kämpfe jetzt wie ich das auf die Homepage integriere.


    da ja jeglicher Text in <p></p> steht hat es wenn ich den Code 1:1 übernehme alles verschoben. Jetzt dachte ich dass das da das selbe Ergebnis generieren könnte:


    <p><span class="p"><span class="one">B</span><strong> ... Begeisterung</strong> weitergeben</span></p>


    mit diesem Eintrag im css:

    .p{

    font-size: 18px;

    margin-left: 2.5rem;

    }


    Aber das funktioniert leider nicht.

    ...ich versuche noch das BOX Modell zu verstehen und wie ich es hier nutzen kann,


    V.a. wenn der Buchstabe "I" steht, dann funktioniert es scheinbar nicht mehr.

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von elbarto mit diesem Beitrag zusammengefügt.

    Zitat von elbarto

    <span class="p">

    Wofür hast Du dieses? Das macht keinen Sinn.


    Das sollte die HTML-Ausgabe sein:

    HTML
    <p>
    <span class="one">B</span>
    <strong> ... Begeisterung</strong> weitergeben
</p>

    Da <p> etwas globales ist, kannst Du es auch weiter mit eine Klasse spezifizieren:

    HTML
    <p class="balance">
    <span class="one">B</span>
    <strong> ... Begeisterung</strong> weitergeben
</p>



    Das dazugehörige CSS:

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Zitat von elbarto

    <p><span class="p">

    Zitat von LukasHH

    Wofür hast Du dieses? Das macht keinen Sinn.

    ja nee macht echt keinen Sinn 🤦‍♂️. Das war nur mein unbegabter Versuch genau deinen Vorschlag <p class="balance"> zu erreichen 😊

    Ist gespeichert - DANKE!!!


    Was ich auch n.n. verstehe, ja ok - PC ist nicht gleich Smartphone, ist dass fast keine Schriftart in der Mobilen Ansicht funktioniert.


    Damit scheitert jeglicher Versuch am PC zu optimieren, wenn es dann Mobil wieder verschlimmert wird. Ist das generell so?

    Die (Smartphone-) Ansicht unter diesem Link verdeutlicht was ich meine:

    CSS: fonts

    Zitat von elbarto

    Was ich auch n.n. verstehe, ja ok - PC ist nicht gleich Smartphone, ist dass fast keine Schriftart in der Mobilen Ansicht funktioniert.


    Damit scheitert jeglicher Versuch am PC zu optimieren, wenn es dann Mobil wieder verschlimmert wird. Ist das generell so?

    Wie kommst Du zu dieser Meinung? Ich habe das noch nicht festgestellt. Allerdings benutze ich auch meist Google Schriftarten (natürlich lokal ausgeliefert) und kontrolliere immer gleich beim Entwickeln auf Smartphone und Tablet.


    Was aus meiner Sicht die Lesbarkeit auf Smartphones sehr verbessert, ist das Einschalten der Silbentrennung (per CSS hyphens: auto;).

    mein Denkfehler - dass die Schriftart Comic Sans MS, die ja standardmäßig mit Windows ausgeliefert wird (?), auch auf anderen Endgeräten verfügbar sein sollte...


    Wie ist es mit diesen: "Web Safe Fonts" die ja bei aktuellen Browsern auch ohne Installation auf dem Endgerät angezeigt werden sollen?

    Brush Script MT soll so eine Schriftart sein, wird im aktualisierten Google Chrome aber als Comic Sans MS dargestellt?


    Sorry falls ich mit der Frage nach Fonts das Topic "Benutzerdefinierte Aufzählungszeichen" sprenge.



    Zurück zum eigentlichem Thema:

    Um auf der Mobilen Ansicht eine saubere Darstellung untereinander zu bekommen (D ist breiter al I) hilft dann nur eine Schriftart aus der Monospace Familie?

    Du kannst natürlich Web Safe Fonts verwenden, bist aber dann auf den Browser angewiesen. Am sichersten ist es, wenn Du die Fonts von und zusammen mit Deiner Website lieferst.

    Für Google Fonts wird Dir hier geholfen: https://gwfh.mranftl.com/fonts


    Ich würde keine Monospace Schrift nehmen, weil die schlechter lesbar sind als andere. Wie schon gesagt, verbessert die Silbentrennung (s.o.) die Lesbarkeit auf Smartphones weiter.


    Zitat von elbarto

    Um auf der Mobilen Ansicht eine saubere Darstellung untereinander zu bekommen (D ist breiter al I) hilft dann nur eine Schriftart aus der Monospace Familie?

    Das verstehe ich nicht ganz. Kannst Du mal mit einem Screenshot zeigen, was Du meinst?

    Also diese Comic Sans wurde ganz früher verwendet.

    Zitat von elbarto

    Um auf der Mobilen Ansicht eine saubere Darstellung untereinander zu bekommen (D ist breiter al I) hilft dann nur eine Schriftart aus der Monospace Familie?

    verstehe ich auch nicht. Denn D wird immer breiter aussehen als I


    Beispiel jetzt (nur zur Testzwecken roboto genommen):



    Liebe Grüße

    Christine