nicht angemeldet
Rolf B
Rolf B
Rolf B
Rolf B
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Felix Riesterer
Robert B.
Robert B.
Hallo,
ich habe auf meinen Contentseiten oben immer ein table of content, das die h2 und h3-Überschriften aufzählt. Technisch ist es ein "ol", die h2s und h3s sind "li" mit einer jeweils eigenen Klasse.
Die h3s (li.h3-toc) haben einen Aufzählungspunkt und sind eingerückt. Siehe screenshots.
Seltsamerweise ist zwischen dem Aufzählungspunkt und dem beginnenden Überschrift rechts ein unnatürlich großer freier Platz, der aber nur in Chrome zu sehen ist. In FF sieht es normal aus. Siehe screenshots.
Woher kommt dieser große Abstand, ist da ein Browserdefault in Chrome am Wirken, den FF nicht hat und den mein Reset nicht erledigt? Ich sehe kein Styling, mit dem ich diese Stelle beeinflusst hätte oder auch nur beeinflussen könnte. Ich kann immer nur die gesamte li-Zeile stylen, z.B. mit margin-left verschieben.
Ich hätte es gern so wie im FF, siehe screenshot. Hat jemand eine Idee?
Verwendeter Code:
ol.ol-toc {
padding: 0px 0px 0px 60px;
margin: 0px 0px 25px 0px;
list-style-image: none;
}
li.h3-toc {
list-style-position: inside;
list-style-type: square;
font-size: 0.9375rem;
}
Das Developertool von Chrome zeigt mir folgende Browserdefaults, die ich leider im developer auch nicht testweise ändern und ausprobieren kann und die mir auch wenig sagen.
li {
display: list-item;
unicode-bidi: isolate;
}
::marker, ::before::marker, ::after::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: auto !important;
Grüße,
Matinee
Hallo Matinee,
gib uns bitte einen Link auf die Seite, wo das vollständig steht. CSS ohne HTML dazu ist hier unzureichend. Insbesondere ist mir unklar, wie es Dir bei 60px linkem Rand gelingt, die Liste linksbündig zu halten… Abgesehen davon, dass px für diesen Zweck verpönt sind, em-Angaben skalieren automatisch mit der Schriftgröße und sind daher das Mittel der Wahl.
Es ist allerdings nicht der richtige Weg, von einer 16px Defaultgröße auszugehen und font-size: 0.9375rem zu notieren, bloß um die 15px zu vermeiden. SO genau kommt das nicht, pixelgenaues Layout braucht man nicht, der Browser rundet eh, also mach Dir keinen Kopf mit pseudoexakter Darstellung und schreib einfach 0.9rem oder 0.95rem.
display: list-item ist für li-Elemente wichtig, damit überhaupt erst ein Marker entsteht (also die Zahl oder das Quadrat vor dem Item) und ein Counter geführt wird.
unicode-bidi: isolate ist für Dich egal, das betrifft die Mischung mit rechts-nach-links Texten.
Das ::marker Pseudoelement ist das, was der Browser für die Listennummerierung/-bepunktung generiert. Die Kombo mit ::before und ::after habe ich anderswo schon gesehen, kenne aber ihre genaue Auswirkung nicht.
Rolf
Hallo Matinee,
ein Nachtrag: Der Einfluss von CSS auf Listen-Markern ist - wenn sich nicht letztlich was geändert hat, das ich nicht kenne - erbärmlich. Insbesondere der Abstand vom Marker zum List-Item ist browserabhängig.
Eine Lösung kann sein, einfach aufzugeben, list-style: none zu setzen und den Marker manuell zu setzen, mit ::before, das Du absolut positionierst. Dann kannst Du Einrückung und Markerbreite exakt festlegen. Eine nummerierte Liste bekommst Du mit CSS-Countern hin. Wir gehen hier im Wiki darauf ein, allerdings nicht auf die absolute Positionierung.
Das folgende HTML+CSS sollte in FF und Chrome gleich angezeigt werden. Ich habe auf deine Klassenflut verzichtet und statt dessen mit detaillierteren Selektoren gearbeitet. Passe das nach Bedarf auf deine Situation an.
<nav>
<p>Inhaltsverzeichnis (klickbar)</p>
<ol>
<li>
<a href="#">Lorem Ipsum</a>
<ul>
<li>Bla Bla Bla<br>Fasel Fasel Fasel Fasel</li>
<li>Bla Bla Bla</li>
</ul>
</li>
<li>
<a href="#">Mupsi Morel</a>
<ul>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
</ul>
</li>
</ol>
</nav>
nav ol {
padding-left: 1em;
}
nav ol ul {
padding-left: 1em;
}
/* für alle li */
nav li {
list-style: none;
position: relative;
}
nav li::before {
position: absolute;
left: -1em;
}
/* nur für die li im ol */
nav ol > li::before {
content: counter(list-item) '.';
}
/* nur für die li im ul */
nav ul > li::before {
content: '\25AA';
}
(Mupsi Morel sollte eigentlich ein originelles Anagramm von Lorem Ipsum sein.
Aber die Originalität hält sich in Grenzen… - keine Ahnung wie vertrauenswürdig der Link ist, besser Inkognito öffnen!)
Rolf
Hallo Rolf,
die Site existiert leider noch nicht online.
Das HTML ist unspektakulär:
<main>
<h1>...</h1>
<p class="wort-toc">Inhaltsverzeichnis (klickbar):</p>
<ol class="ol-toc">
<li class="h2-toc"><a class="anchorblack" href="#... title="...">...</a></li>
<li class="h3-toc">...</li>
<li class="h3-toc">...</li>
<li value="2" class="h2-toc"><a class="anchorblack" href="#..." title="...>...</a></li>
<li value="3" class="h2-toc"><a class="anchorblack" href="#..." title="...>...</a></li>
<li class="h3-toc">...</li>
<li class="h3-toc">...</li>
<li class="h3-toc">...</li>
<li class="h3-toc">...</li>
<li class="h3-toc">...</li>
<li value="4" class="h2-toc"><a class="anchorblack" href="#... title="...">...</a></li>
<li class="h3-toc">...</li>
<li class="h3-toc">...</li>
</ol>
<figure ... </figure>
...
</main>
Also du denkst, das gehört so in Chrome, ist Absicht und ich kann das wohl nur "manuell" ohne Listenzeichen lösen? Komisch, so ein großer Abstand ist doch nicht normal, was macht Chrome denn da für einen Unsinn?
Das wäre nicht so schön, auch wenn du mir - danke - einen Alternativcode angegeben hast. Dann müsste ich mir alle Seiten und deren TOCs nochmal anschauen, was da evtl. anders ist oder auch auf anderen Parallel-Websites, die recht ähnlich aufgebaut sind. Und dann überall anpassen und die dann überflüssigen Klassen im HTML und CSS überall entfernen usw....
Blöd, wenn man den Zwischenraum gar nicht zu greifen bekommt mit CSS.
Grüße,
Matinee
Hallo Matinee,
Also du denkst, das gehört so in Chrome, ist Absicht...
Ich denke, dass jeder Browser eine andere Idee hat, was sich hier gehört, und CSS keine Möglichkeit mitbringt, ihn zu Deiner Idee zu überreden. Unsinn ist das nicht, es ist einfach nur eine weniger enge Darstellung. Dass es in deinem Kontext unsinnig sein mag, ist halt doof.
Das HTML ist unspektakulär
Ganz ehrlich? Es ist spektakuläre Irreführung. Bzw. nicht spektakulär, weil „Spektakel“ von spectaculum – Anblick – kommt und ein sehender Besucher das Problem eher nicht mitbekommt. Aber wer einen Screenreader darauf loslässt…
Der Output sieht so aus, als wäre das eine zweistufige Liste. Deshalb hatte mein Muster-HTML auch eine ol und darin ul.
Dein Markup ist aber eine einstufige Liste und dann modelst Du die Darstellung so hin, dass es zweistufig aussieht. Dafür brichst Du Dir mit Klassen und dem value-Attribut die Finger ab.
Schau Dir mein HTML/CSS an - da ist nichts mit erzwungenem Item-Index, da kommt alles ganz natürlich aus der Semantik des Markups und ich brauche rein technisch gar keine Klasse.
Rolf
Hallo Rolf,
Ich denke, dass jeder Browser eine andere Idee hat, was sich hier gehört, und CSS keine Möglichkeit mitbringt, ihn zu Deiner Idee zu überreden. Unsinn ist das nicht, es ist einfach nur eine weniger enge Darstellung. Dass es in deinem Kontext unsinnig sein mag, ist halt doof.
Ja und ausgerechnet Chrome, den so viele verwenden...
Auf https://css-tricks.com/list-markers-and-string-styles/ steht dazu Folgendes: Note the space after the closing bracket in the content value. That’s included to provide a little bit of space between the marker and the list content. Ordinarily you might think to use a marking or padding, but as we saw earlier, those properties can’t be applied with ::marker. Which is frustrating!
Ganz ehrlich? Es ist spektakuläre Irreführung. Bzw. nicht spektakulär, weil „Spektakel“ von spectaculum – Anblick – kommt und ein sehender Besucher das Problem eher nicht mitbekommt. Aber wer einen Screenreader darauf loslässt…
Der Output sieht so aus, als wäre das eine zweistufige Liste. Deshalb hatte mein Muster-HTML auch eine ol und darin ul.
Es ist eine ganz normale ol-Liste mit li drin. Dass man li einrücken und mit einem Listenzeichen versehen kann (h3s) oder nummerieren (h2s) sind ganz normale features. Warum soll das ein screenreader nicht lesen können?
Die HTML-mäßig nur eine Ebene der li-Listenpunkte hat halt optisch zwei verschiedene Kategorien, nämlich die nummerierten h2-li und die eingerückten h3-li mit Listenzeichen. Da die h3s beim jeweiligen h2-Abschnitt dessen untergeordnete h3-Abschnitte darstellen, ist das hierarchisch so auch korrekt der Realität entsprechend und optisch erkennbar.
Du meinst, weil ein screenreader dieser Hierarchie nicht erkennt und das nur von einer HTML-"li"-Ebene ausgehend alles "gleichwertig" sieht?
Immerhin sind die h2-li seitenintern verlinkt. Das kann auch ein screenreader erkennen und gibt einen Hinweis auf deren größere Wichtigkeit.
Aber was heißt schon "wichtiger" für den User, letztlich sind das alles Überschriften, die spezifische Inhalte ankündigen und was den User interessiert, liest er sich durch. Ob das hierarchisch h2 oder h3 oder eine h3 unter einer h2 ist, dürfte dem User ziemlich egal sein, meinst du nicht?
Und wer komplett alles von Anfang bis Ende durchliest, dem ist das auch egal. Ist nicht das Wichtigste, dass jeder User oben am TOC sieht, welche Inhaltsabschnitte es gibt und dass es eine sinnvolle Struktur gibt, an der er sich orientieren kann? Das kann auch ein screenreader, oder? Kenn mich damit nicht so aus, habe aber durchaus auf Acc. geachtet.
Grüße,
Matinee
Hallo Matinee,
Da die h3s beim jeweiligen h2-Abschnitt dessen untergeordnete h3-Abschnitte darstellen, ist das hierarchisch so auch korrekt der Realität entsprechend und optisch erkennbar.
Ich weiß, dass diese Diskussion zu nichts führen wird. Die Selfer sind dann nur wieder die Prinzipienreiter, die einem unnötige Arbeit machen.
Aber dein Gedankenfehler ist in den Worten "optisch erkennbar" vollständig beschrieben. HTML soll die Struktur des Dokuments beschreiben. Eine zweistufige Liste, die einstufig implementiert wird und durch visuelle Tricks zweistufig dargestellt wird, ist schlichtweg falsch.
Dass es richtig aussieht, macht die Sache eher schlimmer als besser. Richtig aussehen und richtig sein ist nicht das Gleiche. Und nun geh hin und tu, was Du willst.
Rolf
Hallo Rolf,
komm, sei nicht beleidigt. Ich versteh schon, was du meinst mit der HTML-Hierarchie innerhalb einer Liste und habe deine Ansicht nicht kritisiert, sondern nur meine Gedanken dazu aus meiner Sicht geäußert, pro derzeitigem Status. Also warum das m.E. hier vermutlich keinen relevanten Unterschied macht. Anders als z.B. bei Navs mit Untermenü.
Pro das Eine zu sein heißt nicht Contra das Andere zu sein. Ob ich mir dann die Arbeit machen will, weil es mir die Mühe wert ist oder nicht, macht dich so oder so nicht zum "Prinzipienreiter, der mir nur Arbeit machen will."
Der Punkt ist halt, was ist innerhalb einer Liste eine echte Hierarchie, die sich auch so in der HTML-Struktur wiederspiegeln soll/muss. Oder geht es auch ohne. Weil in der Tat, die viele Arbeit nach all den Monaten, die ich jetzt schon rumbastle ... scheue ich, wenn es nicht wirklich sein muss. Das verbinde ich aber nicht negativ mit dem Impulsgeber dazu.
Wen es interessiert, zum eigentlichen Thema des Abstandes beim Listenzeichen habe ich noch einen guten Artikel gefunden: https://css-tricks.com/list-markers-and-string-styles/
Offenbar ist der große Abstand bei Chrome nur bei "inside" und ein bug seit mind. 2023, der den Abstand fälschlich so groß wie die gesamte Schriftgröße macht, bei mir 16px. Anstatt wie sonst ein Drittel davon.
Mit einem anderen custom-Zeichen den Abstand dann normal bestimmen oder mit padding-inline-start probieren, heißt es da.
Grüße,
Matinee
@@Matinee
Hallo Rolf,
komm, sei nicht beleidigt.
*Prust.*
Also warum das m.E. hier vermutlich keinen relevanten Unterschied macht. Anders als z.B. bei Navs mit Untermenü.
Was du hier hast – ein Inhaltsverzeichnis – ist eine Navigation. Und ein Inhaltsverzeichnis mit Kapiteln und Unterkapiteln ist eine Navigation mit Untermenüs – sollte es zumindest sein.
Weil in der Tat, die viele Arbeit nach all den Monaten, die ich jetzt schon rumbastle ... scheue ich, wenn es nicht wirklich sein muss.
„Ich habe das jetzt monatelang falsch gemacht, da werde ich das doch jetzt nicht mehr berichtigen“?
🖖 Live long and prosper
Moin Matinee,
Ich versteh schon, was du meinst mit der HTML-Hierarchie innerhalb einer Liste und habe deine Ansicht nicht kritisiert, sondern nur meine Gedanken dazu aus meiner Sicht geäußert, pro derzeitigem Status. Also warum das m.E. hier vermutlich keinen relevanten Unterschied macht. Anders als z.B. bei Navs mit Untermenü.
und hier ist Dir von mehreren Nutzern erklärt worden, warum es eben doch einen relevanten Unterschied macht.
Der Punkt ist halt, was ist innerhalb einer Liste eine echte Hierarchie, die sich auch so in der HTML-Struktur wiederspiegeln soll/muss. Oder geht es auch ohne. Weil in der Tat, die viele Arbeit nach all den Monaten, die ich jetzt schon rumbastle ... scheue ich, wenn es nicht wirklich sein muss. Das verbinde ich aber nicht negativ mit dem Impulsgeber dazu.
Dieses „Gebastel“ ist fragil, das siehst Du ja jetzt schon im unterschiedlichen Rendering. Während meiner Informatikausbildung habe ich etwas Schlaues gelernt:
Kaum macht man's richtig, geht's!
Richtig ist „leider“ das Gegenteil von „Gebastel“, nämlich das Nutzen und Einhalten von Standards. Da nichts länger als ein Provisorium hält, erreichst Du sehr schnell einen positiven Nutzen, wenn Du es „richtig“ machst.
Viele Grüße
Robert
@@Matinee
Du meinst, weil ein screenreader dieser Hierarchie nicht erkennt und das nur von einer HTML-"li"-Ebene ausgehend alles "gleichwertig" sieht?
Wenn du keine Hierarchie angibst, kann ein Screenreader auch keine Hierarchie erkennen.
Berichtige den Fehler in deinem HTML, d.h. mache eine verschachtelte Liste daraus, und schon dürfte sich auch dein Darstellungsproblem erledigt haben.
🖖 Live long and prosper
@@Rolf B
nav li { list-style: none; position: relative; } nav li::before { position: absolute; left: -1em; }
Das ist sooo 2025.
2026: anchor positioning ⚓️
🖖 Live long and prosper
@@Matinee
„(klickbar)“ ist ein sicheres Zeichen für schlechtes Design. Stelle sicher, dass Nutzer ohne diesen Hinweis erkennen können, dass die Listepunkte im Inhaltsverzeichnis clickbare Links sind, und lass diesen dann überflüssigen Hinweis weg!
🖖 Live long and prosper
Es ist nur ein einzelnes kleines Wort, mit dem ich sicher gehen will, dass meine nicht sehr technikaffinen User auf jeden Fall bemerken, dass man es anklicken kann. Weil es eine Erleichterung ist, die bei einem TOC nicht selbstverständlich ist.
Man kann es auch so erkennen, da es ja normale unterstrichene Links sind, die alle Link states haben, samt title attribute, aber manche tun es dennoch nicht und scrollen sich dann mühsam durch. Und das ist mir das kleine Wörtlein wert, das an der Stelle nicht stört.
Muss dieses überflüssige, voreilige Runtermachen sein, von wegen schlechtes Design ganz sicher ect.?
Beim "Einstecken" von harmlosen anderslautenden Gedanken, die man ganz normal in der Sache äußert, sind tendentiell alle immer sehr sensibel, aber beim "Austeilen" sofort alles Runtermachen, selbst wenn es noch nicht mal das Anliegen des Threads ist... "kopfschüttel".
Grüße,
Matinee
@@Matinee
Es ist nur ein einzelnes kleines Wort, mit dem ich sicher gehen will, dass meine nicht sehr technikaffinen User auf jeden Fall bemerken, dass man es anklicken kann. Weil es eine Erleichterung ist, die bei einem TOC nicht selbstverständlich ist.
Hast du vielleich mal darüber nachgedacht, wie Nutzer bemerken können, dass es sich um anclickbare Links handelt? Ohne zu sagen „click mich!“? Andere Farbe vielleicht?
samt title attribute
?? Was soll das denn?
aber manche tun es dennoch nicht und scrollen sich dann mühsam durch.
Du hast Nutzertests mit Leuten aus deiner Zielgruppe gemacht? Sehr gut.
Muss dieses überflüssige, voreilige Runtermachen sein, von wegen schlechtes Design ganz sicher ect.?
Eine Webseite sollte selbsterklärend sein. Wenn sie das nicht ist, ist sie schlecht designt.
Da sollte man nicht anfangen, die Benutzung mit Worten zu erklären, sondern das Design besser machen.
🖖 Live long and prosper
Ich habe keine Lust mich lang und breit für Dinge zu rechtfertigen, die ich gar nicht zur Diskussion gestellt habe.
Noch dazu, wenn "Experten" ihr Expertenwissen offenbar größtenteils nur dazu missbrauchen, um damit ungefragt andere kritisch runterzumachen, selbst wenn die Dinge gar nicht zur Diskussion gestellt wurden. Sachthemen werden benutzt, um Frustrationen aus anderen Lebensbereichen schön fachlich verpackt an dieser Stelle abzuladen. Speziell bei dir merkt man das auch daran, dass gelegentlich (nicht hier) völlig unwichtige Sachen wie Schreibfehler ect. angemahnt werden. So stellt es sich mir dar.
Mir ist klar, was jetzt kommen wird an Reaktionen... Viel Spaß.
Aber keine Sorge, das wird sich bald erledigt haben. Wenn die Infos nur auf diese Weise kommen können, dann verzichte ich gerne darauf. Wenn ich nach a) frage und alle stürzen sich gerne auf b) und c), um etwas unangemessen runterzumachen, deren Hintergründe sie gar nicht kennen und dann auch nicht mal ansatzweise nachvollziehen wollen, weil man ja "die Wahrheit" kennt und unbedingt zu 100% Recht haben muss, weil es ja diese Regel gibt ect.... das brauche ich nicht. Ich bin hier dann mal weg.
Wenn ich aus 20 Jahren Erfahrung weiß, wie meine User ticken und sie dankbar sind für ein harmloses kleines zusätzliches Wort, dann bringe ich das. Und ggf. auch ein zweites Wort. Und wenn es nur für 10% wäre.
Grüße,
Matinee
Hallo Matinee,
Wenn die Infos nur auf diese Weise kommen können, dann verzichte ich gerne darauf.
Weshalb ich ja auch gesagt habe, dass du tun sollst was du für richtig hältst. Das war kein Beleidigtsein, sondern eine Respektsbekundung.
Wenn du meinst, dass deine Nutzer diesen Hinweis brauchen, dann ist das so. Damit spreche ich Gunnar nicht das Recht ab, auf diesen Designaspekt hinzuweisen, aber die Entscheidung, wie du damit umgehst, muss deine sein.
Wenn du meinst, dass du nicht die Zeit hast, dein Markup passend zum Inhalt zu erstellen, dann müssen wir das so annehmen. Dass wir deutlich auf den Fehler und die Nachteile hinweisen, nehmen wir uns aber trotzdem heraus. Ich finde aber auch, dass man das nicht in 5 Iterationen durchkauen muss.
Die zweistufige Liste wird aber dein Abstandsproblem bei den Bullets leider nicht lösen.
Rolf
@@Matinee
Ich habe keine Lust mich lang und breit für Dinge zu rechtfertigen, die ich gar nicht zur Diskussion gestellt habe.
Niemand erwartet von dir eine Rechtfertigung. Alles, was wir dir geben können, sind Denkanstöße. Es liegt bei dir, ob du die Bereitschaft zeigst, wenigstens mal darüber nachzudenken.
Und einen Zahn muss ich dir gleich ziehen: Wenn du hier einen Thread eröffnest, hast du keinerlei Anrecht darauf zu bestimmen, was in dem Thread angesprochen werden darf und was nicht. Das war vor 20 Jahren schon so und das wird auch so bleiben.
Sachthemen werden benutzt, um Frustrationen aus anderen Lebensbereichen schön fachlich verpackt an dieser Stelle abzuladen.
Diese Behauptung solltest belegen können. Wenn nicht, ist sie für mich nur eine nicht ernstzunehmende Äußerung.
🖖 Live long and prosper
Liebe(r) Matinee,
Es ist nur ein einzelnes kleines Wort, mit dem ich sicher gehen will, dass meine nicht sehr technikaffinen User auf jeden Fall bemerken, dass man es anklicken kann.
und „es“ ist das Wort „Inhaltsverzeichnis“? Wozu sollte man das anklicken können? Wenn Du das Inhaltsverzeichnis ausklappbar machen möchtest, dann verwende dafür das details-Element.
Weil es eine Erleichterung ist, die bei einem TOC nicht selbstverständlich ist.
Das sollte unbedingt selbstverständlich sein. Das macht uns die Wikipedia seit mindestens zwei Jahrzehnten so vor, also sollte es sich längst etabliert haben. Und wo es nicht so ist, ist das „Design“ eben schlecht, weil der Grundsatz form follows function verletzt wird.
Man kann es auch so erkennen, da es ja normale unterstrichene Links sind,
Da ist nicht alles ein Link. Also nicht konsequent. Schade.
Muss dieses überflüssige, voreilige Runtermachen sein, von wegen schlechtes Design ganz sicher ect.?
Viele hier Fragende verstehen unter „Design“ lediglich das Aussehen, im Wesentlichen also Form und Farbe. Der Begriff geht aber weit darüber hinaus. Und ja, wenn die Bedienung der Seite nicht genügend intuitiv möglich ist, oder wenn man über Missverständliches stolpern muss, dann ist das auch Design. Aber eben kein gutes.
Liebe Grüße
Felix Riesterer
Moin Matinee,
Muss dieses überflüssige, voreilige Runtermachen sein, von wegen schlechtes Design ganz sicher ect.?
konstruktive Kritik ist kein „Runtermachen“, so viel Fehlerkultur sollte man selbst besitzen. Oder um Dich selbst zu zitieren:
komm, sei nicht beleidigt.
Das gehört auch zu einer Fehlerkultur: sich an seine eigenen Ratschläge halten bzw. nur Ratschläge erteilen, an die man sich auch selbst hält.
Beim "Einstecken" von harmlosen anderslautenden Gedanken, die man ganz normal in der Sache äußert, sind tendentiell alle immer sehr sensibel, aber beim "Austeilen" sofort alles Runtermachen, selbst wenn es noch nicht mal das Anliegen des Threads ist... "kopfschüttel".
Die grundsätzliche Frage an Dich lautet: Möchtest Du, dass Dir geholfen wird oder nicht? Die langjährige Erfahrung zeigt, dass das beheben von Fehlern – auch von Designfehlern – signifikant die Wahrscheinlichkeit erhöht, dass Dein initiales Problem auch gelöst wird.
Viele Grüße
Robert
Moin Matinee,
ich habe auf meinen Contentseiten oben immer ein table of content, das die h2 und h3-Überschriften aufzählt. Technisch ist es ein "ol", die h2s und h3s sind "li" mit einer jeweils eigenen Klasse.
Die h3s (li.h3-toc) haben einen Aufzählungspunkt und sind eingerückt. Siehe screenshots.
von der Semantik her (Form follows Function!) sind es trotzdem ineinander geschachtelte Aufzählungslisten, weil die Überschriften in einer geordneten Reihenfolge (ordered list) in Deinem Dokument vorkommen. Ob das später nummeriert oder „ungeordnet“ erscheint, kannst Du CSS überlassen (list-style-type: square).
Das grundlegende Markup wäre Deiner Beschreibung nach:
<nav>
<h2>Inhaltsverzeichnis</h2>
<ol>
<li><a href="#traumdeutung">Traumdeutung ist …</a>
<ol>
<li><a href="#traumsymbole-deuten">Warum Traumsymbole …</a></li>
<li><a href="#psychologie-und">Psychologie und …</a></li>
</ol></li>
<li><a href="#traumlexikon">Hilft ein Traumlexikon …</a></li>
</ol>
</nav>
<main>
<section id="traumdeutung">
<h2>Traumdeutung ist …</h2>
<section id="traumsymbole-deuten">
<h3>Warum Traumsymbole …</h3>
</section>
<section id="psychologie-und">
<h3>Psychologie und …</h3>
</section>
</section>
<section id="traumlexikon">
<h2>Hilft ein Traumlexikon …</h2>
</section>
<!--
Weitere section mit h2 und Unter-section mit h3, …
-->
</main>
Edit Rolf B: <h3> mit </h3> statt </h2> beendet
Das ist eine Struktur, die auch
verstehen können und zudem ein Wechsel des visuellen Erscheinungsbildes überlebt, CSS anpassen reicht.
Weiterhin habe ich Unterabschnitte auch verlinkt, weil aus Usability-Sicht nicht klar ist, warum nur Hauptüberschriften direkt annavigiert werden können sollen.
Viele Grüße
Robert