Bild-"Überlagerung"

jjonline

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. Quellenhinweis: https://www.epoxydocsus.com.

Mithilfe der Optionen unter "Darstellung", nämlich "Außenabstand" und "Innenabstand" habe ich versucht, das mit dem ZP umzusetzen.

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 (hier: Chrome. Anzeige bei Edge, Opera und Firefox aber ähnlich):

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.

Ich bedanke mich vorab für wertvolle Tipps!

Steffen T.

Hallo,

ich empfehle, die Abstände nicht über die Darstellungs-Optionen zu steuern, sondern eigenes CSS zu verwenden. Dazu wäre es hilfreich, sich folgenden Artikel durchzulesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

Außerdem rate ich dazu, sich mit den Entwickler-Tools der verschiedenen Browser vertraut zu machen.

Für den oberen Container würde ich eine eigene CSS-Klasse über die Darstellungs-Optionen zuweisen. In meinem Beispiel nutze ich die Klasse "meinContainer". Dabei ist es wichtig, mit CSS-Breakpoints zu arbeiten, damit die Anpassungen nur bei bestimmten Bildschirmgrößen greifen. In meinem Beispiel wird "margin-bottom: -330px" nur angewendet, wenn die Bildschirmbreite mindestens 1024px beträgt.

Hier der CSS Code dazu:

Code

<style>
@media (min-width: 1024px) {
    .meinContainer {
        margin-bottom: -330px;
    }
}
</style>

jjonline

Daran werde ich mich versuchen. Wenngleich ich ja hoffte, der responsive Part würde durch die Einstellungen im ZP auch erledigt, nachdem es auf dem Desktop-PC ja bereits sehr ansehnlich mich den Darstellungs-Optionen einzustellen war.

Dennoch vielen Dank, Steffen T.!

Bild-"Überlagerung"

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?