Bild-"Überlagerung"

  • Hallo,

    mir fiel gerade keine wirklich gute Beschreibung dafür ein, was ich umsetzen möchte. Daher ein Screenshot vorab:




    Das Foto im obigen Beispiel "überlagert" einen weißen und auch einen grauen Hintergrund. Solche "Überlagerungen" sieht man häufig bei modernen Websites und es wirkt optisch auch sehr interessant.

    Mit den "Hausmitteln" des ZP habe ich versucht, dies nachzubilden, aber offenbar nicht verstanden, wie das mit der Software zu handhaben ist. Vielleicht ist es (ohne umfangreiche Programmierung mit CSS) derzeit gar nicht möglich? Ich weiß es nicht zu beurteilen, würde mir aber wünschen, es ließe sich auch für Nicht-Programmierer mit dem ZP umsetzen.

    Habe auch versucht, es mit den "Darstellungseinstellungen" zu verwirklichen, die sich ja für Container, Reihen und Spalten finden:




    Leider erfolglos...



    Die Darstellung im ersten Screenshot erinnert mich ein wenig an das WZP-Widget "Headerbild Overlay". Dabei wird aber überlagert der Text ein Bild:



    Auch ist die Darstellung dabei zentriert zum überlagerten Bild und beim zuerst gezeigten Screenshot ist ja ein Foto links, rechts daneben ein Text inkl. Button auf weißem Hintergrund und der untere Teil des Fotos überlagert in einen hellgrauen Hintergrund mit einem weiteren Text (diesmal auf der linken Seite) und einem rechts platzierten Foto.

    Hier der Link zur Website, von der der erste Screenshot stammt: https://www.epoxydocsus.com

    Habe ich vielleicht vor lauter Bäumen den Wald nicht gesehen und es ist doch mit dem ZP umsetzbar?

    Wäre dankbar für entsprechende Tipps.


  • Hallo Jörg,


    vielleicht mach ich auch gerade einen Gedankenfehler, aber wenn ich dem unteren Container negative Werte für den oberen Außenabstand zuweise, dann wandert der untere Conatiner unter den oberen.


    Viele Grüße


    Tom


  • Hallo Tom,

    danke sehr! Das hatte ich bereits ausprobiert und deine Beschreibung ist auch richtig. In deinem Beispiel ist allerdings neben dem Foto kein Text vorhanden. Genau das ist aber für das Webprojekt gewünscht, wie eben auch in der beispielhaften Website zu sehen (einmal links und einmal rechts vom jeweiligen Foto).

    Dass das obere Foto (wie gewünscht) den Bereich mit dem grauen Hintergrund überlagert, ist mit dem ZP leicht zu bewerkstelligen. Die Darstellung genauso umzusetzen, wie in der Beispiel-Website zu sehen, gestaltet sich (für mich zumindest) bislang ein bisschen schwierig mit dem Zeta Producer, was mehrere Gründe hat.

    Erstens:

    Mir ist in diesem Fall nicht immer sofort ersichtlich, ob ich Änderungen bei der Darstellung im ersten Container bspw. beim Außenabstand unten oder im zweiten Container beim Außenabstand oben vornehmen muss ("entweder- oder"?).


    Zweitens:

    Die Voransicht im Zeta Producer unterscheidet sich erheblich von der Darstellung im Browser. Während man im ZP vermutet, es nun erfolgreich umgesetzt zu haben, ist die Ansicht im Desktop-Browser "ernüchternd" und auf einem Smartphone quasi unbrauchbar.

    Was genau ich vielleicht falsch mache, habe ich leider noch nicht herausgefunden.


    Die Test-Website ist unter https://hosting.zeta-producer.com/7866802063/index.html zu finden.




    Voransicht im ZP:




    Ansicht "Darstellungsmodus":





    Ansicht Desktop-Browser:



    Die Ansicht im Desktop-Browser ähnelt eher dem "Darstellungsmodus", nicht aber dem, wie es eigentlich umgesetzt werden sollte.




    Ansicht Smartphone (6,2 Zoll):




    Hier überlagert nicht nur der Text des ersten Containers den zweiten Container, sondern der Button des ersten Containers überlagert die Überschrift im zweiten Container.


    Bei der Original-Website (https://www.epoxydocsus.com) ist die Darstellung auch in der mobilen Browseransicht unproblematisch:





    Übrigens benutze ich für dieses Projekt das Layout "Top Responsive", weil dieses umfangreichere Einstellungsmöglichkeiten bietet als die übrigen ZP-Layouts. Als Basis dient eine leere Vorlage und es wurden keine Fremd-Widgets verwendet.

    Da ich das ZP-Entwicklerteam (und weitere User) erreichen möchte, werde ich meine "Problematik" auch im Entwickler-Forum aufzeigen.

    Bleib(t) gesund!


    Beste Grüße Jörg



    ---


    Ich nutze Zeta Producer Business / Windows 11 (jeweils aktuellste Version)

    3 Mal editiert, zuletzt von jjonline ()

  • Hallo Philipp,

    grundsätzlich gehe ich bei derartigen Problemen zunächst stets von einem Fehler meinerseits aus und versuche, die Ursache zu finden. Dass aber die beiden Ansichten im ZP selbst schon derart unterschiedlich sind, irritiert mich entsprechend. Noch mehr die Darstellung auf mobilen Endgeräten (hier einem Smartphone), nachdem die Test-Website hochgeladen wurde.

    Möchte aber nicht weiter vorgreifen. Vielleicht meldet sich das ZP-Entwicklerteam ja noch zur Thematik nach dem Wochenende.




    Bleib(t) gesund!


    Beste Grüße Jörg



    ---


    Ich nutze Zeta Producer Business / Windows 11 (jeweils aktuellste Version)

  • Hallo Jörg,


    die Diskrepanzen zwischen Dastellungsmodus, ZP-Ansicht und Browservorschau habe ich auch festgestellt. Zu den Ursachen kann ich nichts sagen.


    Jetzt zum eigentlichen Problem. Ich habe Deine Testseite einigermaßen nachgebaut und mein gefährliches Halbwissen bemüht. Dass es in der mobilen Ansicht zu einer Überschneidung kommt, ist zunächst erwartungsgemäß. Die Anweisung für den negativen Außenabstand muss für die mobile Ansicht natürlich irgendwie aufgehoben werden.


    Ich habe wirklich viel probiert und nur wie folgt scheint es zu klappen:


    Oberer Container keine Einstellungen zum Außenabstand

    Reihe Außenabstand unten -230px


    Unterer Container oberer Innenabstand: 200px

    Reihe keine Einstellungen zum Außenabstand


    Jetzt eine CSS-Klasse definiert:


    <style>

    @media (max-width: 1024px){

    .ohneueberlappung {

    margin-bottom: 230px !important;

    }

    }

    </style>


    und diese dem oberen Container zugewiesen.


    Mittels einer zweiten CSS-Klasse könnte/müsste man jetzt sicherlich noch das obere Padding des unteren Containers reduzieren.


    Ist nur ein Idee, in welche Richtung Du Deine Forschungen fortsetzen könntest.


    Viele Grüße


    Tom

  • Hallo Tom,

    vielen Dank für deine Mühe! :thumbup:

    Das werde ich gerne ausprobieren, wenngleich meine Unsicherheit als Nicht-Programmierer verbleibt und ich davon ausgegangen war, dass man bei solchen Dingen nicht mehr zusätzlich mit Programmierung "eingreifen" muss, um unschöne "Überlappungen" zu verhindern.

    Solche "Überlagerungen" werden ja, wie bereits erwähnt, sehr häufig bei modernen Webdesigns verwendet.

    Wünsche dir (und allen anderen Foren-Mitgliedern natürlich auch) ein angenehmes Wochenende!

    Bleib(t) gesund!


    Beste Grüße Jörg



    ---


    Ich nutze Zeta Producer Business / Windows 11 (jeweils aktuellste Version)

  • Hallo Phil,

    auch dir vielen Dank! Genau das ist mir auch gerade in den Sinn gekommen, als ich die WZP-Widgets durchsuchte. Vielleicht funktioniert es ja auf diesem Wege.

    Nochmals ein angenehmes Wochenende!

    Bleib(t) gesund!


    Beste Grüße Jörg



    ---


    Ich nutze Zeta Producer Business / Windows 11 (jeweils aktuellste Version)

  • Hallo Jörg,


    das ist jetzt ZP gegenüber aber fast schon ein wenig unfair. 😉 Vielleicht wartet ZP17 ja mit der Implementierung von KI auf, aber bis dahin kann ZP nur umsetzen, was wir ihm eingeben. ZP kann somit schwerlich unsere Beweggründe erkennen und demgemäß auch schwerlich erahnen, dass wir den negativen Wert für einen Außenabstand in der mobilen Version gar nicht wünschen.


    Ich bin erst in Version 14 eingestiegen und als ich das erste Mal im Forum auf eine meiner Anfragen las, dass ich da etwas eigenes CSS einsetzen müsste, bin ich bald vom Glauben abgefallen. Viele Experimente und ein gutes Buch über CSS später (Peter Müller: Einstieg in HTML und CSS, 2. Auflage 2022) stehe ich derartigen Eingriffen sehr gelassen gegenüber.


    Das ist ja das Tolle an ZP, dass man unbegrenzt Projekte anlegen kann und diese mittels eigenem CSS-Code beliebig bereichern oder verschandeln kann.


    Kaufe zwei Sets „Malen nach Zahlen“ und gib es jeweils einem des Malens eher Unkundigem und einem Künstler. Sehr wahrscheinlich wird der Unkundige das erwarte Bild abliefern, das des Künstlers wird aber erheblich besser aussehen, weil er gar nicht auf die Zahlen angewiesen ist bzw. diese gekonnt modifiziert. So ist es auch mit ZP.


    Natürlich wäre es für die Zukunft wünschenswert, ein Bild per Klick ausbrechen zu lassen und es in der mobilen Ansicht wieder brav einzureihen bzw. eine andere passende Darstellung zu wählen, aber das ist gegenwärtig wohl noch Zukunftsmusik.


    Da müssen wir halt geduldig sein oder risikofreudig in die Programmierung eingreifen.


    Viele Grüße


    Tom

  • Hallo Tom,

    ich meine das ja nicht böse und verstehe auch, was du meinst. Wenn man aber eher aus dem Bereich Design kommt, sieht man das vielleicht mehr aus diesem Blickwinkel. 8)

    Der ZP ist eine tolle Software - keine Frage!

    Aber natürlich schaut man immer mal über den Tellerrand und stellt dann fest, dass andere Desktop-CMS auch Programmierern Spielräume lassen, aber dennoch "designtechnisch" bereits mehr implementiert haben, sodass auch Nicht-Programmierer das hier leicht...


    &thumbnail=1



    ...und ohne eigene Programmierung umsetzen können. ;)


    Eine Website soll natürlich nicht "an jeder Ecke" irgendeinen "Schnick-Schnack" zeigen. Aber selbst Google, das auf Performance viel Wert legt, nutzt Webdesign (darunter auch Animationen) bei den eigenen Internetpräsenzen.

    Nur das "Nötigste" auf einer Webpräsenz darzustellen, ist nicht mehr zeitgemäß. Der Spruch, "das Auge isst mit" hat so gesehen auch in diesem Kontext seine Berechtigung und Auftraggeber erwarten auch, keine "langweilige" Website zu erhalten, die aussieht wie "von der Stange".

    Werde aber gerne die Vorschläge und Tipps versuchen umzusetzen. Möglicherweise lerne ich ja noch ein paar Dinge hinzu, was nie schaden kann. Und hege währenddessen die Hoffnung, dass mit Version 17 des ZP wieder ein Höhepunkt geboten wird. :)

    Bleib(t) gesund!


    Beste Grüße Jörg



    ---


    Ich nutze Zeta Producer Business / Windows 11 (jeweils aktuellste Version)