Layout Flat Responsive: Header-Bilder ohne Beschnitt in der mobilen Anzeige ermöglichen

  • Hallo,


    auf Basis des Layout "Flat Responsive" habe ich eine neue Website für diesen Auftraggeber erstellt. In der Desktop-Ansicht gefällt ihm die Internet-Präsenz. Allerdings nicht in der mobilen Ansicht auf einem Smartphone.


    Da der Auftraggeber nicht möchte, dass der Weblink zur seiner Website hier im Forum aufgeführt wird und diese auch noch nicht für jedermann sichtbar sein soll, muss ich mich mit einer Beschreibung hier an die Community wenden:


    Er bemängelt, dass bei den im Headerbereich verwendeten Fotos in der mobilen Darstellung nicht die kompletten Bereich des jeweiligen Bildes angezeigt werden und somit Elemente (dargestellte Modelle etc.) mitunter nicht bzw. nicht komplett zu sehen sind, die jedoch am PC am linken und rechten Rand abgebildet sind.


    Die Fotos für den Header-Bereich wurden ihm vom Modelabel bereit gestellt und haben folgende Maße: 1280 px * 550 px (B * H).


    Da dies bei Verwendung des Widgets "Slider" offenbar nicht so ist und die Fotos auch in der mobilen Darstellung in ganzer Breite angezeigt werden, wollte ich den eigentlichen Header damit austauschen.

    Mit Bordmitteln ist es mir allerdings nicht gelungen, den Slider (randlos) statt des Headers an dessen Position unterhalb der Seitenavigation zu bringen. Wie ich das beim genannten Layout umsetze, ist mir nicht klar.

    Auch gibt es ja einen weiteren Unterschied Slider vs. Header. So kann man zwar in beiden Texte (Überschrift und zusätzlicher Text darunter) auf das jeweilige Foto setzen, aber während beim "richtigen" Header auch in der mobilen Darstellung diese Texte so wie in der Desktop-Darstellung angezeigt werden, ist die beim Slider offenbar nicht gegeben, denn hierbei werden die Überschrift und der Zusatztext in der Mobildarstellung nicht mehr auf den Fotos selbst sondern darunter angezeigt.


    Hinzu kommt, das in der mobilen Darstellung die Richtungs-Buttons nicht mittig zur Höhe der Fotos angezeigt sind sondern im oberen Bereich innerhalb der Bilder.


    Diese Umstände gefallen dem Auftraggeber widerum nicht. Auch nicht, das beim Header (bei ein und demselben) Layout unterschiedliche Richtungs-Buttons verwendet werden (was ebenso das Widget "Carousel" betrifft).


    Der Kunde verweist darauf, ein einheitliches Erscheinungsbild haben zu wollen, also keine unterschiedlichen Richtungs-Buttons. Diese könne man schließlich entsprechend vom Stil her anpassen. Besser wäre natürlich, wenn die Richtungs-Buttons von vornherein nicht so unterschiedlich wären, die man ja schließlich


    Wie man ein Widget (um)programmiert um gleichaussehende Richtungs-Buttons zu erhalten, weiß ich jedoch leider nicht.


    Hat vielleicht jemand einen Tipp bezgl. der Slider-Platzierung (unterhalb der Seitennavigation) und der unterschiedlichen Richtungs-Buttons?


    Herzlichen Dank vorab!

    Beste Grüße
    Jörg




    ---
    Ich nutze Zeta Producer 15.1.1 Business

  • Hallo,

    wir können Ihnen hier beim besten Willen kein angepasstes CSS liefern um die Wünsche Ihrer Kunden zu berücksichtigen. Das müssen Sie verstehen. Wenn Sie einen Baukasten verwenden, müssten Sie den Kunden irgendwie kommunizieren, dass man sich eben auch nur in den Grenzen des Baukasten bewegen kann (ausser man kann CSS/HTML).

  • Hallo Jörg,

    ich lese sehr gern deine oft auch für mich sehr interessanten Beiträge und lerne dabei auch dazu!

    Helfen kann ich dir leider nicht, aber dieses Thema gehört in die Web-Plauderecke
    „Alles was sonst noch in den Bereich Web fällt, wie z.B. HTML-, JavaScript- oder CSS-Fragen ("Geht die Navigation auch rechtsbündig?")."

    oder in Ideen und Wünsche für kommende Versionen

  • Was genau soll denn dann mit dem Text passieren wenn der Platz im Bild nicht mehr ausreicht?

    • Der Header beschneidet das Bild so damit der Text noch komplett angezeigt werden kann. Hierbei sollte der Focus des Bildes im Zentrum liegen. Beispiel
    • Der Slider blendet den Text unterhalb ein sobald der Platz nicht mehr ausreicht. Man kann den Slider mit folgendem Inline-CSS nach oben an die Navi rutschen-: margin-top:-50px. Beispiel
    • Wenn man dies nicht tut und der Platz nicht ausreicht passiert DAS.
    • Nun könnte man den Text am Smartphone kleider darstellen. Das kann dann aber keiner lesen und Google wird das auch nicht gefallen. Beispiel