Parameter für nummerierte Listen

york · #1 (**permalink**) 27.03.2023, 17:06

Hallo,

ich möchte auf einer Seite gerne das optionale start Attribut für den Anfang des Index (OL) verwenden. Das erlaubt eine Unterbrechung der Aufzählung und die Wiederaufnahme. Allerdings führt es im Chrome Browser nicht zum gewünschten Ergebniss.

HTML-Code:

<ol start="2">
<li class="start=&quot;2&quot;"><strong>Menü-Punkt Überschrift:</strong></li>
</ol>

Wer hat eine Idee, woran es liegt?

MrMurphy · #2 (**permalink**) 28.03.2023, 05:29

Zitat:

Wer hat eine Idee, woran es liegt?

Ja.

Zunächst führt die Angabe

Zitat:

Allerdings führt es im Chrome Browser nicht zum gewünschten Ergebniss.

zu einer falschen Annahme. In anderen Browsern wird das von dir erwartete Ergebnis nämlich auch nicht angezeigt.

Das Zählen mit dem start-Attribut funktioniert im übrigen. Das ist alles HTML.

Nur setzt du mittels CSS eine Anzeige über die Zahl, so dass sie nicht angezeigt wird. Das kannst du nachvollziehen, wenn du im CSS die Angabe

Code:

left: -35px;

in

Code:

.entry-content ol>li:before {

löscht. Dann verschiebt sich die mit CSS angezeigte Zahl und die korrekte mit HTML erzeugte Zahl wird sichtbar.

Die mit CSS erzeugte Zahl

Code:

ol.liste2>li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    top: -9px;
    left: -1.9em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 2.4em;
    margin-right: 0;
    padding: 0 0 4px 4px;
    color: #949494;
    font-weight: 700;
    font-size: 32pt;
    font-family: Oswald,Arial,sans-serif;
    text-align: center;
}

hat keinen Zugriff auf das HTML und kann deshalb auch nicht den von HTML erzeugten Wert übernehmen.

Insgesamt haben dein HTML und CSS nur wenig mit den aktuellen HTML- und CSS-Regel zu tun. Aber das war nicht deine Frage.

york · #3 (**permalink**) 20.04.2023, 14:21

Zitat:

Zitat von MrMurphy

hat keinen Zugriff auf das HTML und kann deshalb auch nicht den von HTML erzeugten Wert übernehmen.

Danke für deinen Hinweis, der mich letzlich zu folgender Lösung geführt hat:

Code:

ol li::before {
  content: counter(list-counter);
	counter-increment: list-counter;
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #0693e3;
  color: #ffffff;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
  line-height: 30px;
}


body.postid-xxx ol:first-of-type {
  counter-reset: mycounter;
}

body.postid-xxx ol li::before {
  content: counter(mycounter);
  counter-increment: mycounter;
}

Das Problem bestand darin, dass ich mehrere ol-Elemente auf der Seite habe, und der Zähler für die Nummerierung jedes ol-Elements separat gezählt wird. Ich musste also sicherstellen, dass der Zähler für alle ol-Elemente auf der Seite fortlaufend ist.

Mit dem Code habe ich nun das counter-reset CSS-Attribut auf das gesamte Dokument (postid-xxx) angewendet, nicht nur auf einzelne ol-Elemente. Dadurch wird der Zähler für alle ol-Elemente auf der Seite initialisiert und fortlaufend gezählt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE(6-8)-Bug beim clearen von Listen	pHamez	CSS	11	27.08.2010 17:08
Probleme mit Parameter...	webseite_freaky	Serveradministration und serverseitige Scripte	2	20.02.2009 15:00
[JS] Undefinierten Parameter aufrufen	markuskoehler	Javascript & Ajax	11	27.11.2008 08:45
Problem mit Listen in Eltern mit Padding: Punkte werden im verbotenen Bereich angezei	braindead	(X)HTML	5	13.09.2007 16:43
Listen, Absätze und Überschriften	SPMan	(X)HTML	4	05.08.2004 11:15