Info echo

Ist der Classic-Editor schon zu kennen? –

"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced

"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

… die Welt gehört dem, der sie genießt.

"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

TinyMCE aktive Installationen: 2+ Millionen

"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

… und NEU! – Classic Widgets

"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Classic und TinyMCE – ist so fein!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

---

Der Abstand zwischen den Aufzählungszeichen und dem Text kann das Erscheinungsbild der Liste verbessern oder verschlechtern. Es gibt verschiedene Möglichkeiten, den Abstand anzupassen, wie z.B. das Hinzufügen von mehr Abstand zwischen den Aufzählungszeichen und dem Text oder das Ändern der Farbe der Aufzählungszeichen. Um den Abstand zwischen den Aufzählungszeichen und dem Text in HTML zu ändern, kann man das CSS-Padding oder Margin-Attribut verwenden. Mit diesen Attributen kann man den Abstand zwischen dem Aufzählungszeichen und dem Text sowie den Abstand zwischen den einzelnen Listenelementen anpassen.

Insgesamt ist es wichtig, dass die Aufzählungszeichen und der Abstand auf einer Webseite gut gestaltet sind, um die Lesbarkeit und das Erscheinungsbild der Liste zu verbessern.

Aufzählungszeichen der Auszeichnungen

Elementname ul, ol, dl  oder li und Attribut-/Eigenschaftswerte.

Die Elementnamen ul, ol, dl und li sind Teil der HTML-Sprache und werden verwendet, um Listen auf einer Webseite zu erstellen.

ul

steht für ungeordnete Liste (unordered list),

ol

für geordnete Liste (ordered list),

dl

für Definitionslisten (definition term) und

li

das Listenelement für sich (list item).

Textfarbe und Abstand vom Rand

Mit dem Start-Tag <ul style="color: royalblue;"> kann die Farbe der gesamten Liste, der Listenpunkte und des Textes festgelegt werden. Mit dem Start-Tag <ul style="list-style-position: inside;"> kann der Abstand des Aufzählungszeichens zum Rand erhöht werden, während der Text darunter bleibt. Der Standard-Abstand lässt das Aufzählungszeichen am Rand, mit dem Start-Tag <ul style="list-style-position: outside;"> oder dem Elementnamen li kann dieser Abstand geändert werden.

Text farbig

• <ul style="color: "royalblue;">

… mit Abstand vom Rand

• <ul style="list-style-position: inside;">
• <li style="list-style-position: outside;">
• <ul style="padding-left: 30px;">

Extra Einrückung des Textes

• <li style="padding-left: 20px;">

… mehr Zeilenabstand

• <li style="margin-bottom: 12px;> und/oder
• <li style="margin: 12px 0;">

In Kombination

• Normaler Listenpunkt

Da wegerl.at Systemfonts verwendete und diese mit CSS individuellen color definiert waren, müssten die Beispiele zur "farbigen Visualisierung" jeweils im li Tag ausgezeichnet sein: li style="color: royalblue;" s. hier im Quelltext.

Normale Textauszeichnung

• Mit Start-Tag <ul style="color: royalblue;"> sind gesamte Liste, die Listenpunkte und Schrift mit Farbe.
• Der Start-Tag <li style="padding-left: 20px;"> ist für extra Einrückung des Textes zum Listenpunkt.

• Mit Start-Tag <ul style="list-style-position: inside;"> kann man gesamter Liste den Aufzählungszeichen mehr Abstand zum Rand geben. Der Text folgender Zeile ist unter dem Aufzählungszeichen.
• (Standard) Abstands normal, gesamter Liste die Listenpunkte mit Start-Tag <ul style="list-style-position: outside;"> oder mit Elementname li das entsprechende Element.

• Mit dem Start-Tag <ul style="padding-left: 30px;"> kann man der gesamten Liste mehr oder weniger Abstand zum Rand geben, während der Text der nächsten Zeile wie gewohnt dargestellt wird.
• Wenn ein größerer Zeilenabstand zwischen den Listenpunkten gewünscht ist, kann man den Start-Tag <li style="margin-bottom: 12px;"> verwenden, um den Abstand zum nächsten Listenpunkt zu vergrößern.
• … somit ist der Zeilenabstand zum nächsten Listenpunkt erweitert.
• Der Start-Tag <li style="margin: 12px 0;"> erweitert den Abstand sowohl zum vorherigen als auch zum nächsten Listenpunkt.
• Man kann auch der gesamten Liste mit den Attributen im Start-Tag <ul> oder <ol> eine gemeinsame Farbe zuweisen und mehr Abstand zum Rand geben. Im Start-Tag <li> kann man die Einrückung der Schrift vom Punkt vergrößern und die Zeilenabstände definieren.
  • Die Unterpunkte (Einrückung) werden mit den Elementnamen ul oder ol ausgezeichnet, und der Start-Tag <li> folgt mit normalem Abstand.
  • Es gibt verschiedene Möglichkeiten, die Unterpunkte zu gestalten, zum Beispiel durch Variieren des Zeilenabstands mit dem Attribut style="margin: 12px 0;" im Start-Tag <li>.
  • Man kann diese Formatierung entweder direkt im HTML-Text-Editor oder
  • über CSS mit einer class definieren.

<hr />

<ul>
 <li>Normaler Listenpunkt.</li>
</ul>

<hr />

<ul style="color: royalblue;">
 <li>Text Text Text.</li>
 <li style="list-style-position: outside;">Text Text Text.</li>
 <li style="padding-left: 20px;">Text Text Text.</li>
</ul>

<hr />

<ul style="list-style-position: inside; color: mediumblue;">
 <li>Text Text Text.</li>
</ul>

<hr />

<ul style="padding-left: 30px; color: navy;">
 <li>Text Text Text.</li>
 <li style="margin-bottom: 12px;">Text Text Text.</li>
 <li style="margin: 12px 0;">Text Text Text.</li>
 <li style="margin: 12px 0;">Text Text Text.</li>
 <li>Text Text Text.
<ul style="list-style-type: circle;">
 <li>Unterpunkt.</li>
 <li style="margin: 12px 0;">Unterpunkte den Zeilenabstand variieren.</li>
 <li style="margin: 12px 0;"><i>Text Text Text.</li>
 <li><i>ansonsten in CSS (ebd. auch class).</i></li>
</ul>
</li>
</ul>

Bemerkungen:

Es ist nicht empfehlenswert, das line-height-Attribut im Start-Tag <li> zu verwenden, da sich die Auswirkungen auf die Abstände nach oben und unten überlappen können. Allerdings kann ein größerer Zeilenabstand im Gesamten, beispielsweise durch das Hinzufügen von style="line-height: 150%;" zum ul-Tag oder dem ol-Tag, durchaus sinnvoll sein. Dies kann durch Hinzufügen von style="margin-bottom 12px;" oder style="margin: 12px 0;" zum li-Tag erweitert werden, um die Listenpunkte zu betonen.

Es ist wichtig zu beachten, dass das Auszeichnen von Unterpunkten allein mit dem line-height-Attribut im Start-Tag der Elemente ul und ol nicht funktioniert. Dadurch werden auch die darüberliegenden Listenpunkte mit einem erweiterten Zeilenabstand versehen.

CSS für ständigen Gebrauch

CSS:

li {
 margin: 10px 0;
}

… und teils Gebrauch

Dasselbe, Attributname class, z. B. die Class Definition im CSS:

.extra-li {
 margin: 10px 0;
}

… und der Class-Selektor, das Attribut (Attributname und Attributwert) im Start-Tag <li> – also Auszeichnung im HTML-Text-Editor:

<li class="extra-li">

Ein Vorteil der Verwendung von CSS-Klassen zur Auszeichnung von Listenelementen besteht darin, dass man die Abstände zwischen den Unterpunkten beibehalten kann, während jedes li-Start-Tag einzeln ausgezeichnet werden muss. Allerdings ist der Aufwand für die Verwendung von CSS-Klassen und Selektoren über das class-Attribut im Vergleich zur direkten Auszeichnung mit li-Start-Tags in der Regel gleich. Aber die Trennung von Inhalt und Layout erleichtert, die Wartbarkeit und Flexibilität der Webseite, also CSS ist immer gut.

Bspw.

Hier noch ein Beispiel, das mit dem Class-Selektor und Stylesheet-Angabe im CSS:

.bigger {
 color: royalblue;
 font-size: 150%;
 list-style-position: inside;
}

… dann im HTML-Text-Editor über Attributname class:

<ul>
<li class="bigger">Listenpunkt mit Class bigger</li>
<li class="bigger">Listenpunkt mit Class bigger</li>
<li>Listenpunkt ohne Class bigger</li>
</ul>

Darstellung:

• Listenpunkt mit Class bigger
• Listenpunkt mit Class bigger
• Listenpunkt ohne Class bigger

Merke: Die Darstellung mit Class ist nur im Frontend.

Hingegen

Hingegen selbe Auszeichnung ohne Class, da genügt im HTML-Text-Editor die Auszeichnung im ul

<ul style="color: royalblue; font-size: 150%; list-style-position: inside;">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>

Dastellung:

• Listenpunkt ohne Class
• Listenpunkt ohne Class

Weiteres zu Listenpunkten im Titel: Bild anstatt Aufzählungszeichen, auch im Menü.

Weiter von Variation

… bitte ich dich zum Titel CSS – Listenelemente einfärben.

Anhang

Die Nummerierung unterbrechen
und geht doch weiter

1. Im Ersten
2. Im Zweiten

Die Nummerierung weiter! –  das ist im Titel HTML/Tutorials/Listen/Aufzählungslisten ff.  s. Gestaltung mit CSS → usw.

3. … und so gehts mit Nr. 3 weiter! – <ol start="3">

Die Schriftgröße von Listing font-size

So im Motto: schnell ist geholfen! – Schriftgrößen in Listen mit CSS ändern.

Die normale Schriftgröße einer Webseite beträgt in der Regel 100%, was entweder 1rem oder 16px entspricht. Wenn die Schriftgröße des Inhaltsbereichs (#content) auf 1.1rem oder 110% erhöht wird, ist es auch möglich, die Schriftgröße von Listen mit CSS zu ändern. Die Größenänderung kann unterschiedlich ausfallen, je nachdem wie die Vererbung von Schriftgrößen innerhalb der Webseite eingestellt ist.

Beispiel: Der Website normalen Schriftgröße von 100%, das sind, ist in der Regel 1em oder 16px. Und die Schriftgröße für #content wurde auf 1.1em bzw. 110% editiert. So ist es konform das font-size auch von Listen zu ändern.

#content ol, #content ul {
font-size:110%;
font-weight: 300;
}

#content li > ul,
#content li > ol { 
font-size:100%;
}

Das so unterschiedlich der % das geht aus der Vererbungssache von Schriftgröße.

• Kurz zum Verständnis siehe hier: books.google
• Ein bisschen mehr Ordnung: Listen

Aktualisiert im Jahr 2023-März