Table of Content - Inhaltsverzeichnis im Text (Textumfluss)

  • Hallöchen,


    ich freue mich sehr, dass es nun Inhaltsverzeichnisse auch im WSC möglich sind, leider gefällt mir nicht, dass das Inhaltsverzeichnis so viel Platz über dem Beitrag bekommt.
    Ist es möglich, dass es eher im Text drin ist also vom Text umflossen wird? Dies stand bei dem Plugin für das WCF zur Auswahl :/


    Würde mich freuen, wenn ich einfach die Option übersehen habe oder über Informationen um es selbst umzusetzen! :)

  • Zum Beispiel so:


    CSS
    1. .scToc {
    2. float: left;
    3. max-width: 30%;
    4. margin: 0 10px 10px 0 !important;
    5. }
  • Genial. Danach wollte ich auch schon fragen.... :D


    Bekomme ich den Abstand zwischen Inhaltsverzeichnisbox und Text noch etwas vergrößert und den Abstand innerhalb der Box zwischen oberer Kante und Inhaltsverzeichnis verkleinert?


    Inhaltsverzeichnis links ausgerichtet:



    Inhaltsverzeichnis rechts ausgerichtet:


    Ich brauche keine Signatur! :)

  • Der Abstand zwischen Box und Text beträgt 10px (siehe mein Code-Beispiel oben). Einfach ein wenig mit dem 3. Wert rumspielen.


    Der Abstand von Oben bis zur Überschrift lässt sich damit entfernen:


    CSS
    1. .scTocTitle > h2 { margin: 0 !important; }
  • Du bist der Beste! Hab schon etwas gespielt, aber ich ging nicht von den 10px aus sondern von der 0. :)

    Ich brauche keine Signatur! :)

  • Also das mit dem Abstand nach oben hin klappt.


    Aber ich bekomme es nicht hin, dass rechts oder links neben der Box etwas Platz gelassen wird und der Text nicht direkt neben der Box beginnt.


    Mein Code sieht jetzt zum Testen sogar so aus:


    CSS
    1. .scToc {
    2. float: left;
    3. max-width: 30%;
    4. margin: 0 80px 80px 0 !important;
    5. }

    Scheinbar wird die komplette Margin-Zeile gar nicht genutzt. Untersuche ich die Seite, sieht das bei mir im Browser so aus:



    Warum ist diese komplette Zeile durchgestrichen?

    Ich brauche keine Signatur! :)

  • Versuchs mal mit:

    CSS
    1. div.scToc {
    2. margin: 0 10px 2em 0 !important;
    3. }

    Brachte bei mir die gewünschte Änderung


    Ich lasse mir das Inhaltsverzeichnis zusätzlich mit

    CSS
    1. .scToc {
    2. float: right;
    3. }

    auf die rechte Seite verschieben, macht für mich optisch mehr her. Da doch der Text im Fokus steht und der toc nebensache ist.


    Hierfür nochmal einen riesen Dank an euch für die Umsetzung

  • Hmm, interesannt, bleibt die Frage wiso wir im Plugin selbst auf important zurückgegriffen haben...
    Denn das ist das eigentliche Problem: Das CSS des Plugins verwendet div.scToc als selector in Kombination mit important weshalb nur .scToc überschrieben wird^^

  • Nope, das war ich, soweit ich es aus git herraus lese war der CSS-Code zunächst nicht spezifisch genug und wurde daher vom standart Stil überschrieben, dann hab ich ihn "optimiert" und alle anderen Vorkommnisse von important gestrichen, außer diesem :P

  • Versuchs mal mit:

    CSS
    1. div.scToc {
    2. margin: 0 10px 2em 0 !important;
    3. }

    Brachte bei mir die gewünschte Änderung

    Habe jetzt deinen Code genommen und zusätzlich das Inhaltsverzeichnis rechts anzeigen lassen. Aber leider ist der Abstand zwischen dem Text links neben dem Inhaltsverzeichnis und dem Verzeichnis selbst noch immer zu klein.



    Und wenn ich die 10px auf 50px ändere, dann wandert das Verzeichnis weiter nach links. Der Abstand zum Text davor bleibt aber identisch. :(


    soweit ich es aus git herraus lese war der CSS-Code zunächst nicht spezifisch genug und wurde daher vom standart Stil überschrieben, dann hab ich ihn "optimiert" und alle anderen Vorkommnisse von important gestrichen, außer diesem

    Wird es dazu noch ein Update geben @Morik, damit der CSS-Code funktioniert?

    Ich brauche keine Signatur! :)

  • Habe jetzt deinen Code genommen und zusätzlich das Inhaltsverzeichnis rechts anzeigen lassen. Aber leider ist der Abstand zwischen dem Text links neben dem Inhaltsverzeichnis und dem Verzeichnis selbst noch immer zu klein.


    Und wenn ich die 10px auf 50px ändere, dann wandert das Verzeichnis weiter nach links. Der Abstand zum Text davor bleibt aber identisch. :(

    Der Code war noch für die Anzeige auf der linken Seite.
    Änder ihn so:

    Code
    1. div.scToc {
    2. margin: 0 10px 2em 10px !important;
    3. }


    Die Reihenfolge im Code bei "margin:" ist immer Oben Rechts Unten Links, <-- wenn du 4 Angaben machst


    Habe auch noch eine kleine Frage, wenn man im Verzeichnis auf einen Punkt klickt, wird man zum Content des Punktes geleitet, bekommt aber den Punkt selber nicht mehr angezeigt. Gibt es die Möglichkeit das etwas zu verschieben sodass ich auch die Überschrift des Abschnittes habe?

  • Davon ab, der Code funktioniert sobald du statt .scToc einfach div.scToc verwendest...

    Die Reihenfolge im Code bei "margin:" ist immer Oben Rechts Unten Links, <-- wenn du 4 Angaben machst

    Ah, jetzt habe ich durch Rumprobieren folgende Werte gewählt.

    CSS
    1. div.scToc {
    2. float: right;
    3. max-width: 30%;
    4. margin: 0 30px 30px 30px !important;
    5. }

    So passt das jetzt bei mir ganz gut, finde ich. :)


    Danke euch!!

    Ich brauche keine Signatur! :)

  • Ah, jetzt habe ich durch Rumprobieren folgende Werte gewählt.

    CSS
    1. div.scToc {
    2. float: right;
    3. max-width: 30%;
    4. margin: 0 30px 30px 30px !important;
    5. }

    So passt das jetzt bei mir ganz gut, finde ich. :)


    Danke euch!!

    Ich hab dem Code noch folgendes hinzugefügt:

    CSS
    1. min-width: 20%;

    Sollte es vorkommen das die Überschriften aus was für einem Grund äußerst kurz sind, steht dem Verzeichnis diese schmale Box überhaupt nicht. Deshalb das min-width.
    Kannst du ja mal bei dir testen ;-)

  • Sollte es vorkommen das die Überschriften aus was für einem Grund äußerst kurz sind, steht dem Verzeichnis diese schmale Box überhaupt nicht. Deshalb das min-width.

    Werde ich direkt testen und ggf. übernehmen. Vielen Dank dafür! :)

    Ich brauche keine Signatur! :)

  • Habe auch noch eine kleine Frage, wenn man im Verzeichnis auf einen Punkt klickt, wird man zum Content des Punktes geleitet, bekommt aber den Punkt selber nicht mehr angezeigt. Gibt es die Möglichkeit das etwas zu verschieben sodass ich auch die Überschrift des Abschnittes habe?

    @Morik & @SoftCreatR hättet ihr dafür vielleicht eine idee?