XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Site- und Layoutcheck (http://xhtmlforum.de/forumdisplay.php?f=77)
-   -   Parameter für nummerierte Listen (http://xhtmlforum.de/showthread.php?t=74545)

york 27.03.2023 18:06

Parameter für nummerierte Listen
 
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 28.03.2023 06: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 20.04.2023 15:21

Zitat:

Zitat von MrMurphy (Beitrag 555445)

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023