Logo Skalierung

  • Betroffene Version
    WoltLab Suite 5.3

    Hallo zusammen,

    ich habe auf meiner Seite gerade den Header etwas überarbeitet und u.a. ein Video in den Hintegrund eingebunden. Das HeaderLogo habe ich als "absolute" darüber gelegt. Mein Problem ist nun, dass sich bei der Skalierung (kleiner) das Logo in das mainMenu obendrüber schiebt. Ich stehe gerade irgendwie auf dem Schlauch und finde keinen Ansatz das zu lösen. :/

    Vielleicht hat jemand von euch eine Idee.

    Danke

  • Ich merke gerade selber, dass einige zusätzliche Angaben vieleicht nicht verkehrt wären ;)

    Also das HeaderLogo schiebt sich beim Skalieren oben bis zum Anschlag der Seite und stoppt nicht am Menü:

    Hier die entsprechenden Auschnitte aus der CSS:

  • Füge einen inneren Abstand ein:

    padding-top: 50px;

    Code
    #pageHeaderLogo {
        padding-top: 50px;
        position: absolute;
        display: block;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • Füge einen inneren Abstand ein:

    padding-top: 50px;

    Code
    #pageHeaderLogo {
        padding-top: 50px;
        position: absolute;
        display: block;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    bei position: absolute arbeitet das je nach Aufbau der vorherigen Klassen nicht immer zuverlässig, Reenmeister versuche es mal mit einem "top" wert. Beispielsweise:

    Code
    #pageHeaderLogo {
        top: 50px;
        position: absolute;
        display: block;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
  • bei position: absolute arbeitet das je nach Aufbau der vorherigen Klassen nicht immer zuverlässig, Reenmeister versuche es mal mit einem "top" wert. Beispielsweise:

    Das zerschießt es dann komplett. Wenn ich top drin lasse und dafür die Positionierung über translateY rausnehme sitzt es zwar wieder korrekt, dann passiert aber der umgekehrte Effekt, heißt dann schiebt es sich bei der Skalierung nicht mehr nach oben übers Menü, sondern nach unten über die pageNavigation. Beides Mist :|

  • Das kommt ganz drauf an wie das Video bzw. die Klasse eingebunden wurde, alternativ kann man auch mit z-index herumexperimentieren.

    Ohne eine Live-Ansicht wie norse schon erwähnt hat wird man hier wohl nur weiter raten können...

  • Uff, das ist aber unschön gelöst. Besser wäre du positionierst #video_background absolut und schiebst das in den Hintergrund des Logos. Dann brauchst du am Rest des Stils gar nix ändern außer vielleicht den z-index irgendwo.

    Ps:

    Wenn dann 250px nicht 230px

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

    Einmal editiert, zuletzt von Hundiiiiiiiiii (25. Mai 2021 um 14:00)

  • CSS
    .pageHeaderLogoLarge {
        max-height: 230px;
    }

    Gruß norse

    Das hat leider auch keinen Effekt. Das Logo ist dann in der Max-Höhe kleiner, verschiebt sich aber bei der Kleinerskalierung trotzdem noch irgendwann wieder ins Menü :(

    Uff, das ist aber unschön gelöst. Besser wäre du positionierst #video_background absolut und schiebst das in den Hintergrund des Logos. Dann brauchst du am Rest des Stils gar nix ändern außer vielleicht den z-index irgendwo.

    Ps:

    Wenn dann 250px nicht 230px

    Hmmm... dann skaliert mir das Logo aber nicht mehr mit :/

  • Sorry, mir war nicht klar, dass sich bei Dir die Höhe des Headers in Abhängigkeit von der Fensterbreite ändert. So etwas habe ich bisher noch nicht gesehen.

    Wie ist es damit?

    CSS
    .pageHeaderLogo .pageHeaderLogoLarge {
        max-width: 85%;
    }


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

    Einmal editiert, zuletzt von norse (25. Mai 2021 um 16:17)

  • Sorry, mir war nicht klar, dass sich bei Dir die Höhe des Headers in Abhängigkeit von der Fensterbreite ändert. So etwas habe ich bisher noch nicht gesehen.

    Wie ist es damit?

    CSS
    .pageHeaderLogo .pageHeaderLogoLarge {
        max-width: 85%;
    }

    Ich wollte tatsächlich eine volle Skalierung des Headers erreichen, daher dieser Versuch. Eine festgelegte Höhe wirkt je nach genutzter Auflösung entweder über- oder unterdimensioniert. Aber ich habe langsam das Gefühl irgendwie lässt sich das technisch nicht umsetzen.

    Die Änderung bewirkt zwar, dass es sich nicht mehr ins Menü schiebt, dafür passt es dann in der max. Höhe nicht, weil ich oben quasi ein padding habe.

  • Ich kann Dir leider nicht folgen, vermutlich ist mein Monitor zu klein. Bei mir sieht es in allen Fensterbreiten stimmig aus.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

Jetzt mitmachen!

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