breites Logo anpassen

  • Hallo,

    ich habe nochmal eine Frage zu unserer Homepage.

    Wir benutzen das Layout Atmosphere Responsive mit dem ZP 12.5.6 Express.

    Unsere Logografik besteht aus dem eigentlichen Logo und einer Linie, die links und rechts neben dem Logo "sitzt".
    Diese Linie soll links am Menü andocken. Das tut sie bereits, indem ich das Logo um 40px nach links verschoben habe. Passt soweit fast immer, außer wenn man das Fenster sehr breit aufzieht. Rechts soll die Linie über die komplette Fensterbreite verlaufen.

    Nun zu meinem Problem.
    Eigentlich passt sich das Logo an die Breite des Fensters an. D.h., wenn das Fenster schmäler wird wird auch das Logo kleiner. Das funktioniert mit Google Chrome auch so wie es wahrscheinlich programmiert ist. Mit Firefox und dem IE passt sich das Logo nicht an, sondern bleibt auf der eigentlichen Größe. Dafür erscheint ganz unten ein Scrollbalken, mit dem man den Inhalt (nicht das Menü) nach links verschieben kann, bis man rechts das Ende der Logografik erreicht hat. (Siehe angehängtes Bild)

    Mit folgendem Code wird das Logo in jedem (getesteten) Browser "richtig", also wie im Google Chrome angezeigt, sodass es mit der Fensterbreite mitwächst.

    Code
    <style>
    	#logo img {
    	    width: 100%;
    	}
    </style>


    Nun gefällt mir das so leider nicht so ganz.
    Eigentlich hätte ich ganz gerne, dass das Logo seine Größe beibehält (zumindest in der PC-Ansicht) und nicht kleiner wird. Im Prinzip so, wie es bei Firefox und IE ohne den Code ist. Allerdings stört mich dieser horizontale Scrollbalken.

    Was könnte ich tun? Habt ihr dazu Lösungsvorschläge? Und wie setze ich die dann um?

    Ist es vielleicht eine Möglichkeit, das horizontale Scrollen zu deaktivieren? Wie geht das?

    Meine Testseite habe ich hier hochgeladen:
    http://hosting.zeta-producer.com/2926073332/index.html

    Ich freue mich auf Antworten.

    Liebe Grüße
    Vanessa

  • Folgendes CSS scheidet überstehende Elemente im Kopfbereich einfach ab, statt zu scrollen:

    CSS
    <style>
    #topline {
    overflow: hidden;
    }
    </style>

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Also so langsam zweifle ich an meinem Verstand :huh:

    Mal eine andere Frage, für's Verständnis:
    Wo liegt der Unterschied, ob man das eigene CSS unter >Erweitert >Attribute >mobile_script oder unter >Einstellungen >CSS einfügt?

    Macht das einen Unterschied? Und wird eines evtl. bevorzugt?

    Ich hatte nämlich bis eben im mobile_script ein paar Zeilen für einen Effekt bei meinen Bildern und den Code für meine dickere Trennlinie. Unter CSS hatte ich solche Einstellungen wie dass mein Menü etwas tiefer steht und ein paar Änderungen im Footer. Bei >Einstellungen >CSS habe ich auch den Code für das Logo eingefügt. Dann hat alles funktioniert wie es sollte.

    Der Übersichtlichkeit halber habe ich eben alles unter mobile_script zusammengefügt. Dann hat es nicht mehr funktioniert, der Scrollbalken kam zurück und bei Chrome hat es sich wieder verkleinert. Habe dann nur den Logo-Code bei >Einstellungen >CSS eingefügt. Dann war der Scrollbalken bei Firefox und IE weg, bei Chrome wurde es immernoch kleiner.

    Bei der Testseite ist alles unter mobile_script. FF und IE geht, Chrome nicht.

    Jetzt bin ich völlig verwirrt.

    Liebe Grüße
    Vanessa

  • Intern wird alles in Attributen gespeichert. Diese Attribute werden halt je nach Layout dann an verschiedenen Stellen im Quellcode ausgegeben. Bevorzugt wird für CSS "Einstellungen > CSS".

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Ah, danke für die Erklärung.

    Anscheinend ist es tatsächlich so, dass es in Google Chrome und Opera (hab ich mir jetzt auch noch installiert :D ) das Logo verkleinert. Das müsste noch irgendwie unterbunden werden.

    Bei Firefox und dem Internet Explorer ist aber alles wie es sein soll.

    Liebe Grüße
    Vanessa

  • Hallo,

    ich denke, Sie haben es selbst schon raus bekommen, dass man dem Logo dann halt eine entsprechend fixe breite geben muss. Und damit diese auch greift, muss man die max-width deaktivieren:

    CSS
    #logo img {
    	width: 1000px;
    	max-width: none;
    }

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Stimmt, die Idee hatte ich... nur hat bei mir die 3. Zeile gefehlt.

    Vielen Dank! Jetzt passt das Logo so wie es sein soll.

Jetzt mitmachen!

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