Website Titel und Untertitel leicht verschoben

    Hallo,


    da bräuchten wir einen Link zur entsprechenden Website, damit wir den Quellcode analysieren können.

    Ok, danke. Ursache ist, dass im Titel eine andere Schriftart genutzt wird als im Slogan. Da kann man dann nichts machen. unterschiedliche Schriften haben unterschiedliche Geometrien.

    Beide Textblöcke liegen links auf den selben Koordinaten. In den Schriften ist aber um die Buchstaben herum unterschiedlicher Weißraum.


    Lösung: bei beiden die selbe Schriftart verwenden.

    Herzlichen Dank für die Rückmeldung.


    Ich habe dies nun überprüft - im Layout Editor steht nur Webname und dann die Schriftart die ich für den Webnamen benutze. Ich kann aber nicht die Schrift des Webslogans anpassen und ich wüsste auch nicht wo ich dies im Editor anpassen müsste. Von dem her, gehe ich aus dass es ich um die gleiche Schriftart handelt (vgl Bild von vorherigem Post).


    Wo könnte ich die Schriftart für den SLogan sonst ändern?

    Hallo,


    als Standardschriftart, wird in diesem Layout für den Slogan das verwendet, was im Layoutdesigner unter "Allgemein > Schrift" drinsteht.

    Wenn du da eine andere Schriftart haben möchtest, dann diese per folgendem CSS-Code (ohne Zeilennummern) einfügen:

    https://docs.zeta-producer.com/eigenes-css-einfuegen.html

    Code
    1. <style>
    2. #slogan {
    3. font-family: Tahoma;
    4. }
    5. </style>

    Hier als Beispiel "Tahoma" für den Slogan.

    Danke viel mals Jochen - habe es ausprobiert und auf die gleiche Schriftart gesetzt - leider ist die Verschiebung weiterhin (vgl. Bild im Anhang).

    Ist das wirklich verschoben?....

    Das ist auf dem kleinen Bild für mich nicht ersichtlich.


    Kann man das Online sehen?

    Mit deinem Link von oben, finde ich das nicht.

    Ich sitze zwar schon lange am PC aber das Gefühl das es verschoben ist, lässt mich nicht los. Hier kannst Du es Dir ansehen: Link


    @ Jochen:


    Wie hast Du herausgefunden, dass es sich beim SLogan um #slogan handelt? Hast Du dazu Firebug benutzt und auf den Slogan geklickt, und dabei wurde dir
    #slogan angezeigt? Oder wie hast Du dies herausgefunden? Das würde einiges erleichtern wenn ich dies wüsste.

    Hallo,


    ok ich kann das nun auch sehen :)


    Ich vermute das dies evtl. an deinen eingefügten CSS-Codes liegt.

    Lösche da (nach einer Sicherheitskopie davon) mal alles raus (Einstellungen > CSS) und überprüfe ob es dann zufällig passt.


    Falls ja, dann mal schritt für schritt die CSS-Codes wieder einfügen, bis du den Verursacher gefunden hast.


    Falls nein, dann gib hier nochmal bescheid, so das man das nochmal genauer analysieren kann.


    Um CSS-Sachen rauszubekommen, am besten die Entwickler-Tools des jeweiligen Browsers nutzen.

    Hallo,


    das liegt einfach daran, wie die Buchstaben des Fonts konstruiert sind. Es scheint, der Designer hat um das D etwas Weißraum gelassen, der sich proportional mit der Schriftgröße mit vergrößert. Das kann man sehen, wenn man Web-Name und Slogan in der selben Größe darstellt und beides mit einem D beginnen lässt, dann ist es bündig.


    Da kann man nicht viel dagegen tun. Sie können versuchen das mit einer Margin, wie von Jochen beschrieben oder einer linken padding für den Slogan auszugleichen: padding-left: 0.1em. Hierbei würde ich eine relative Maßeinheit nutzen, damit das mit den Browser-Schriftgrößeneinstellungen mit skaliert.

    Zitat von ladaerw

    Wäre dann der richtige Code folgender?


    Code
    1. <style>
    2. #slogan {
    3. padding-left: 0.1em;
    4. }
    5. </style>

    Ja.


    Wenn du möchtest, dann kannst du auch die beiden Codes zusammenführen.

    Also der für die Schriftart, und der für den Abstand.

    Sieht dann so aus:

    Code
    1. <style>
    2. #slogan {
    3. font-family: Montserrat;
    4. padding-left: 0.1em;
    5. }
    6. </style>