negative margin

  • Gelöst chrisesch

    (@chrisesch)


    vor 2 Monaten

    Hallo zusammen,

    Szenario: zwei bilder in einer Zeile: das linke bild ist kleiner als das rechte und soll im Frontend über dem rechten bild eingezogen zu sehen sein.

    Ich gebe dazu dem linken bild einen rechten negativen margin, so das es sich über das rechte Bild schiebt. Nur leider im frontend liegt es eingezogen hinter dem rechten Bild.

    Wenn das szenario umgedreht wird, also rechtes Bild soll sich mit linkem negativem margin über das linke schieben, funktioniert alles wie es soll: das rechte bild zeigt sich im frontend über dem linken.

    Was muss ich anstellen damit das auch mit linkem bild über rechten funktioniert.

    Gruß in die Runde
    Chris

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • bscu

    (@bscu)

    vor 2 Monaten

    Siehe https://www.w3schools.com/cssref/pr_pos_z-index.php

    Ich möchte darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu.
    Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier.

    Thread-Starter chrisesch

    (@chrisesch)

    vor 2 Monaten

    Negative margins sind doch eine funktion von wordpress 6.6. so steckt es doch im core, oder?

    bscu

    (@bscu)

    vor 2 Monaten

    Negative Margins sind auch nur CSS

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 2 Monaten

    Hallo @chrisesch

    Negative margins sind doch eine funktion von wordpress 6.6. so steckt es doch im core, oder?

    das ist schon richtig, wird aber aktuell (noch?) nicht für jeden Block unterstützt.

    Wenn du einen Screenshot zu dem verwendeten Pattern (mit dem Block Editor?) hier postest, dann können wir evtl. mehr dazu sagen.

    Jamie Marsland zeigt in diesem Video sehr schön, welche Möglichkeiten man derzeit hat.

    Es gibt allerdings z. B. das Plugin GenerateBlocks, mit dem du auch jetzt schon negative margins (Außenränder) berücksichtigen kannst. GenerateBlocks ist eine Bibliothek mit nur wenigen zusätzlichen Blöcken.

    Alternative wäre tatsächlich eine Lösung per CSS.

    Viele Grüße
    Hans-Gerd

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 2 Monaten

    Hallo,
    ich hatte übersehen, dass du eine URL genannt hattest.
    Füge bitte die folgende CSS-Regel unter Design > Website-Editor am Ende ein und teste dann bitte, ob es funktioniert:

    figure.wp-block-image.size-full.is-resized.\.bild-ueberlappend {
    z-index: 1;
}

    Bei Block Themes wie z. B. Twenty Twenty-Four kannst du über Design > Website-Editor zusätzliches CSS wie folgt eingeben.
    Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

    Screenshot Einstellungen

    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    vor 2 Monaten

    Die CSS-Klasse bild-ueberlappend ist auch falsch angelegt. Beim Eintragen der CSS-Klasse in der Sidebar darf kein Punkt verwendet werden. Möchtest du also eine CSS-Regel wie z.B.

    .bild-ueberlappend { 
    z-index: 1;
    }

    verwenden, trägst du in der Sidebar nur den Namen der CSS-Klasse ohne Punkt ein: bild-ueberlappend.

    Thread-Starter chrisesch

    (@chrisesch)

    vor 2 Monaten

    Tatsächlich der „punkt“ wars. Den habe ich im §Zusätzliche CSS-Klasse(n)“ Eintrag einfach entfernt … et voila: es funktioniert wie beabsichtigt. Das linke Bild schiebt sich über das rechte :_)

    Dank an alle die zur erhellung des Problems beigetragen haben!

    Na, vielleicht gibts ja mit dem nächsten WP Update die Möglichkeit zusätzlich zum negativen margin auch den z-index einzutragen.

    Chris

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)