Z-Index-Frage
Z-Index-Frage
Morgen!
Habe da eine Frage zu https://www.kaiser-koenig-umzug.de/
Wir haben da auf der Seite das Mädl in dem Kreis - Was kostet ein Umzug.
Wie bekomme ich den Kreis über den folgenden Block gelegt?
Ich weiß noch nicht, ob das sinnvoll ist, aber war gerade so eine Idee (nur für mich erstmal) im Kampf gegen das allgemeine Kisten-Design.
In M4 Projekten habe ich das oft gemacht, aber hier klappt das nicht.
-> na klasse, gerade geschrieben, schon gefunden.
In der Section war ein overflow:hidden drin
Hm, jetzt sehen wir ja, dass das Mädl in der betreffenden Seite oben aus dem Kreis raus schaut, aber unten gerade abgeschnitten ist. Man kann die jetzt zwar rumpositionieren, aber die bleibt unten gerade. Geht ja auch irgendwie nicht anders, denn der Kreis liget ja HINTER dem Mädl.
Die Denksportaufgabe für heute: wie bekomme ich das Mädl unten in Form des Kreises abgeschnitten?
ich habe gerade nur eine Idee: das ganze komplett in Photoshop....
Habe da eine Frage zu https://www.kaiser-koenig-umzug.de/
Wir haben da auf der Seite das Mädl in dem Kreis - Was kostet ein Umzug.
Wie bekomme ich den Kreis über den folgenden Block gelegt?
Ich weiß noch nicht, ob das sinnvoll ist, aber war gerade so eine Idee (nur für mich erstmal) im Kampf gegen das allgemeine Kisten-Design.
In M4 Projekten habe ich das oft gemacht, aber hier klappt das nicht.
-> na klasse, gerade geschrieben, schon gefunden.
In der Section war ein overflow:hidden drin
Hm, jetzt sehen wir ja, dass das Mädl in der betreffenden Seite oben aus dem Kreis raus schaut, aber unten gerade abgeschnitten ist. Man kann die jetzt zwar rumpositionieren, aber die bleibt unten gerade. Geht ja auch irgendwie nicht anders, denn der Kreis liget ja HINTER dem Mädl.
Die Denksportaufgabe für heute: wie bekomme ich das Mädl unten in Form des Kreises abgeschnitten?
ich habe gerade nur eine Idee: das ganze komplett in Photoshop....
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Z-Index-Frage
Moin,
spontan fällt mir das das "Box-Offset" auf dieser meiner Seiten ein:
https://www.mobirise-tutorials.com/Lawy ... s/Box.html
... weiß nicht wie es jetzt gemacht ist, vielleicht geht das irgendwie mit eben einem negativen margin-bottom.
spontan fällt mir das das "Box-Offset" auf dieser meiner Seiten ein:
https://www.mobirise-tutorials.com/Lawy ... s/Box.html
... weiß nicht wie es jetzt gemacht ist, vielleicht geht das irgendwie mit eben einem negativen margin-bottom.
Re: Z-Index-Frage
Das Wissenswerte ist, dass im mbr-fullscreen ein overflow:hidden versteckt ist, wodurch kein Element außerhalb der betreffenden Sektion gelangen kann, auch nicht mit dem margin.
Werde ich dummerweise aber auch in einer Woche wieder vergessen haben.
Werde ich dummerweise aber auch in einer Woche wieder vergessen haben.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Z-Index-Frage
... also ich sehe da kein "overflow: hidden", wenn ich auf "fullscreen" stelle und das negative "margin" geht auch. Die CSS von Mobirise hat aber immer jede Menge "overflow: hidden" oder "overflow: x-hidden" eingearbeitet, die das aber nie beeinflussen.
Das wird ja immer in eine CSS geworfen, wenn der Programmierer keine Lust hat den Fehler zu suchen
Diesem "image-wrapper" habe ich ein "margin: -450px" gegeben und beide Blöcke stehen auf "Full Screen":
Das ist meine gestern von "Mobirise AI" (künstlicher Intelligenz) neu generierte Webseite (Thema "StartM5"):
https://www.mobirise-tutorials.com/Test ... nerated-2/
Was soll auch die CSS-Anweisung "overflow" mit einem "margin" zu tun haben ??? Overflow ist ein Überlauf, was einen Scroller hervorruft aber keine Positionierung eines Elementes beeinflusst.
Das wird ja immer in eine CSS geworfen, wenn der Programmierer keine Lust hat den Fehler zu suchen
Diesem "image-wrapper" habe ich ein "margin: -450px" gegeben und beide Blöcke stehen auf "Full Screen":
Das ist meine gestern von "Mobirise AI" (künstlicher Intelligenz) neu generierte Webseite (Thema "StartM5"):
https://www.mobirise-tutorials.com/Test ... nerated-2/
Was soll auch die CSS-Anweisung "overflow" mit einem "margin" zu tun haben ??? Overflow ist ein Überlauf, was einen Scroller hervorruft aber keine Positionierung eines Elementes beeinflusst.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Z-Index-Frage
Moin Frank,
habe mal heute Morgen einen Versuch mit CSS gemacht - vielleicht hilft Dir das bei Deiner Idee ja schon weiter:
https://www.mobirise-tutorials.com/Test ... #Bild-Rund
Die CSS - hat Google, bei der Suche nach "CSS Kreis", für mich auf einer meiner 15 Jahre alten NOF Seiten gefunden
Die Anzeige
Bemerkung: habe ich bisher nicht innerhalb der Mobirise class="image-wrapper" ausprobiert, das sollte aber kein Problem machen.
habe mal heute Morgen einen Versuch mit CSS gemacht - vielleicht hilft Dir das bei Deiner Idee ja schon weiter:
https://www.mobirise-tutorials.com/Test ... #Bild-Rund
Die CSS - hat Google, bei der Suche nach "CSS Kreis", für mich auf einer meiner 15 Jahre alten NOF Seiten gefunden
Code: Alles auswählen
.kreis {
width: 50%;
height: auto;
margin: 0px auto 0px auto;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 5px 5px 5px #cccccc, -3px -3px #24548b;
background-image: linear-gradient(blue, yellow);
}
@media (max-width: 767px) {
.kreis {
width: 90%;
}
}
.bild-rund {
border-radius: 50%;
}
Code: Alles auswählen
<div class="kreis">
<img class="bild-rund" src="https://www.mobirise-tutorials.com/Test-Temp/images/woman.png" alt="Girl">
</div>
Bemerkung: habe ich bisher nicht innerhalb der Mobirise class="image-wrapper" ausprobiert, das sollte aber kein Problem machen.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Z-Index-Frage
... ich habe jetzt das Bild nun auch noch über zwei Blöcke mit einem negativen "margin" gelegt:
https://www.mobirise-tutorials.com/Test ... oppelblock
Das funktioniert aber nur vom unteren Block nach oben. Keine Ahnung warum - hat da vielleicht einer eine Idee
Versuche ich das Bild vom oberen in den unteren Block zu verschieben, dann schiebt es sich unter den unteren Block. Egal welchen "z-index" ich versuche zu verwenden.
https://www.mobirise-tutorials.com/Test ... oppelblock
Das funktioniert aber nur vom unteren Block nach oben. Keine Ahnung warum - hat da vielleicht einer eine Idee
Versuche ich das Bild vom oberen in den unteren Block zu verschieben, dann schiebt es sich unter den unteren Block. Egal welchen "z-index" ich versuche zu verwenden.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Z-Index-Frage
Frank,
wir haben ja ein wenig im Hersteller Forum kommuniziert und ich will diesen Mobirise-Bug auch hier festhalten.
Man kann also das Bild auch nach unten verschieben, wenn man dem <secrion> Tag einen z-index verpasst, was aber nur als Inline-Anweisung funktioniert:
Den z-index hatte ich als erstes versucht - das ging aber an keiner Stelle außer jetzt direkt am <section> Tag.
Das ist wohl ein Bug, denn eigentlich müssten doch alle Blöcke einen einheitlichen "z-index" haben
... und dann wieder die Class anpasst:
Eine absolute Position ist nicht notwendig.
Hier meine Beispielseite:
https://www.mobirise-tutorials.com/Tuto ... oppelblock
wir haben ja ein wenig im Hersteller Forum kommuniziert und ich will diesen Mobirise-Bug auch hier festhalten.
Man kann also das Bild auch nach unten verschieben, wenn man dem <secrion> Tag einen z-index verpasst, was aber nur als Inline-Anweisung funktioniert:
Code: Alles auswählen
<section style="z-index: 1;" data-bs-version="5.1" class="image1 myzindex"
group="Images & Videos" data-bg-video="{{bg.type == 'video' && bg.value.url}}"
mbr-class="{'mbr-fullscreen': fullScreen, 'mbr-parallax-background': bg.parallax}">
Den z-index hatte ich als erstes versucht - das ging aber an keiner Stelle außer jetzt direkt am <section> Tag.
Das ist wohl ein Bug, denn eigentlich müssten doch alle Blöcke einen einheitlichen "z-index" haben
... und dann wieder die Class anpasst:
Code: Alles auswählen
.move {
margin-bottom: -200px;
}
Eine absolute Position ist nicht notwendig.
Hier meine Beispielseite:
https://www.mobirise-tutorials.com/Tuto ... oppelblock
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 147 Gäste