✔ Listenpunkte + Unicode

[Sprint]

Hallo zusammen,

ich versuche, die Listenpunkte einer Liste mit Unicode Zeichen unterschiedlich zu gestalten. Das funktioniert soweit auch, aber din dem Fall werden die Zeichen immer in die Listenpunkte eingezogen, wie bei einem "list-style-position: inside;".

.l1, .l2 {
    list-style-type: none;
}
li.l1:before {
    content: "\2023\a0";
    font-size: 20px;
}
li.l2:before {
    content: "\27b5\a0";
    font-size: 20px;
}

<ul>
    <li class="l1">Listenpunkt Typ 1</li>
    <li class="l2">Listenpunkt Typ 2</li>
    <li class="l1">Listenpunkt Typ 1</li>
    <li class="l2">Listenpunkt Typ 2</li>
</ul>

Gibt es eine Möglichkeit, das so zu formatieren, daß die Listenzeichen vor dem Text liegen?

 

[MrMurphy]

Hallo

So ganz verstehe ich dein Problem nicht. Deine Beschreibung ist sehr mager.

Ich würde den Listenpunkten / Unicodezeichen eine feste Breite geben. Das Layout geschieht dann mittels Flexbox.

Nach den aktuellen HTML5 Regeln soll die Struktur des Quelltextes keine unnötigen Angaben enthalten. Das bedingt zum Beispiel auch das nicht für jedes Element Klassen (class) vergeben werden sollen. In deinem Beispiel reicht zum Beispiel eine Klasse für das ul-Element. Dadurch wird der HTML-Quelltext viel übersichtlicher und damit auch pflegbar.

Der HTML-Quelltext sieht dann so aus:

<ul class="liste">
   <li>Listenpunkt Typ 1</li>
   <li>Listenpunkt Typ 2</li>
   <li>Listenpunkt Typ 1</li>
   <li>Listenpunkt Typ 2</li>
</ul>

Und das zugehörige CSS so:

.liste li {
   list-style-type: none;
   display: flex;
}
.liste li::before {
   font-size: 20px;
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 1.5rem;
}
.liste li:nth-child(2n+1)::before {
   content: "\2023\a0";
}
.liste li:nth-child(2n+2)::before {
   content: "\27b5\a0";
}

Ich habe mal eine Beispielseite erstellt. Die enthält eine zusätzliche Liste mit mehr Inhalt um auch das Verhalten bei automatischen Zeilenumbrüche prüfen zu können. Dazu einfach das Fenster schmaler ziehen:

http://boratb.bplaced.net/index61.html

Gruss

MrMurphy

 

[Sprint]

Hallo MrMurphy,

vielen Dank schon mal für die Hilfe. Die separate Auszeichnung der Listenpunkte war aber extra so gemacht, da es auch Listen gibt, die nur aus Typ 1 bestehen bzw. bei der sich die beiden Typen nicht abwechseln. Hatte das leider vergessen zu erwähnen. Aber mit dem anderen werde ich mich mal beschäftigen.

 

[MrMurphy]

Hallo

Das ist trotzdem kein Grund den HTML-Quelltext mit Klassen vollzuballern sondern nur eine Ausrede. An einem konkreten Beispiel könnte ich dir das auch zeigen.

Ich habe mein Beispiel mal um eine Lösung mit Float erweitert. An den langen Texten sieht man dann, warum ich Float hier nicht verwenden würde.

Gruss

MrMurphy

 

[Sprint]

Hab mich nochmal damit beschäftigt und hab es hinbekommen. Vielen Dank für deine Hilfe.