Warum lässt sich Schriftgröße nicht ändern

  • Ich habe diesen Beitrag schon einmal geschrieben konnte aber die Überschrift nicht mehr editieren, drum bitte den alten Beitrag löschen.

    [COLOR=#333333]Nachdem ich endlich ein Thema gefunden habe, dass mir auch optisch zusagt, möchte ich gern einige Änderungen durchführen. Dabei tauchen jedoch immer wieder neue Probleme auf.[/COLOR]

    [COLOR=#333333]Ich möchte gern die Schriftgröße in der Überschrift (Spruchhelden) ändern: Aus h1 25px habe ich h145 px gemacht, gestern lies es sich sogar nach mehreren Versuchen ändern, habe dann noch mal ein wenig rumprobiert und dann ging wieder gar nichts.[/COLOR]

    [COLOR=#333333]Wenn ich Element untersuchen anklicke sieht das folgendermaßen aus:[/COLOR]

    [COLOR=#333333][FONT=Tahoma]
    [COLOR=#000000][FONT=Consolas][COLOR=#777777][COLOR=black]h1.site-title a[/COLOR][/COLOR] {

    [/FONT][/COLOR]


    • font-size: 45px; (diese Zeile ist durchgestrichen)

    • [COLOR=#C80000]font-size[/COLOR]: 2.4rem;

    • [COLOR=#C80000]text-decoration[/COLOR]: none;

    [/FONT]
    [/COLOR]
    [COLOR=#333333]So schaut es bei mir im Stylesheet aus:[/COLOR]

    [COLOR=#333333][FONT=Tahoma]
    /* Headings Google fonts are defined and called in functions.php
    -------------------------------------------------------*/
    h1,h2,h3,h4,h5,h6 {
    clear: both;
    font-family:'Oswald', arial, Sans-serif;
    margin: 10px 0;
    }
    h1 {font-size:45px; font-size:2.4rem; margin-top:0;}
    h2 {font-size:20px; font-size:2.0rem;}
    h3 {font-size:18px; font-size:1.8rem;}
    h4, h5, h6 {font-size:16px; font-size:1.6rem;}
    [/FONT]
    [/COLOR]
    [COLOR=#333333][FONT=Tahoma]
    /* Header
    ---------------------------------*/
    #masthead {
    float:left;
    width:100%;
    position:relative;
    display:inline-block;
    z-index:9999;
    }
    h1.site-title {
    float:left;
    margin:20px 20px 10px 30px;
    }
    h1.site-title a {
    font-size:45px;
    font-size:2.4rem;
    text-decoration:none;
    [/FONT]
    [/COLOR]

    [COLOR=#333333]Warum lässt sich Schriftgröße nicht ändern?[/COLOR]

    [COLOR=#333333]Und dann habe ich folgendes Problem: Wenn ich auf [/COLOR]http://www.spruchhelden.de/alles-gut...llen-sprachen/[COLOR=#333333] gehe, passen einige Texte nicht in eine Zeile. [/COLOR]

    [COLOR=#333333]Wenn ich die Pageweite auf 1100 ändere ist zwar die Seite größer und wenn ich die Weite bei Site Content ändere passt auch der Text immer auf eine Zeile, dafür verschwinden dann aber die Widgets in der linken Sidebar.[/COLOR]

    [COLOR=#333333][FONT=Tahoma]
    /* Layout
    --------------------------------------*/
    #page {
    margin:0 auto 0 auto;
    [COLOR=#0000cd]width:960px; (geändert auf 1100)[/COLOR]
    background:#FFF;
    -webkit-box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.2);
    }
    #main {
    width:960px;
    z-index:1;
    }
    .site-content {
    float: right;
    width:[COLOR=#0000cd]620px; (ersetzt durch 720)[/COLOR]
    padding:30px;
    }
    #content {
    width:100%;
    }
    #secondary {
    float: left;
    overflow: hidden;
    width: 220px;
    padding:30px 0;
    font-size:12px;
    font-size: 1.2rem;

    [/FONT]
    [/COLOR]
    [COLOR=#333333]Was muss ich eingeben, damit die linke Sidebar trotzdem noch korrekt dargestellt wird?[/COLOR]

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Zum ersten: Nach deinem "font-size:45px;" kommt ja noch ein "font-size:2.4rem;", was die 45px wieder überschreibt und es, wie du gesagt hast, durchstreicht. Schreib "font-size:45px;" entweder rechts oder drunter von "font-size:2.4rem;" oder lösch letzteres ganz.

    Zum zweiten: Die Sidebar hat einfach keinen Platz mehr links vom Content, wenn du die Breite des Contents erheblich erhöhst. Ganz einfach ist da ne Lösung nicht.

  • Super, danke für den Tipp, hab zwar herausgefunden das es etwas mit der Vererbung zu tun hat, aber wo der Fehler genau liegt, hätte ich ohne dich nicht so schnell rausgefunden.

    .
    Zum zweiten: Die Sidebar hat einfach keinen Platz mehr links vom Content, wenn du die Breite des Contents erheblich erhöhst. Ganz einfach ist da ne Lösung nicht.

    Ist denn nicht, wenn man die Page vergrößert, auch automatisch mehr Platz für die Sidebar? Ich bin zu Beginn davon ausgegangen das man einfach überall nur ca. 20% dazurechnen muss. Aber anscheinend liege ich damit falsch.

  • Zum ersten: Nach deinem "font-size:45px;" kommt ja noch ein "font-size:2.4rem;", was die 45px wieder überschreibt und es, wie du gesagt hast, durchstreicht. Schreib "font-size:45px;" entweder rechts oder drunter von "font-size:2.4rem;" oder lösch letzteres ganz.

    Verschieb oder lösch da mal gar nichts, sondern schreib es so:

    [COLOR=#333333][FONT=Tahoma]h1 {font-size:45px; font-size:4.5rem; margin-top:0;}[/FONT][/COLOR]

    Warum? Ganz einfach: In Browsern, die es unterstützen, wird die als rem spezifizierte Schriftgöße verwendet. Ich kenne dein Theme nicht, aber der Theme-Entwickler wird sich schon was dabei gedacht haben, vielleicht in Richtungs Responsive Website ... Die in Pixel spezifizierte Größe ist nur ein Fallback für Browser, die rem (noch) nicht unterstützen.

  • Ok, also wenn du #page, #main und #primary anpasst von der Breite, ist es doch nicht so schwer. Aber um sowas wie "Alles Gute zum Geburtstag auf Chinesisch-Kantonesisch:" ohne Zeilenumbruch hinzukriegen, musst du das schon um einiges verbreitern. Dazu kommt ja noch rechts der Google+ und Like-Layer. Zumindest bei meiner Auflösung überlappt sichs dann.

    Was hältst du alternativ davon, einmal drüber "Alles Gute zum Geburtstag auf ..." zu schreiben und in der Auflistung dann nur "...Chinesisch-Kantonesisch:" ?

  • Tipp:
    1. Google Chrome installieren.
    2. Rechtsklick auf das Element machen, welches geändert werden soll.
    3. Element untersuchen (ganz unten) anklicken.
    4. Im Quellcode links prüfen, ob es auch das Element ist.
    5. Rechts im Abschnitt Styles die CSS-Änderungen machen (ausprobieren).
    6. Wenns so ist, wie es sein soll, die Änderungen ins CSS übernehmen.

    Brandheisser Tipp:
    Nicht die Originaldateien ändern, sondern eine eigene CSS-Datei erstellen, welche die Werte überschreibt. Diese dann im Header nach allen anderen CSS-Dateien laden.

    Spart Tischkantenabnagungserscheinungen! :)

  • So mach ichs schon die ganze Zeit ;)

    itsafiasco: Die Idee ist zwar gut, aber keine die für mich in Frage kommt.

  • Jau, oder Firefox mit Firebug. Bloß nicht IE und F12 - das ist grauenvoll.

  • So mach ichs schon die ganze Zeit ;)

    itsafiasco: Die Idee ist zwar gut, aber keine die für mich in Frage kommt.

    Mag dir zwar nicht gefallen, aber ich halte diese Idee auch für die geeignetste, sonst fängst du ja bei einem Spruch wie "Woher soll ich wissen, was ich denke, bevor ich höre, was ich sage" auf chinesisch-kantonesisch wieder von vorn an. Unsere Bildschirme sind zwar schon groß, aber etwas in den Maßen von Monitoren in Fußballstadien haben die wenigsten auf dem Schreibtisch stehen ;-) Und an die Nutzer von Tablets und Smartphones denkste gar nicht? Das sind inzwischen mehr als Desktop-Nutzer. Denk mal drüber nach. Ansonsten bleibt dir nur, dich mit der von formateins empfohlene Methode ans gewünschte Ergebnis heranzutasten.

    Frohe Ostern, Dirk

Jetzt mitmachen!

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