Wegen Template-fremden JS-Tabs ist plötzlich die Schriftgröße überall zu klein, wie kann ich das korrigieren?

  • Um ein wirklich umfangreiches Werkverzeichnis überschaubar zu strukturieren wären die bei github gefundenen nested Tabs wirklich super.

    Nach einigem Probieren habe ich es irgendwie geschafft, die beiden JS Funktionen tatsächlich parallel zum Laufen zu bringen.

    siehe Tabs mit Menü und Parallax

    Allerdings bleibt noch ein kleines ehrlich gesagt sehr "kleines" Problem: die Schriften des Template-Layouts sind jetzt alle viel zu klein (wohl weil ich bei irgendeiner offenbar konflikt trächtigen Formatierungsverlinkung erstmal den Tabs den Vortritt gelassen habe zum die zum Laufen zu bringen.


    Wenn jetzt noch jemand sagen kann, was genau ich tun muss, dass alle template-Schriften wieder normalgroß sind also so wie hier,

    ohne, dass ich mir dadurch die Tabs wieder zerschieße, also wo ich die jetzt offenbar wirksamen Schriftgröße Daten korrigieren kann, dann wäre doch eigentlich alles ganz prima

  • Hey,


    gib mal allen <p>-Tags eine Klasse. Dann greifst du mittels CSS auf die Klasse zu und änderst die Schriftgröße.


    Beispiel:


    HTML
    <p class="text">Test</p>
    <p class="text">Test2</p>
    CSS
    .text{
        font-size: 1em;
    }



    Grüße,

    Stef

  • Den Text selbst hatte ich jetzt ehrlich gesagt noch nicht im Visier obwohl mir deine Idee da wahrscheinlich ziemlich gut weiterhilft, da ich dort zumindest zwischen den zwei in einander geschachtelten Tab Typen ungewollte Font-Größenunterschiede habe.


    Meiin erstes Prblem war erstmal das Menü und die Überschriften, die ja zumindest in etwa dem Layout der anderen Templateseiten entsprechen sollen deren css-Daten nicht durch den fremden Code der Tabs beeinträchtigt ist.

    Ich habe nun entnervt einfach jedes Menü-item und die beiden Überschriften im Parallax-Promoter ganz sturblöd mit eigenen font-tags zb. beim Menü size="2" beglückt und nun sieht das zumindest irgendwie ähnlich aus. Kurz mal eine so richtig stur schlampige Lösung.

    Schade ich hätte gedacht man käme vielleicht irgendwie der Ursache auf dei Spur warum die Menüitems und die Überschriften auf der Seite mit den fremden Tabs so geschrumpft sind, unddas was sie brauchen vielleicht einfach da richtig nachtragen, wo die nur auf dieser Seite (fälschlicherweise) ihre verzerrenden Layoutinfos herholen. Wie gesagt das ist von mir erstmal eher so mit aller Gewalt hingebogen als wirklich eine richtig Lösung. Da das mit den Menüitems und verschiedenen Überschriften ja auch ganz unterschiedliche Klassen betrifft, und das ganze nur auf einer einzigen html-Seite so sein muss, weil die andere ohne fremde Tabs keine Layoutprobleme haben, lässt mich etwas davor zurückschrecken das Problem in der CSS Datei anzugehen. Obwohl deine Lösung für die Textformatierung trotzdem hilfreich klingt, weil ich ja nur die p's auf der Problemseite gesondert definiere und dann per Css regele. na mal sehen. Dank Dir auf alle Fälle für den netten Tipp

  • Ich habe jetzt mal den Footer des Templates reinkopiert. Das ist eigentlich JS-mäßig unproblematisch eigenbtlich nu einige Listen Text Überschrift und ein Logo.

    Und... das Ergebnis

    (nichtwundern, dass das obere Menü und die Parallax Überschrift jetzt fast normal sind, die habe ich ja wie gesagt mit font-tags mehr oder weniger alle einzeln gezwungen)


    Einfach alles, aber wirklich alles im Footer ist kleiner als auf den anderen normallen Templateseiten. Und weil das so ist träme ich ehrlich gesagt immer noch davon dass es auch eine Möglichkeit geben sollte einfach alles für diese Seite mit den Tabs auch wieder um so viel größer z machen, wie es durcch das Skriptproblem jett kleiner gemcht wird.


    Vergleicht man diesen Micro-Fontsize Footer mit dem Footer in einer Tablosen Variante der Seite scheint mir deutlich zu werden, dass irgendwo ganz global die Größen insgesamt verändert sind und daher do hoffe ich zumindest auch ebenso global wieder zú korrigieren (also zu vergrößern sind)


    P.S.: Hi Stef. Dein Workaroundffür die viel zu kleinen Fonts in den untegeordneten Tabs funktioniert gut. Wie gesagt ein Lösung für ein Problem das mir zuerst noch gar nicht so aufgefallen war. Selbst wenn es für die Verkleinerung der anderen Template-elemente eine globale Lösung gäbe, sollten die Tabs davon ja überhaupt nicht tangiert sein, weil ich für deren Funktionieren ja die für des Template nötigen Links kappen musste. Insofern brauchte ich tatsächlich für die untergeordneten Tabs wohl genau so eine Lösung wie du es vorgeschlagen hast um die Schriftgrößen unterschiede da wett zu machen. Also das Problem hast du schon mal gelöst. Danke soweit schon einmal.


    Es bleibt wie gesagt nur die Frage ob es für die von den fremden Tab in Mitleidenschaft gezogenen Temlate-Elemente möglicherweise auch irgennd wo etwas mehr oder weniger übergeordnetes zu korrigieren gibt, das die erkleinerten-Elemente so gleichmäßig wieder etwas größer macht, wie sie momentan verkleinert erscheinen.

  • Hey,


    Zitat


    Einfach alles, aber wirklich alles im Footer ist kleiner als auf den anderen normallen Templateseiten.

    Das ist aber komisch. Hast du in diesem Script eine CSS-Anweisung welche den Footerinhalt verkleinert darstellt?


    Du benutzt da doch die verschachtelten Tabs. Das heißt, so wie ich in dem Quellcode deiner Seite sehe, dass du den Aufbau der verschachtelten Tabs falsch erstellt hast.


    Der Entwickler gibt folgenden Aufbau für verschachtelte Tabs vor:

    Dieses lässt sich aber kaum in dem Quellcode deiner Seite erkennen. Dies kann auch ein Grund sein Warum die Schrift so klein wird.


    Überarbeite es mal bitte nochmal und melde dich dann bitte und sage ob sich was geändert hat.

  • Ich habe eine Weile suchen müssen, aber jetzt habe ich die Ursache für die zu kleine Schrift gefunden:

    Die Schriftgröße wird in global.css so fest gelegt:

    CSS
    .g-font-size-15--xs {
        font-size: 0.9375rem !important;
    }

    Wie man hier nachlesen kann, ist die Basis für rem die Fontsize, die im html-Element definiert ist:
    https://die-netzialisten.de/wo…-was-ist-der-unterschied/


    Im html-Element wird die Fontsize sowohl von Bootstrap mit 10px als auch in style.css mit 16px definiert. Auf der problematischen Seite

    http://kahn.8sf.de/nested-tabs-test/menu-tabs-footer.html

    wird zunächst style.css und dann das Bootstrap-CSS eingezogen, so dass die 10px von Bootstrap die 16px von style.css überschreiben. Auf der Seite, wo die Schriftgröße passt, ist es umgekehrt, so dass style.css mit 16px wirksam ist.

    Deaktiviert man die Definition von Bootstrap ist alle OK:

    html-seminar.de/woltlab/attachment/1514/


    D. h. wenn Du die Reihenfolge von style.css und Bootstrap-CSS tauschst, sollte alles wieder OK sein.


    D. h. auch, dass das Problem nicht durch die Nested Tabs verursacht wird.

Jetzt mitmachen!

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