html Listen

© Januar 2022, letzte Änderung am 10.05.24

Übersicht

• Listen   Struktur,
• nicht numerierte Listen
  Ausrücken/Einrücken, Abstandes Punkt zu Text, Einrücken aller Punkte
  Einrücken Punkt zu Unterpunkt, Aussehen der Punkte
• numerierte Listen
  Ebenen einer Liste, Zählung ändern, Zählungsrichtung, andere Zähl-Symbole,
• Definitions-Listen
  Definitionsliste
• Quellen

Listen

Die Schlüsselworte für Listen sind:
<ul>  wie unsorted list, mit Punkten
<ol>  wie ordered list mit Numerierung
<dl>  wie description list
<li>  für das jeweilige Element - list item

Struktur einer Liste

<ul>
  <li> 1. Punkt… </li>
  <li> 2. Punkt… </li>
  <ol>
    <li> 1. numerierte Unterpunkt… </li>
  <ol>
</ul>

Zum Anfang

nicht numerierte Listen

Änderung der Position des Punktes

• Ausgerückt mit <ul style="list-style-position: outside;">
  ist die Standardeinstellung.
• nächster Punkt
• Ein Unterpunkt

• Eingerückt mit <ul style="list-style-position: inside;">
  mit einer 2. Zeile
• nächster Punkt
  mit einer 2. Zeile

Änderung des Abstandes Punkt zu Text

• Die Zeile ist mit den Befehl  <ul style="text-indent:-9px;">
  fast auf den Punkt gerutscht. Das wirkt sich nicht auf die 2. Zeile aus.

• Mit den Befehl  <ul style="text-indent:10px;">
  ist in der ersten Zeile mehr Platz zwischen Punkt und Text.
• Auf die Unterpunkte?
  wirkt sich das aus.

Einrücken aller Punkte ändern

• Ein Zweizeiler, leicht nach rechts verschoben
  hier eingerückt mit  <ul style="margin-left:10px" >
• Ein Unterpunkt, ebenso verschoben (gleicher Offsett)
• Ein Unterpunkt mit  <ul style="margin-left:10px" >
  hat keine Auswirkung.

• Alternativ eingerücken nur mit  <ul style="padding-left:10px" >
  Man sieht das die Wirkung anders ist.
• Ein Unterpunkt, ebenso verschoben (gleicher Offsett)
• Es sei denn der Unterpunkt enthält ebenso  <ul style="padding-left:10px" >
  

Einrücken Punkt zu Unterpunkt ändern

• Die Summe aus Margin und Padding bestimmt das Einrücken.
  Hier  <ul style="margin-left:20px; padding-left:0px" >
• Der Unterpunkt ist kaum eingerückt, da
  <ul style="margin-left:10px; padding-left:0px" >
• Das wird auf die nächste Ebene im Firefox 102 nicht vererbt.
• Ein weiterer Punkt

Zum Anfang

Aussehen der Punkte einer (unnumerierten) Liste

Bullit List mit <ul> wie unsortierter Liste.
Soll mein Bullit anders aussehen, kann ich das entsprechend zuweisen.
In diesem Beispiel habe ich das direkt hinter den Befehl  <ul…  geschrieben.
Besser ist es natürlich das im .css über  list-style-type  zu defnieren.

• <ul type="disc">  ist die Standardeinstellung.
          und ist nötig, wenn man wieder dahin zurück möchte.

• <ul type="square">  erzeugt Würfel.

• <ul type="circle">  erzeugt nicht ausgefüllte Kreise.

• <ul style="list-style-type:none">  erzeugt einen Unterpunkt ohne Dot.

Zum Anfang

numerierte Listen

Ebenen einer numerierten Liste

Eine Numerierte Liste verwendet  <ol>  wie ordered list, statt  <ul>.

1. Ebene A gestartet mit <ol>
2. Ebene A
1. Ebene B gestartet mit <ol>
1. Ebene C gestartet mit <ol>
2. Ebene C endet danach mit </ol> </ol> → Ebene A
3. Ebene A beendet mit </ol>

Zum Anfang

Änderung der Zählung

7. Den Start der Aufzählung kann ich ändern.  <ol start="7">
8. Nächster Punkt der Aufzählung.
3. Ich kann auch Mittendrin die Zählung ändern.  <li value="3">.
4. nächster Punkt

Zählrichtungfestlegen

7. Die Zählrichtung kann ich leider nur am Anfang festlegen.  <ol reversed="reversed">
8. Nächster Punkt der Aufzählung.
3. Ich kann auch Mittendrin die Zählung ändern.  <li value="3">.
4. nächster Punkt

Zum Anfang

Andere Symbole zur Zählung

Anbei nur ein paar Beispiele. Es gibt bei weitem mehr.

1. <ol type="1">  ist die Standardeinstellung.

2. <ol type="I"> steht für große römische Zahlen.

3. <ol type="a"> steht für Numerierung mit Kleinbuchstaben.

4. <ol type="A"> steht für Numerierung mit Großbuchstaben.

Zum Anfang

Definitions-Liste

Eine Definitions-Liste mit  <dl>  wie (defintion list) verwendet
die Tags  <dt>  für das Schlüsselwort - Term statt <li>
und  <dd>  für die Beschreibung - description.

1. Wort

Und zum 1. Schlüsselwort eine längere über mehrere Zeilen lange Beschreibung.

...und eine Ergänzung: Wobei die Darstellung in der CSS-Datei angepasst wurde.

2. Wort

Und die 2. Beschreibung dazu.

Zum Anfang

Quellen

selfhtml.org   HTML/Tutorials/Listen
selfhtml.org   HTML/Tutorials/Listen/Hybride Nummerierung
w3docs.com   CSS-Eigenschaft list-style

Zum Anfang