0

I have a list in a list in a list in a list. It is set up like this:

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

---> Here goes content

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

I want to achieve a look, where every list-element is in the same position. They shouldn't be shifted like it is the standard. -> Everything should be the same distance from the left (but it is NOT an issue for margin-left. This is set to "0" already)

Pictures make it clearer maybe. This is what I get: https://www.dropbox.com/s/jb44nscm3ofn3ln/list-in-list-problem.png?dl=0

This is what I want to get: https://www.dropbox.com/s/jo3foli7muzvgqj/list-in-list-solution.png?dl=0

This is the HTML-Code so far:

<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Page Title</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <link rel="stylesheet" href="style.css" type='text/css'>
 <!--       <script type="text/javascript" src="action.js"></script> -->
        <script type="text/javascript" src="visibility.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="test-nojquery.js"></script>

    </head>
    <body>
        <div class="header">
            <img src="images/wave_testimage.jpg" alt="demo_image" />
        </div>

        <div class="content">


        <h1>Linkliste zu den im Buch verwendeten Musikbeispielen</h1>
        <p>In dieser Liste sind zu jedem im Buch verwendeten Musikbeispiel der Kapitel 3–6 ein oder mehrere YouTube-Links angegeben, damit Sie sich schnell orientieren können.</p>
        <p>Eine Garantie für die dauerhafte Verfügbarkeit der Verlinkungen kann nicht übernommen werden. Sollte einer der Links nicht mehr aktuell sein, empfiehlt es sich, mithilfe der Stichwörter von Titel und Komponist nach Alternativen zu suchen.</p>
        <ol>
            <li class="list-h1" id="showhide-button">Rezeption in Verbindung mit Produktion
                <ol>
                <div id=data><li class="list-h2">Eine Parakomposition erfinden
                        <p class="inside-parakomp-title"><authorname>Emil Waldteufel</authorname>: <songname>Die Schlittschuhläufer</songname><book-page>20</book-page></p>
                        <p><description>Das <interpret>Johann-Strauss-Orchester Wiebaden</interpret> unter der Leitung von Herbert Siebert hat eine Fassung von knapp 5 Minuten eingespielt, die wegen dieser Kürze für die Grundschule geeignet ist.</description></p>
                        <span class="inside-parakomp-box">
                    https://youtu.be/bvjHWR8K04o<br><link-checked>2019-03-04</link-checked>
                        </span>
                </li></div>
                <div id=data><li class="list-h2">Eine Parakomposition erfinden</li></div>
                <div id=data><li class="list-h2">Eine Parakomposition erfinden</li></div></ol></li>
            <li class="list-h1">Rezeption in Verbindung mit Produktion
                <ol>
                <li class="list-h2">Eine Parakomposition erfinden</li>
                <li class="list-h2">Eine Parakomposition erfinden</li>
                <li class="list-h2">Eine Parakomposition erfinden</li></ol></li>
            <li class="list-h1">Rezeption in Verbindung mit Produktion
                <ol>
                <li class="list-h2">Eine Parakomposition erfinden</li>
                <li class="list-h2">Eine Parakomposition erfinden</li>
                <li class="list-h2">Eine Parakomposition erfinden</li></ol></li>                
        </ol>
        </div>


    </body>
</html>

This is the CSS concerning the list-items:

ol {
    counter-reset: item;
}

li {
    display: block;
    display: inline-block;


}

li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}

I get no error-messages, I just don't get what I want.

micha_nerd
  • 45
  • 8

1 Answers1

1

You need to override <ol> default style. set paading:0; to <ol>

ol {
  counter-reset: item;
  padding: 0;
}

li {
  display: block;
  display: inline-block;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}
<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Page Title</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <link rel="stylesheet" href="style.css" type='text/css'>
  <!--       <script type="text/javascript" src="action.js"></script> -->
  <script type="text/javascript" src="visibility.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="test-nojquery.js"></script>

</head>

<body>
  <div class="header">
    <img src="images/wave_testimage.jpg" alt="demo_image" />
  </div>

  <div class="content">


    <h1>Linkliste zu den im Buch verwendeten Musikbeispielen</h1>
    <p>In dieser Liste sind zu jedem im Buch verwendeten Musikbeispiel der Kapitel 3–6 ein oder mehrere YouTube-Links angegeben, damit Sie sich schnell orientieren können.</p>
    <p>Eine Garantie für die dauerhafte Verfügbarkeit der Verlinkungen kann nicht übernommen werden. Sollte einer der Links nicht mehr aktuell sein, empfiehlt es sich, mithilfe der Stichwörter von Titel und Komponist nach Alternativen zu suchen.</p>
    <ol>
      <li class="list-h1" id="showhide-button">Rezeption in Verbindung mit Produktion
        <ol>
          <div id=data>
            <li class="list-h2">Eine Parakomposition erfinden
              <p class="inside-parakomp-title">
                <authorname>Emil Waldteufel</authorname>:
                <songname>Die Schlittschuhläufer</songname>
                <book-page>20</book-page>
              </p>
              <p>
                <description>Das
                  <interpret>Johann-Strauss-Orchester Wiebaden</interpret> unter der Leitung von Herbert Siebert hat eine Fassung von knapp 5 Minuten eingespielt, die wegen dieser Kürze für die Grundschule geeignet ist.</description>
              </p>
              <span class="inside-parakomp-box">
                    https://youtu.be/bvjHWR8K04o<br><link-checked>2019-03-04</link-checked>
                        </span>
            </li>
          </div>
          <div id=data>
            <li class="list-h2">Eine Parakomposition erfinden</li>
          </div>
          <div id=data>
            <li class="list-h2">Eine Parakomposition erfinden</li>
          </div>
        </ol>
      </li>
      <li class="list-h1">Rezeption in Verbindung mit Produktion
        <ol>
          <li class="list-h2">Eine Parakomposition erfinden</li>
          <li class="list-h2">Eine Parakomposition erfinden</li>
          <li class="list-h2">Eine Parakomposition erfinden</li>
        </ol>
      </li>
      <li class="list-h1">Rezeption in Verbindung mit Produktion
        <ol>
          <li class="list-h2">Eine Parakomposition erfinden</li>
          <li class="list-h2">Eine Parakomposition erfinden</li>
          <li class="list-h2">Eine Parakomposition erfinden</li>
        </ol>
      </li>
    </ol>
  </div>


</body>

</html>
Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37
  • Thanks alot man. I searched for days and it's one line of code! :-D – micha_nerd Jul 24 '19 at 09:11
  • @micha_nerd Most welcome :) please accept this answer if it worked for you :P – Vikas Jadhav Jul 24 '19 at 09:12
  • 1
    Yes I will. I have to wiat five minutes until I can approve it. Thanks for your effort – micha_nerd Jul 24 '19 at 09:13
  • 3
    "I searched for days..." - Learning to use your browsers built in developer tools would have saved you days of searching. Right click > Inspect Element > Look at the Styles tab to see what styles are effecting the element. – Turnip Jul 24 '19 at 09:17