Verschalchtelte nummerierte Listen einrücken?
Trali
- css
0 Tabellenkalk0 Trali0 Tabellenkalk0 Trali
0 MrMurphy
Hallo liebe Forum'ler,
ich suche nun schon seit Stunden nch einer Lösung und weiß einfach nicht wie ich das lösen kann. Ich möchte gerne eine verschachtelte LIste mit Nummerierung haben. Das klappt soweit auch sehr gut mit dem hier beschriebenen Trick: http://aktuell.de.selfhtml.org/artikel/css/nummerierung/. Nun möchte ich aber gerne, dass der Text unter 2a beispielsweise eingerückt ist . Dafür gibt es den Befehl list-style-position: outside - wenn ich den alerdings in meine Klasse integriere, funktioniert das nicht und ich weiß einfach nicht wieso :(. habe es auch versuchsweise in den html - Teil reingeschrieben, aber das hat auch nicht funktioniert. Wo genau ist mein Fehler bzw. wo muss ich das hineinschreiben?
<style type="text/css">
<!--
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,lower-alpha) ". ";
counter-increment:listenpunkt_ebene2;
list-style-position: outside;
}
-->
</style>
</head>
<body>
<ol class="ebene1">
<li>Allgemeines zu Pseudoformaten</li>
<li>Pseudoformate für Verweise
<ol class="ebene2">
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
<li>:visited</li>
<li>:hover</li>
<li>:active</li>
<li>:focus</li>
</ol>
</li>
<li>Pseudoformate für Absätze
<ol class="ebene2">
<li>:first-line</li>
<li>:first-letter</li>
<li>:first-child </li>
</ol>
</li>
<li>Pseudoformate für automatisch generierten Text
<ol class="ebene2">
<li>:before</li>
<li>:after</li>
</ol>
</li>
<li>Automatische Nummerierung</li>
</ol>
</body>
Würde mich sehr über Eure Hilfe freuen, da ich damit seit Stunden nicht weiterkomme:/.
Hallo
ol.ebene2 li:before {
list-style-position: outside;
}
willst du das li:before oder vielleicht doch nur das li beeinflussen?
Gruß
Kalk
Hallo
ol.ebene2 li:before {
list-style-position: outside;
}willst du das li:before oder vielleicht doch nur das li beeinflussen?
Gruß
Kalk
hallo Kalk,
wenn ich nur das li beeinfluss bekomme ich doch nicht die gewünschten Unterpunkte 1.1, 1.2 usw.,oder?
Gruß,
Trali
Hallo,
oder?
ich geb zu, so ganz begriffen hab ich nicht, was du eigentlich erreichen möchtest.
Hilft dir vielleicht
ol.ebene2 li{
text-indent: -3ex;
padding-left:2ex;
}
?
Gruß
Kalk
Hallo,
oder?
ich geb zu, so ganz begriffen hab ich nicht, was du eigentlich erreichen möchtest.
Hilft dir vielleicht
ol.ebene2 li{
text-indent: -3ex;
padding-left:2ex;
}
> ?
>
> Gruß
> Kalk
Hallo Kalk,
mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen. Eine automaische Nummerierung einer Liste mit Unternummern (wie in dem Beispiel<http://aktuell.de.selfhtml.org/artikel/css/nummerierung/beispiel.htm>). Aber ich möchte auch, dass der Text, wenn er über eine Zeile geht, nicht unter der Nummer weiterläuft, sondern da wo der Text anfängt, falls er länger ist.
Viele Grüße und lieben Dank für die Bemühungen, Trali
Hallo,
mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen.
Hast du es denn ausprobiert? Du kommst immer wieder mit Rückfragen, die du eigentlich selbst beantworten können musst.
Ist dein Problem jetzt die Nummerierung oder die Einrückung? Ich verstehs nicht. Es sind zwei unabhängige, gelöste Probleme. Oder ich habs immer noch nicht begriffen.
Gruß
Kalk
Hallo,
mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen.
Hast du es denn ausprobiert? Du kommst immer wieder mit Rückfragen, die du eigentlich selbst beantworten können musst.
Ist dein Problem jetzt die Nummerierung oder die Einrückung? Ich verstehs nicht. Es sind zwei unabhängige, gelöste Probleme. Oder ich habs immer noch nicht begriffen.
Gruß
Kalk
Hallo Kalk,
ja, ich habe es ausprobiert. Und ich bekomme sowohl die Nummerierung hin als auch die Einrückung als einzelnes jeweils. Aber kombiniert bekomme ich es nicht hin :). Also dass ich sowohl diese Unternummerierung haben als auch die Einrückung. Vielleicht habe ich auch deinen Tipp nicht 100%ig verstanden :).
Viele Grüße,
Trali
Hallo,
mit deiner Lösung hätte ich auch kein 1.1 oder? Das möchte ich erreichen.
Hast du es denn ausprobiert? Du kommst immer wieder mit Rückfragen, die du eigentlich selbst beantworten können musst.
Ist dein Problem jetzt die Nummerierung oder die Einrückung? Ich verstehs nicht. Es sind zwei unabhängige, gelöste Probleme. Oder ich habs immer noch nicht begriffen.
Gruß
Kalk
Hi,
ich habe gerade noch mal mit deinem Lösungsansatz rumprobiert und: Es hat funktioniert! Vielen vielen Dank!! :) Verstehe nicht, was ich vorhin anders probiert habe. Sorry, für die Verwirrung :).
Hallo Trali,
das funktioniert so nicht.
list-style-position bezieht sich auf die "normalen" Aufzählungszeichen. Wobei "list-style-position: outside" die Vorgabe ist.
Mit "list-style-type: none" werden in deinem Beispiel die "normalen" Aufzählungszeichen jedoch ausgeblendet.
Über das Pseudo-Element :before werden dann zwar wieder Aufzählungszeichen eingefügt, die lassen sich aber nicht mit list-style-position beeinflussen. Das sind halt nicht die "normalen" und mit list-style-position beeinflussbaren Aufzählungszeichen.
Deshalb sollte man mit solchen CSS-Tricks immer vorsichtig sein.
Gruss
MrMurphy
Hallo Trali,
das funktioniert so nicht.
list-style-position bezieht sich auf die "normalen" Aufzählungszeichen. Wobei "list-style-position: outside" die Vorgabe ist.
Mit "list-style-type: none" werden in deinem Beispiel die "normalen" Aufzählungszeichen jedoch ausgeblendet.
Über das Pseudo-Element :before werden dann zwar wieder Aufzählungszeichen eingefügt, die lassen sich aber nicht mit list-style-position beeinflussen. Das sind halt nicht die "normalen" und mit list-style-position beeinflussbaren Aufzählungszeichen.
Deshalb sollte man mit solchen CSS-Tricks immer vorsichtig sein.
Gruss
MrMurphy
Hallo,
ok Danke. :) Gewunert hatte mich nur, dass ich mit dem Befehl "display" was bewirken kann. Gibt es denn eine Möglichkeit eine Liste zu erstellen, die sowohl auch nummerische Unterpunkte als auch eine Einzug hat, also ungefähr so:
1. blubb
1.1 Der gesamte Text fängt auf Höhe von blubb2 an
1.2 blubb3
2. blabb
Oder ist das gar nicht möglich?
@@Trali:
nuqneH
Gibt es denn eine Möglichkeit eine Liste zu erstellen, die sowohl auch nummerische Unterpunkte als auch eine Einzug hat, also ungefähr so:
- blubb
1.1 Der gesamte Text fängt auf Höhe von blubb2 an
1.2 blubb3- blabb
Oder ist das gar nicht möglich?
Klar ist es. Für untergeordnete Listen ``ol ol { padding-left: 1em }{:.language-css}
sollte helfen.
Qapla'
@@Trali:
nuqneH
Gibt es denn eine Möglichkeit eine Liste zu erstellen, die sowohl auch nummerische Unterpunkte als auch eine Einzug hat, also ungefähr so:
- blubb
1.1 Der gesamte Text fängt auf Höhe von blubb2 an
1.2 blubb3- blabb
Oder ist das gar nicht möglich?
Klar ist es. Für untergeordnete Listen ``ol ol { padding-left: 1em }
{:.language-css}
sollte helfen.Qapla'
Hallo Qapla,
aber mit der Lösung habe ich dann kein 1.1, sondern:
1. blubb
1. blubb
Oder verstehe ich deinen Ansatz falsch?
Om nah hoo pez nyeetz, Trali!
Nach ca. 10 Antworten sollte dir aufgefallen sein, dass Vollzitate hier unerwünscht sind. Außerdem hast du es jedesmal oberhalb des Buttons „Beitrag absenden“ gelesen.
Also: Bitte vermeide Vollzitate. Sie stören nur den Lesefluss. Zitiere nur das, worauf du dich in deiner Antwort konkret beziehst. Danke.
Matthias
@@Trali:
nuqneH
Hallo Qapla,
Und: Bitte vermeide es, mich mit „Qapla“ anzureden. Danke.
Qapla'
Tach!
Und: Bitte vermeide es, mich mit „Qapla“ anzureden. Danke.
Eine barrierefreie Grußformel hilft dem Zielpublikum, Verwirrungen zu vermeiden.
dedlfix.
@@dedlfix:
nuqneH
Eine barrierefreie Grußformel hilft dem Zielpublikum, Verwirrungen zu vermeiden.
Nicht mein Zielpublikum. ;-)
Und überhaupt ist es dazu nur gekommen, weil damals™ manche der Meinung waren, Postings ohne Grußformeln seien unhöflich; Postings mit automatisch generierten Grußformeln hingegen seien höflich. Keine Pointe.
Qapla'
Tach!
Und überhaupt ist es dazu nur gekommen, weil damals™ manche der Meinung waren, Postings ohne Grußformeln seien unhöflich; Postings mit automatisch generierten Grußformeln hingegen seien höflich. Keine Pointe.
Mir sind die im Prinzip auch egal, eine Grußformel bringt mir keinen Gewinn, aber sie wird von vielen erwartet. (Störend allerdings empfinde ich einleitendes Geschwafel, à la "Ich hab da mal eine Frage ...", das nur meine Zeit raubt.) Deswegen hab ich auch (nach anderen Versuchen) eine neutrale, die zu allen Stimmungslagen passt. Für diese hat mich noch keiner angeniest, scheint also ein brauchbarer Kompromiss zu sein.
dedlfix.
Hallo,
Hallo Qapla,
Und: Bitte vermeide es, mich mit „Qapla“ anzureden. Danke.
Qapla'
Nimm stattdessen „Qapla'“...
Gruß
Kalk