Inhaltsverzeichnis Sidebar

  • Hi Leute,

    hoffe jemand von Euch hat grad etwas Zeit und kann mir bei meinem Problem helfen. Ich bin derzeit dabei für meine Unterseiten einen TOC in der Sidebar zu erstellen, vom html her sollte das soweit passen denk ich, leider bin ich wenn es um CSS geht noch unbegabter als mit html und bekomme es einfach nicht hin das Inhaltsverzeichnis so zu gestalten wie ich es mir wünsche. Hier nochmal kurz mein html-code und im Anhang einmal wie mein TOC derzeit aussieht und wie er eigentlich aussehen sollte. :D

    Würde mich ungemein freuen wenn jemand von Euch mir helfen kann, ansonsten werd ich mich da wohl selbst durchboxen müssen :)


    <aside>
    <div class="toc_container">
    <p class="toc_title">Inhaltsverzeichnis</p>
    <ol>
    <li><a class="toc_element" href="#kurzer-ueberblick">Kurzer Überblick</a></li>
    <li class="toc_element"><a href="#trimmtischarten">Trimmtischarten</a></li>
    <li class="toc_element"><a href="#klappbarer_trimmtisch">Klappbarer Trimmtisch</a></li>
    <li class="toc_element"><a href="#trimmtisch_mit_rollen">Trimmtisch mit Rollen</a></li>
    <li class="toc_element"><a href="#groeße">Größe</a></li>
    <li class="toc_element"><a href="#materialien">Materialien</a></li>
    <li class="toc_element"><a href="#trimmgalgen">Trimmgalgen</a></li>
    <li class="toc_element"><a href="#pros_and_cons">Vor- und Nachteile</a></li>
    <li class="toc_element"><a href="#trimmtische_im_test">Trimmtische im Test</a></li>
    </ol>
    </div>
    </aside>


    P.S. Die Überschriften aus dem TOC sind schon mit den Paragraph Überschriften verlinkt, geht nur noch ums CSS-Design.


    Viele Grüße

  • Stimmt wäre gut gewesen wenn ich auch die css mit reingeschrieben hätte :D
    Also mein Css dafür sieht zurzeit so aus:

    .toc_container {
    float: right;
    line-height: 2.5;
    display: block;
    }


    .toc_title {
    font-weight: 700;
    text-align: center;
    padding-top: 10px;
    background-color: #6ddba5;
    color: #ffffff;

    }

    Weiss nur nicht ob die Css hier wirklich Sinn macht, habe auch von der Seite von der ich mich für die Sidebar inspirieren lassen hab versucht die Css zu übernehmen, nur leider greifen die Befehle bei mir nicht so.

    Bsp.-Seite: https://vergleich.bild.de/akku-rasenmaeher-test/

    Mir hilft hier auch schon jeder kleine Tipp, also ich verlange wirklich nicht das ich die ganze css bekomme und selbst nichts tun brauche, außer jemand hat lust dazu. :D