SVG in eigenen Layoutbereich positionieren

[chetan]

Hallo zusammen,

ich würde gern einen SVG Wellenabschluss unter meinen Headerbild machen, der sich responsiv anpasst.
Ich arbeite mit dem freestyle-Template und habe die Grafik Welle mit SVG erstellt und sie als eigenes Layoutbereich "Welle" definiert und unter die Headerzeile positioniert.
Die Grafik erscheint jetzt auf dem Headerbild oben und ich hätte sie gern als Abschluss unten und dass sie sich verändert wenn die Bildschirmgröße verkleinert wird.
Wenn ich position: relativ mache und top: auf 500 px passt es nur bei einer bestimmten Auflösung.

Bin keine Fachinformatikerin sondern reine Gestalterin.
Könnte mir vielleicht jmd helfen?
Hier ist die Vorschau: http://aworx.kinderarztpraxis-mengede.de

Am liebsten hätte ich den div Tag im Headerbereich, aber dann verschwindet die Welle komplett... warum auch immer...
Sitze schon zu lange dran, würde es aber so gern so umsetzten.

Danke für jeden Tipp in die richtige Richtung
Agnieszka

[derRenner]

Hallo,

setze deine <div id="wave"></div> direkt in den <header> innerhalb <div class="header_wrapper"></div>.
Dort solltest du es dann absolut auf den bottom platzieren können.

[chetan]

Hallo,

danke, aber leider hat es nicht den gewünschten Effekt gebracht.
Die Welle rutscht nun ganz nach unten und orientiert sich nicht an dem Hero-Bild.

Ich habe die Welle als Modul definiert und setzte es dann in den Artikel rein. Habe es aber auch in das Seitenlayout eingebunden, auch da positioniert es sich nicht richtig.

Ich habe eine ähnliche Variante auf der Website der Stadtbücherei in Hamm gefunden, genauso hätteich es gern...
https://www.hamm.de/stadtbuecherei.html

Was mache ich verkehrt?

[derRenner]

dann vermute ich, dass du irgendwo im CSS ein Thema hast, denn der relativer wrapper ist <div class="header_wrapper"> und darin platzierst du absolut am bottom dein <wave>
Schau dir nochmals dein CSS durch, ob hier irgendwo etwas reinspiel, das dein custom CSS wieder aufhebt

[chetan]

Danke,

leider versuche ich alle Varianten, aber es mag einfach nicht gelingen.
Laut Webconsole hebt sich die "absolute" nicht auf und ich kriege das SVG auch nicht direkt in den "wrapper_header" rein, er listet es im header darunter.
Ich habe es auch über Artikel versucht, aber komme da auch nicht rein...

Vielleicht noch jmd eine Idee oder Muße?
Wäre sehr dankbar...

Schönen Abend

[derRenner]

Wenn du's technisch nicht lösen kannst, dann könntest du auch noch die Welle in einem Bildbearbeitungsprogamm über dein Hintergrundbild setzen und das neu entstandene Bild einfügen

Ich kenne leider das theme nicht, wie es aufgebaut ist, aber vllt. kannst du das Konstrukt, welches du mit CE's zusammenstellst, gesamt mit einem CE HTML nachstellen? Dann bringst du auch das gewünschte <div> dorthin wo du's benötigst.

[Flox]

oh das habe ich auch schon mal probiert. Mein Endergebnis war dann ein Element mit einem PNG als background-image.
Das SVG hat bei mir auch nicht den gewünschten Effekt erzielt. Bin aber auch offen für neues

[mlweb]

Das Problem kann man mit css-clip-path lösen. Hier ein Link https://www.mediaevent.de/css/clip-path.html, wo das m.E. recht gut erklärt ist.
Wird auch von allen modernen Browsern unterstützt.

[mlweb]

Wenn ich mir die Beispielseite anschaue und deren Code "kupfere" komme ich bei folgendem css auch zu einem zufriedenstellenden Ergebnis

#wave {
    position: absolute;
    top: 0px;
    z-index: 20;
    width: 100%;
    transform: translateY(77%);

Eventuell musst Du bei den 77% noch etwas justieren (+/- 1%). Ich habe das nur kurz im Browser geschaut.
Bei ganz kleinen Bildschirmen brauchst Du so wie es jetzt aufgebaut ist (Größenverhältnis Bild zu SVG), dann einen Breakpoint und musst translateY anpassen (zu mindestens wenn ich richtig geschaut habe).

[chetan]

Hallo Mlweb,

herzlichen Dank, das Schiffchen ist unten und bleibt unten! Zumindest bei den großen Displays.
Sobald das mobile Menü auftaucht, rutscht es nach oben.
Ich muss zugeben, dass ich das mit dem Breakpoint und dem Anpassen noch nicht richtig verstanden habe...
Vielleicht darf ich Dich um zwei, drei Sätze mehr bitten?

Wie Du auf der Beispielseite der Stadtbücherei gesehen hast, fährt das Hero Bild hinter die Welle, wenn es vertikal gekürzt wird. So dass man nicht das gesamte Bild erst runterscrollen muss, um an den Inhalt zu kommen. Wie schaffe ich das, ohne dass mein Schiff nicht wieder verschwindet?

Aber auf jeden Dank richtig großen Dank, ich dachte ich muss wirklich auf dei PNG Variante umsteigen, was ich eben vermeiden wollte. Aber ich merke es ist wohl nicht ganz so einfach...

Gruß Agnieszka

[mlweb]

Du setzt dafür Media Queries ein. Entweder Du verwendest für die Media Queries einzelne Dateien oder Du schreibst das direkt in Deine normalen css-Dateien. Dabei kann man das abtrennen (alle Mediqueries an einer Stelle) oder direkt beim entsprechenden Selektor mit eintragen. Ich persönlich bevorzuge letzteres.
Du kannst dabei Mobile First oder Desktop First arbeiten. Mobile first ist die bessere Variante (zumindestens nach meinem Verständnis).
In Deinem Fall sieht dieser Bereich für Mobile First so aus

#wave {
    position: absolute;
    top: 0px;
    z-index: 20;
    width: 100%;
    transform: translateY(92%);
}
@media (min-width: 769px) {
    #wave {
         transform: translateY(77%);
    }
}

Hier zwei Links zum Thema Media Queries:
https://www.google.com/search?client...ss+breakpoints
https://blog.kulturbanause.de/2014/07/responsive-webdesign-breakpoints-und-media-queries/


Nachtrag: Du hast gerade das svg geändert oder?

[derRenner]

transform: translateY(77%);

das Thema ist aber, dass du hiermit nie alle tatsächlichen Bildschirmbreiten und -Höhern abdecken wirst können. Auch wenn du mit breakpoints arbeitest wird nicht jeder seinen viewport des Browsers auf Vollansicht stehen haben. Sobald der Browser ein anderes Format einnimmt stimmt der prozentuelle Abstand nicht mehr. Damit das klappt muss also <wave> am bottom des übergeordneten <div> "kleben". Erst dann kann sicher gestellt sein, dass wave immer am unteren Rand des Bildes bleibt.
Und da hilft auch kein leichtes Anpassen von den genannten 77%

Was ich meine kannst du ja selbst einfach ausprobieren, indem du den Browser selbst verkleinerst und dich damit ausserhalb der breakpoints befindest. Mach das Browserfenster mit der Maus "niederiger" oder "höher" und schon bleiben wohl die 77% aber das Hintergrundbild verändert sich responsiv und wave und das Bild bilden keine Einheit mehr.

[mlweb]

Meine Empfehlung wäre eher das ganze mit clip-path umsetzen, wie oben empfohlen.