Aufzählungen ol und ul mit Nummerierungen

  • Ich bin gerade dabei ein Inhaltsverzeichnis zu erstellen, bei denen die obere Ebene eine ganze Zahl beinhalten soll und die zweite Ebene durch Übernahme der ersten Ebene mit übernommen werden soll.

    In der Liste tauchen aber auch ul-Tags auf, bei denen nur der Punkt dargestellt werden soll und nicht weiter gezählt werden soll.


    Kann mir jemand sagen, wie man das mit CSS genau macht.


    Liebe Grüße und vielen Dank im Voraus


    <!DOCTYPE html>

    <html>


    <head>

    <title>Titel</title>


    <meta charset="UTF-8">

    <meta name="description" content="">

    <meta name="author" content="">

    <meta name="keywords" content="">

    <meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)">


    <link href="style.css" type="text/css" rel="stylesheet">

    <style>

    ul { list-style-type: disc; color: black; font-weight: normal; }

    ol { list-style-type: decimal; color: black; font-weight: bold; }

    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;}

    ul.ohne {counter-reset:listenpunkt_ebene3; list-style-type: disc; color: black; font-weight: normal; }

    ul.ohne li:before {list-style-type: disc; color: black; font-weight: normal; }

    </style>

    </head>


    <body>

    <h1>Presseorganisation</h1>

    <ul>

    <li>Organigramm</li>

    <li>Verfahrensanweisungen</li>

    <li>Arbeitsanweisungen</li>

    <li>Formulare</li>

    </ul>

    <ol class="ebene1">

    <li> F&uuml;hren und organisieren</li>

    <ol class="ebene2">

    <li>Unternehmensziele</li>

    <ul class="ohne">

    <li>Unsere Unternehmensziele</li>

    <li>Bekanntmachung der Unternehmensziele</li>

    </ul>

    <li>Aufgaben, Verantwortung, Anweisungen</li>

    <ul>

    <li>Pflichtenermittlung</li>

    <li>&Uuml;bertragung von Unternehmerpflichten</li>

    <li>Verantwortlichkeiten in unserem Betrieb</li>

    <li>Erlaubnisscheine f&uuml;r spezielle Arbeiten</li>

    </ul>

    <li>Personaleinsatz</li>

    <ul>

    <li>Spezielle Qualifikationsnachweise</li>

    <li>Besch&auml;ftigungsbeschr&auml;nkungen</li>

    <li>Checkliste &bdquo;Beauftragung von Zeitarbeitskr&auml;ften&ldquo;</li>

    </ul>

    </ol>

    <li>Arbeitsbedingungen beurteilen und Ma&szlig;nahmen festlegen</li>

    <ol class="ebene2">

    <li>Beurteilungen der Arbeitsbedingungen</li>

    <ul>

    <li>Alle durchgef&uuml;hrten Beurteilungen der Arbeitsbedingungen</li>

    <li>Checkliste &bdquo;B&uuml;roarbeitspl&auml;tze&ldquo;</li>

    <li>Checkliste &bdquo;Bildschirmdarstellung&ldquo;</li>

    </ul>

    </ol>

    <li>Planen und Beschaffen</li>

    <ol class="ebene2">

    <li>Konzepte f&uuml;r Arbeitsgestaltung</li>

    <ul>

    <li>Planungshilfe &bdquo;Arbeitsvorbereitung f&uuml;r die einzelnen Projekte/Arbeitsaufgaben&ldquo;</li>

    </ul>

    <li>Beschaffung von g&uuml;tern und Dienstleistungen</li>

    <ul>

    <li>Planungshilfe &bdquo;Einkauf von Produkten&ldquo;</li>

    <li>Ausgef&uuml;llte Checklisten &uuml;ber Qualit&auml;t der vorhandenen Lieferanten</li>

    </ul>


    </ol>

    <li>Besch&auml;ftigte informieren und Beteiligen</li>

    <ol class="ebene2">

    <li>Information der Besch&auml;ftigten</li>

    <ul>

    <li>Infoblatt &bdquo;Gesund arbeiten im B&uuml;ro&ldquo;</li>

    <li>Dokumentierte Unterweisungen</li>

    </ul>

    <li>Kommunikationswege</li>

    <ul>

    <li>Selbstverpflichtung Kommunikationskultur</li>

    </ul>

    <li>Beteiligung der Besch&auml;ftigten</li>

    <ul>

    <li>Vorschl&auml;ge &bdquo;Ich schlage vor&ldquo;</li>

    <li>Anweisung zur Beteiligung der Beschäftigten auch an Prozessen der Verbesserung von Sicherheit und Gesundheit</li>

    </ul>

    <li>Aus- und Fortbildung</li>

    </ol>



    </ol>


    </body>

    </html>

  • hier einfach mal eine Lösung vorerst:

    https://www.html-seminar.de/ol…eiterter-nummerierung.htm


    Die Lösung macht noch mehr als du brauchst - die fortlaufenden Nummerierungen werden dadurch super sauber untereinander dargestellt. In den kommenden Tagen auch noch die Schritt für Schritt Anleitung auf der oben genannten Seite - aber so solltest du auch schon damit zurecht kommen.


    Das Paragrafenzeichen als Grafik bei der ersten Ebene ist nur ein Beispiel ... kannst du auch einfach im Code weglassen :)


    Und willst du in einer Ebene nur Aufzählungspunkte, dann bei dem Beispielcode einfach wie im folgenden Beispiel ul anstelle von ol verwenden wie beim Punkt "Pilze":


  • Super Danke Mr Murphy,

    Ich habe gerade erst mit CSS angefangen. Könntest Du mir erklären, was die Zeile genau macht.

    Steuere ich damit den li Tag vom ol unabhängig vom ul-Tag, da das größer Zeichen die Verknüpfung von ol auf li überträgt, aber eben nur auf die Klasse ebene1 und ebene2?


    Liebe Grüße


    Dirk

  • Hallo


    Das ist ein komplexes Thema, welches sich nicht als Beitrag in einem Forum abhandeln lässt.


    Bei einer Leerstelle, dem Pfeil nach rechts, aber auch dem Pluszeichen und der Tilde handelt es sich um Selektoren. Und zwar in dem Unterthema Familienselektoren oder auch Kombinatoren. Das sind zwei Bezeichnungen für die gleiche Sache.


    Code
    ul li {...


    Mit dem Leerzeichen werden alle genannten Elemente (hier li) angesprochen, die in einer beliebigen Ebene nach dem ersten Element (hier ul) folgen. Auch unabhängig davon, ob sich weitere Elemente (im folgenden Beispiel ol) dazwischen befinden. Also beide li-Elemente im folgenden Beispiel:


    Code
    <ul>
       <li>
          <ol>
             <li> ...

    Mit dem Größer-Zeichen (Pfeil nach rechts) werden nur Elemente in der direkt folgenden Ebene angesprochen, in meinem Beispiel also nur das erste li-Element.


    Code
    ul>li {...


    Gruss


    MrMurphy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!