Verschachtelte Liste mit Aufzählung (1.1.1 ...) mit css formatieren

Schorsch92

Ich hoffe jemand kann mir hier helfen.
Ich arbeite gerade an einer kleinen Homepage für einen Verein und da soll auch eine Verschachtelte Aufzählung drauf (u.a. für die Satzung).
Das Heist es gibt eine Aufzählung mit bis zu drei Ebenen und zusätzlich noch einige Punkte die mit Kleinbuchstaben durchnummeriert sind.
Das Sieht dann z.B. So Aus:
1. Punkt 1
1.1 Erster Unterpunkt von Punkt 1
a. Hier gibt es zwei Punkte a
b. Und B
1.2 Zweiter Unterpunkt von Punkt 1
1.2.1 Unterpunkt in der dritten Ebene
1.2.2 ...
Inzwischen habe ich zwar eine Lösung gefunden wie das ganze per CSS umsetzbar ist: http://blog.matthaa.de/css-ordered-li…t-nummerierung/
Aber mit dem Ergebnis bin ich nicht ganz zufrieden da der Text wenn er bei einem Punkt über zwei Zeilen geht mit den Aufzählungzeichen beginnt (entspricht

HTML

list-style-position:inside;

ich hätte gerne eine Lösung welche

HTML

list-style-position:outside;

entspricht) was daran liegt das die HTML eigenen Aufzählungszeichen ausgeblendet werden und eigene Nummerierungen als Content definiert erzeugt werden. Gibt es eine Möglichkeit den eigentlichen Content Text z.B. in eine Box zu machen die bei der Zweiten Zeile direkt unter der ersten beginnt?

Hier einmal mein Beispielcode wie ich es derzeit gelöst habe: http://downloads.gonline.at/html/liste_verschachtelt.html

MrMurphy

Hallo,

so ganz habe ich dein Problem leider nicht verstanden.

Grundsätzlich würde ich für dein Problem keine Listen verwenden, sondern für 3 Ebenen die Elemente h4 bis h6. Dadurch wird meiner Ansicht nach der Quelltext deutlich übersichtlicher, auch wenn HTML-/CSS-Puristen bleich werden. Soweit ich gelesen habe ist die Lösung mit den Überschriften aber semantisch auch korrekt.

Ob und wie das mit den Buchstaben funktioniert weiß ich leider nicht.

Die farbigen Hintergründe habe ich eingefügt, damit besser sichtbar ist wo ein Absatz anfängt und endet.

Ich selbst würde die folgende Lösung bevorzugen. Die ist meiner Ansicht nach am übersichtlichsten und man kann zu den einzelnen Überschriften noch problemlos Absätze hinzufügen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Liste mit Unterpunkten 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         counter-reset: ebene1;
      }
      body :nth-child(2n+1) {
         background-color: papayawhip;
      }
      body :nth-child(2n+2) {
         background-color: silver;
      }
      h4,
      h5,
      h6,
      p {
         font-size: 1.3rem;
         padding: 0;
         margin: 0;
         margin-bottom: 0.5rem;
      }
      h4 {
         counter-reset: ebene2;
         margin-left: 4rem;
      }
      h4:before {
         content: counter(ebene1) " ";
         counter-increment: ebene1;
         margin-right: 2.5rem;
         margin-left: -3.5rem;
      }
      h5 {
         counter-reset: ebene3;
         margin-left: 4rem;
      }
      h5:before {
         content: counter(ebene1) "." counter(ebene2) " ";
         counter-increment: ebene2;
         margin-right: 1.5rem;
         margin-left: -3.5rem;
      }
      h6 {
         margin-left: 4rem;
      }
      h6:before {
         content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
         counter-increment: ebene3;
         margin-right: 0.5rem;
         margin-left: -3.5rem;
      }
      p {
         font-weight: bold;
         margin-left: 4rem;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <h4>Pediram-me que escrevesse um "Blindtext". Em português seria algo como o texto para cegos ou texto cego. No Brasil também chamado de Nononono (eu sempre me pergunto se tanta energia negativa não acaba influenciando o cliente).</h4>
   <h5>Deze tekst is voor spek-en-bonen, is nep, malafide, onecht, artificiëel, geïmiteerd, illusionair, suggestief, kunstmatig, misleidend, een prothese. Er wordt geen open kaart gespeeld, er wordt gesjoemeld</h5>
   <p>Ein Holzschuhmacher und ein Bogenschütze mit Brot- beziehungsweise Wassersack durchschritten eine Saccharose-Pfütze. Zwar war sie gottlos, aber zäh wie Lack. Der Schütze sprach: "Wir müssen sie entwässern. Nur so wird sie zu gutem Scheuersand.</p>
   <p>Jedoch kann ich sie schwerlich trockenbessern. Mein Sack enthält den falschen Gegenstand." Der Holzschuhmacher sprach: "Oh, ich vermute, du willst mein sittsam frommes Beutelbrot - auf dass es zuckernd sich zu Tode blute und selbstvergessen stirbt den Opfertod."</p>
   <h6>"Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm.</h6>
   <p>Der ärgste Tempelräuber ist gerechter. Mein Brot, verdammt, ist heilig. Und kein Schwamm!" So zogen sie denn lauthals schreiend weiter, teils sakrosankt, teils niedersäbelnd schroff. Noch heute singen sie dem Anstaltsleiter das Lied vom Pfützlein mit dem Zuckerstoff.</p>
   <h6>Als eines Tages im Internet neben allen Highway-Junkies auch alle Chinesen vernetzt waren, kam Pab Li Shing aus Win Link Shou auf die Idee, dem Chaos ein Ende zu bereiten und für immer steinreich zu werden.</h6>
   <h5>Da er wie alle Kreativen nichts für sich behalten konnte, teilte er seine vermeintliche Erleuchtung sogleich seinem Meister On Lein Lin mit: "Stellen Sie sich vor, verehrter Meister, dass ich eine CD-ROM auf den Markt werfen werde, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen. Des weiteren werde ich eine CD-ROM anbieten, auf der alle CD-ROMs verzeichnet sind, die keine CD-ROMs verzeichnen. Das wäre doch für die Welt und für mich ein übersichtlicher Gewinn."</h5>
</body>
</html>

Alles anzeigen

Du suchst aber wohl eher nach der folgenden Lösung. Dabei habe ich aber keine Möglichkeit gefunden zusätzliche Absätze mit den passenden Abständen hinzuzufügen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Liste mit Unterpunkten 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         counter-reset: ebene1;
      }
      body :nth-child(2n+1) {
         background-color: papayawhip;
      }
      body :nth-child(2n+2) {
         background-color: silver;
      }
      h4,
      h5,
      h6,
      p {
         font-size: 1.3rem;
         padding: 0;
         margin: 0;
         margin-bottom: 0.5rem;
      }
      h4 {
         counter-reset: ebene2;
         margin-left: 4rem;
      }
      h4:before {
         content: counter(ebene1) " ";
         counter-increment: ebene1;
         margin-right: 2.5rem;
         margin-left: -3.5rem;
      }
      h5 {
         counter-reset: ebene3;
         margin-left: 8rem;
      }
      h5:before {
         content: counter(ebene1) "." counter(ebene2) " ";
         counter-increment: ebene2;
         margin-right: 1.5rem;
         margin-left: -3.5rem;
      }
      h6 {
         margin-left: 12rem;
      }
      h6:before {
         content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
         counter-increment: ebene3;
         margin-right: 0.5rem;
         margin-left: -3.5rem;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <h4>Pediram-me que escrevesse um "Blindtext". Em português seria algo como o texto para cegos ou texto cego. No Brasil também chamado de Nononono (eu sempre me pergunto se tanta energia negativa não acaba influenciando o cliente).</h4>
   <h5>Deze tekst is voor spek-en-bonen, is nep, malafide, onecht, artificiëel, geïmiteerd, illusionair, suggestief, kunstmatig, misleidend, een prothese. Er wordt geen open kaart gespeeld, er wordt gesjoemeld</h5>
   <h6>"Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm.</h6>
   <h6>Als eines Tages im Internet neben allen Highway-Junkies auch alle Chinesen vernetzt waren, kam Pab Li Shing aus Win Link Shou auf die Idee, dem Chaos ein Ende zu bereiten und für immer steinreich zu werden.</h6>
   <h5>Da er wie alle Kreativen nichts für sich behalten konnte, teilte er seine vermeintliche Erleuchtung sogleich seinem Meister On Lein Lin mit: "Stellen Sie sich vor, verehrter Meister, dass ich eine CD-ROM auf den Markt werfen werde, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen. Des weiteren werde ich eine CD-ROM anbieten, auf der alle CD-ROMs verzeichnet sind, die keine CD-ROMs verzeichnen. Das wäre doch für die Welt und für mich ein übersichtlicher Gewinn."</h5>
   <h4>Pediram-me que escrevesse um "Blindtext". Em português seria algo como o texto para cegos ou texto cego. No Brasil também chamado de Nononono (eu sempre me pergunto se tanta energia negativa não acaba influenciando o cliente).</h4>
   <h5>Deze tekst is voor spek-en-bonen, is nep, malafide, onecht, artificiëel, geïmiteerd, illusionair, suggestief, kunstmatig, misleidend, een prothese. Er wordt geen open kaart gespeeld, er wordt gesjoemeld</h5>
   <h6>"Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm.</h6>
   <h6>Als eines Tages im Internet neben allen Highway-Junkies auch alle Chinesen vernetzt waren, kam Pab Li Shing aus Win Link Shou auf die Idee, dem Chaos ein Ende zu bereiten und für immer steinreich zu werden.</h6>
   <h5>Da er wie alle Kreativen nichts für sich behalten konnte, teilte er seine vermeintliche Erleuchtung sogleich seinem Meister On Lein Lin mit: "Stellen Sie sich vor, verehrter Meister, dass ich eine CD-ROM auf den Markt werfen werde, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen. Des weiteren werde ich eine CD-ROM anbieten, auf der alle CD-ROMs verzeichnet sind, die keine CD-ROMs verzeichnen. Das wäre doch für die Welt und für mich ein übersichtlicher Gewinn."</h5>
   <h5>Allein für mich würden Deine Dienste nicht von Nutzen sein, da die entscheidende Frage unbeantwortet im Cyberspace stehenbleibt: Welche der beiden CD-ROMs wird die CD-ROM verzeichnen, die alle CD-ROMs verzeichnet, die keine CD-ROMs verzeichnen? Auf der CD-ROM, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen, kann und darf sie ja nicht verzeichnet sein.</h5>
</body>
</html>

Alles anzeigen

Die margin kannst du natürlich auch entsprechend auf deine verschachtelten Listen anwenden.

Vielleicht hilft dir das ja weiter.

Gruss

MrMurphy

Tags