Verschachtelte Listen mit Nummerierung

gabischatz · #1 (**permalink**) 05.01.2014, 18:03

Verschachtelte Listen mit Nummerierung wie richtig?
Validation Output: 1 Error

[Valid] Markup Validation of http://gabischatz.bplaced.net/scriptly/hilfe/installation/ - W3C Markup Validator

Line 253, Column 19: Element ol not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)
<ol class="ebene2">

Line 253, Column 19: Element ol not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Line 253, Column 19: Element ul not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)

HTML-Code:

<style>
ol.ebene1 {
	counter-reset:listenpunkt_ebene1;
	list-style-type:none;
}
ol.ebene1 li:before {
	content: counter(listenpunkt_ebene1) ". ";
	counter-increment:listenpunkt_ebene1;
}
ol.ebene2 {
	counter-reset:listenpunkt_ebene2;
	list-style-type:none;
}
ol.ebene2 li:before {
	content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2,decimal) ". ";
	counter-increment:listenpunkt_ebene2;
}
</style>
<ol class="ebene1">
	<li>Ebene 1
		<ol class="ebene2">
		   <li>Unterpunkt 1</li>
		   <li>Unterpunkt 2</li>
		   <li>Unterpunkt 3</li>
		   <li>Unterpunkt 4</li>
		   <li>Unterpunkt 5</li>
		</ol>
	</li>
	<li>Ebene 2
		<ol class="ebene2">
		   <li>Unterpunkt 1</li>
		   <li>Unterpunkt 2</li>
		   <li>Unterpunkt 3</li>
		</ol>
	</li>
	<li>Ebene 3
		<ol class="ebene2">
		   <li>Unterpunkt 1</li>
		   <li>Unterpunkt 2</li>
		</ol>
	</li>
</ol>

Und wie bekomme ich die Nummerierung wieder so vor den Text?

4. Update-Version

Grüße

fricca · #2 (**permalink**) 05.01.2014, 18:15

Ich verstehe nicht, worüber du reden willst.
Warum du einen HTML-Fehler hast? Weil ein ol-Element nicht Kind eines anderen ol-Elements sein darf.

Zitat:

Und wie bekomme ich die Nummerierung wieder so vor den Text?

Definiere "so".

Bitte denk immer daran, dass niemand hier weiß, was du eigentlich erreichen willst.

gabischatz · #3 (**permalink**) 05.01.2014, 18:39

Zitat:

Zitat von fricca

Ich verstehe nicht, worüber du reden willst.
Warum du einen HTML-Fehler hast? Weil ein ol-Element nicht Kind eines anderen ol-Elements sein darf.

Das habe ich ja verstanden aber wie erstelle ich Nummerierte Listen die wiederum unter Nummern enthalten.
Egal wie ich es versuche ul in ol oder ol in ul usw. immer bekomme ich eine Fehlermeldung. wie du im oberen Post sehen kannst.

Im übrigen ist in Selfhtml genau so ein Beispiel abgebildet.
Und warum soll eine Nummerierte Liste nicht in einer Nummerierte Liste erstellt werden?

Den letzten Satz

Zitat:

Und wie bekomme ich die Nummerierung wieder so vor den Text?

4. Update-Version

kannst du streichen, bin selber darauf gekommen, display: inline; ins <h3>.

Grüße

fricca · #4 (**permalink**) 05.01.2014, 18:51

Zitat:

Zitat von gabischatz

Das habe ich ja verstanden aber wie erstelle ich Nummerierte Listen die wiederum unter Nummern enthalten.
Egal wie ich es versuche ul in ol oder ol in ul usw. immer bekomme ich eine Fehlermeldung. wie du im oberen Post sehen kannst.

Du musst ol in li setzen!
Das Kennzeichen einer verschachtelten Liste ist doch, dass die Liste der zweiten Ebene in einen Listenpunkt der ersten Ebene hineingeschachtelt ist.

Code:

<ol>
    <li>
        <ol>
            <li></li>
        </ol>
    </li>
</ol>

Das rot markierte Schlusstag sitzt bei dir vor dem zweiten ol. Deshalb ist es falsch.
Wenn du die li-Schlusstags weglässt, dann macht der Browser von selbst die richtige Struktur daraus.

gabischatz · #5 (**permalink**) 05.01.2014, 19:47

Danke jetzt klappt es.

protonenbeschleuniger · #6 (**permalink**) 05.01.2014, 20:00

Zitat:

Zitat von gabischatz

Den letzten Satz
kannst du streichen, bin selber darauf gekommen, display: inline; ins <h3>.

Welches h3? In deinem Code ist kein H3 Element.

gabischatz · #7 (**permalink**) 05.01.2014, 20:59

Scriptly: Installation | Bad Langensalza

HTML-Code:

  <ol class="ebene1">
        <li>
            <h3 id="Zip" style="display: inline;">ZIP-Version</h3>
            Die Compact-Version (ZIP) ist für die Installation auf
            einen USB-Stick geeignet und steht erfahrenen Nutzern zur

Thielo · #8 (**permalink**) 05.01.2014, 22:29

Ich habe das Gefühl, dass DU die einzige Person bist, die weiß worüber sie redet.
In keinem Post in diesem Thread wird das H3 erwähnt. Denken, dann posten.

gabischatz · #9 (**permalink**) 06.01.2014, 13:29

Ok Thielo, habe ich jetzt verstanden
Neues Problem:
ich möchte gern vor das Aufzählungszeichen ein kleines p

So soll es später aussehn:

Code:

p1.   x1 – Abstand der linken oben Ecke in Pixel von links
      y1 – Abstand der linken oben Ecke in Pixel von oben

und so sieht es jetzt aus:

Code:

1.  p
       x1 – Abstand der linken oben Ecke in Pixel von links
       y1 – Abstand der linken oben Ecke in Pixel von oben

das ist der Code bis jetzt un die Seite dazu Scriptly: Imagemap-Assistent | Bad Langensalza

HTML-Code:

<style type="text/css">

li.p:before {
content:"p";
color: #333;
}
</style>

<ol>
<li class="p">
<ul style="margin-left: -40px; display: inline;">
<li class="none"><strong>x1</strong> - Abstand der linken oben Ecke in Pixel von links</li>
<li class="none"><strong>y1</strong> - Abstand der linken oben Ecke in Pixel von oben</li>
</ul>

Mit freundlichen Grüßen

explanator · #10 (**permalink**) 06.01.2014, 14:26

Zitat:

ich möchte gern vor das Aufzählungszeichen ein kleines p

So soll es später aussehn:
Code:

Code:

p1.   x1 – Abstand der linken oben Ecke in Pixel von links
      y1 – Abstand der linken oben Ecke in Pixel von oben

und so sollte es funktionieren:

Code:

li.p:before {
    content: "p";
    color: rgb(51, 51, 51);
    margin-left: -2em;
}
ol {
    line-height: 1.5em;
}
ol li ul {
    margin-top: -1.5em;
}

HTML-Code:

<ol>
        <li class="p">
            <ul>
                <li class="none"><strong>x1</strong> - Abstand der linken oben Ecke in Pixel von links</li>
                <li class="none"><strong>y1</strong> - Abstand der linken oben Ecke in Pixel von oben</li>
            </ul>
        </li>
</ol>

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
Verschachtelte Listen nebeneinander	DiHo	CSS	2	07.07.2010 23:23
Verschachtelte Listen als	lomtas	CSS	6	03.02.2009 15:05
Hängung bei verschachtelten Listen mit Nummerierung im System "1.1.1"	AndreasB	CSS	2	05.11.2006 00:33
Verschachtelte Listen mit Grafik	e2e4	CSS	2	08.03.2006 07:55
verschachtelte Listen nicht Xhtml 1.0 Strict valide ??	leo21	(X)HTML	2	17.04.2005 18:22