Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt

Diskutiere Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt im HTML Forum im Bereich Programmierung; Guten Tag miteinander ich brauche mal bitte eure Hilfe: Ich habe eine Liste mit drei Unterebenen. <ol class="ebene1">, <ol class="ebene2"> und...
Neues Thema erstellen Antworten
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #1
D
Dietmar Leo
Member
Beiträge
7
Punkte Reaktionen
0
Guten Tag miteinander
ich brauche mal bitte eure Hilfe:
Ich habe eine Liste mit drei Unterebenen.
<ol class="ebene1">, <ol class="ebene2"> und <ol class="ebene3">
Zur besseren Übersicht sollen zunächst nur die Überschriften der Ebene 1 sichtbar sein, der Rest ist zum Ausklappen.
Hierfür habe ich die tags <details> und <summary> eingesetzt.
Das funktioniert so weit auch ganz gut, doch die kleinen Dreiecke sind vor jeder Ebene doppelt vorhanden.
Die funktionieren zwar auch (also klappen die Unterpunkte auf / zu), doch sind sie verwirrend.
Irgendetwas mache ich noch falsch.
Wer könnte mir bitte helfen?

In der Anlage ist die Beispieldatei „Accordion_Nummerierung.html“als zip beigelegt und ein Screenshot „pfeile_sind_doppelt.jpg“ .

Ich danke schon mal im voraus :)
Mit lieben Grüßen
Dietmar
 
Anhänge
  • Accordion_Nummerierung.zip
    921 Bytes · Aufrufe: 2
  • pfeile_sind_doppelt.jpg
    pfeile_sind_doppelt.jpg
    14,2 KB · Aufrufe: 1
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #2
S
scatello
Well-known member
Beiträge
528
Punkte Reaktionen
44
Kleiner Hinweis: niemand lädt sich gerne eine Datei von einem Fremden herunter, daher wäre es besser, wenn du deinen HTML- und CSS-Code hier postest.
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #3
D
Dietmar Leo
Member
Beiträge
7
Punkte Reaktionen
0
scatello schrieb:
Kleiner Hinweis: niemand lädt sich gerne eine Datei von einem Fremden herunter, daher wäre es besser, wenn du deinen HTML- und CSS-Code hier postest.
Zum Vergrößern anklicken....

Hallo scatello
Vielen Dank für den Hinweis, daran habe ich nicht gedacht, pardon;-)

Hier also der Code



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Accordion_Nummerierung</title>
<link type="text/css" href="xklappe01.css" rel="stylesheet">
<style>

body { background-color: white;
margin-left: 20px;
font-weight: normal;
text-align: left;
color: rgb(0, 0, 0);
font-family: Arial,Helvetica,sans-serif;
}


li {
padding-bottom:10px;
color: rgb(0, 00, 200);
line-height: 100%;
margin-top: 1pt;
}

/* Hierarchiebenen */

ol.ebene1 li:before {
content: counter(listenpunkt_ebene1) ". ";
counter-increment:listenpunkt_ebene1;
color: rgb(153, 0, 220);
}
/* Text */
ol.ebene1 {
counter-reset:listenpunkt_ebene1;
text-align: left;
line-height: 70%;
margin-left: 10pt;
font-size: 100%;
color: rgb(153, 0, 220);
}

ol.ebene2 li:before {
content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2,decimal) ". ";
counter-increment:listenpunkt_ebene2;
font-size: 100%;
color: rgb(50, 50, 0) ! important;
}
/* Text */
ol.ebene2 {
counter-reset:listenpunkt_ebene2;
list-style-type:none;
font-size: 90%;
}

ol.ebene3 li:before {
content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2)"."counter(listenpunkt_ebene3,decimal) ". ";
counter-increment:listenpunkt_ebene3;
font-size: 90%;
color: rgb(0, 80, 0);
}
/* Text */
ol.ebene3 {
counter-reset:listenpunkt_ebene3;
list-style-type:none;
font-size: 90%;
}
summary:hover {
text-decoration: underline;
color: rgb(0, 80, 220);
}</style>
</head>
<body> ------------------------------------
<ol class="ebene1">
<details>
<summary>
<li>A Ebene 1</li>
</summary>
<ol class="ebene2">
<li>Ebene 2</li>
<li>Ebene 2</li>
<li>Ebene 2</li>
</ol>
</details>
<details>
<summary>
<li>B Ebene 1</li>
</summary>
<ol class="ebene2">
<li>Ebene 2</li>
<li>Ebene 2</li>
<ol class="ebene3">
<li>Ebene 3</li>
<li>Ebene 3</li>
<li>Ebene 3</li>
</ol>
<li>Ebene 2</li>
<li>Ebene 2</li>
</ol>
</details>
<details>
<summary>
<li>C Ebene 1</li>
</summary>
<ol class="ebene2">
<li>Ebene 2</li>
<li>Ebene 2</li>
<li>Ebene 2</li>
</ol>
</details>
</ol>
------------------------------------
</body>
</html>
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Hallo Dietmar und willkommen im Forum!

Zunächst Mal ist dein doctype nicht aktuell, Du musste diesen verwenden:
<!DOCTYPE html>

Dein HTML ist nicht valide, der Validator spuckt dieses aus:
  1. Error: Element details not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)
    From line 91, column 5; to line 91, column 13
    ails>↩ <details>↩
    Contexts in which element details may be used:Where flow content is expected.Content model for element ol:Zero or more li and script-supporting elements.
Zum Vergrößern anklicken....
D. h. als Kindelelemente des äußeren ol sind nur li-Elemente zulässig aber kein details.

Lösche ich dieses ol, kommen die nächsten Fehlermeldungen:
  1. Error: Element li not allowed as child of element summary in this context. (Suppressing further errors from this subtree.)
    From line 82, column 13; to line 82, column 16
    <li>A Eben
    Contexts in which element li may be used:Inside ol elements.Inside ul elements.Inside menu elements.Content model for element summary:Phrasing content, optionally intermixed with heading content.
Zum Vergrößern anklicken....
D. h. ein li-Element ist als Kind von summary nicht erlaubt. Und daher kommen auch die doppelten Pfeile. Lösche ich diese li-Elemente (Text bleibt natürlich), verschwinden sie.
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #5
D
Dietmar Leo
Member
Beiträge
7
Punkte Reaktionen
0
Sempervivum schrieb:
Hallo Dietmar und willkommen im Forum!

Zunächst Mal ist dein doctype nicht aktuell, Du musste diesen verwenden:
<!DOCTYPE html>

Dein HTML ist nicht valide, der Validator spuckt dieses aus:

D. h. als Kindelelemente des äußeren ol sind nur li-Elemente zulässig aber kein details.

Lösche ich dieses ol, kommen die nächsten Fehlermeldungen:

D. h. ein li-Element ist als Kind von summary nicht erlaubt. Und daher kommen auch die doppelten Pfeile. Lösche ich diese li-Elemente (Text bleibt natürlich), verschwinden sie.
Zum Vergrößern anklicken....
herzlichen Dank - will gleich mal schauen :)
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #6
D
Dietmar Leo
Member
Beiträge
7
Punkte Reaktionen
0
Habe jetzt lange probiert, aber irgendwie habe ich den Dreh noch nicht raus: Wenn ich die Elemente lösche, wie vorgeschlagen, ist die ganze Funktion des einklappens verschwunden. Ich habe einfach noch nicht so viel Erfahrung, und bin mit vielen Begriffen noch nicht so vertraut.
Ich werde es noch weiter versuchen, aber super wäre es, wenn Du mir vielleicht bitte meinen Code
In korrigierter Form zurückschicken könntest?
Falls es Dir nicht zu viel Mühe macht!
Liebe Grüße
Dietmar
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #7
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Das hatte ich jetzt noch nicht untersucht, ich werde es mir ansehen.
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #8
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Das HTML hatte ich so geändert und damit funktioniert bei mir das Auf- und zuklappen:
Code: 
<body> ------------------------------------
    <details>
        <summary>
            A Ebene 1
        </summary>
        <ol class="ebene2">
            <li>Ebene 2</li>
            <li>Ebene 2</li>
            <li>Ebene 2</li>
        </ol>
    </details>
    <details>
        <summary>
            B Ebene 1
        </summary>
        <ol class="ebene2">
            <li>Ebene 2</li>
            <li>Ebene 2</li>
            <ol class="ebene3">
                <li>Ebene 3</li>
                <li>Ebene 3</li>
                <li>Ebene 3</li>
            </ol>
            <li>Ebene 2</li>
            <li>Ebene 2</li>
        </ol>
    </details>
    <details>
        <summary>
            C Ebene 1
        </summary>
        <ol class="ebene2">
            <li>Ebene 2</li>
            <li>Ebene 2</li>
            <li>Ebene 2</li>
        </ol>
    </details>
    ------------------------------------
</body>
Am CSS habe ich nichts geändert.
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #9
D
Dietmar Leo
Member
Beiträge
7
Punkte Reaktionen
0
Einen schönen guten Morgen
Ich danke Dir, dass Du Dir die Zeit genommen hast. Das ein- und ausklappen funktioniert zwar sehr gut, aber es fehlt leider die durchlaufende Nummerierung. Siehe 1. Bild hier im Anhang.
Die Lösung sollte so ein Bild geben, wie ich es anfangs gepostet hatte, doch eben ohne diese doppelten Dreieckspfeile, die zwar funktionieren, aber doch verwirrend und unnötig sind. Siehe 2. Bild hier im Anhang.

Ich selber habe es nicht hinbekommen, wäre aber sehr dankbar um eine Lösung
Herzliche Grüße
Dietmar
 
Anhänge
  • fehlt durchlaufende nummerierung.jpg
    fehlt durchlaufende nummerierung.jpg
    22 KB · Aufrufe: 4
  • doppelten pfele sollten weg.jpg
    doppelten pfele sollten weg.jpg
    24,9 KB · Aufrufe: 4
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #10
D
Dietmar Leo
Member
Beiträge
7
Punkte Reaktionen
0
1705899797596.png
wie oben, jedoch alle eingeklappt
 
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #11
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
  • Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt Beitrag #13
D
Dietmar Leo
Member
Beiträge
7
Punkte Reaktionen
0
Guten Tag Andreas
DAS ist die Lösung! Ganz herzlichen Dank, Du hast mir eine große Freude gemacht! Denn ich habe in der Zwischenzeit selbst auch recherchiert, aber nichts Brauchbares gefunden. Die einzige Antwort, die mir Google gestern ausspuckte, war meine eigene Frage hier im Forum, vom vergangenen Sonntag :cool:

Herzliche Grüße aus Leonberg
Dietmar
 
Thema:

Accordion und Nummerierung - Dreiecke vor jeder Ebene doppelt

Oben Unten