Sich überdeckende Column-Blöcke

[DanielDD]

Hallo Leute,

ich habe zu Testzwecken in einem COSTUM-HTML-Block in Gutenberg folgenden Konstrukt
erstellt. Ich wollte erreichen, dass sich beide Blöcke exakt überdecken.

<div class="row" style="height:0px">
<div class="column" style="float:left;width:50%">aa        aa        aa        aa</div>
<div class="column" style="float:left;width:50%">bb        bb        bb        bb</div>
</div>
<div class="row" style="height:0px">
<div class="column" style="float:left;width:50%">cc        cc        cc        cc</div>
<div class="column" style="float:left;width:50%">dd        dd        dd        dd</div>
</div>

Die Blöcke überdecken sich jedoch nicht. Die aa und cc sind dicht übereinander, die bb und dd überlappen
sich teilweise.

Wie kann ich erreichen, dass sich die Blöcke exakt überdecken?

DanielDD

 

[Sempervivum]

Hallo DanielDD und willkommen im Forum!

Wenn man mit float arbeitet, ist das nicht ungewöhnlich, dass man nicht das Ergebnis bekommt, das man sich vorstellt.

Das herkömmliche Verfahren, so etwas umzusetzen, benutzt absolute Positionierung, hat aber einige Nachteile.

Heute kann man das auch mit Gridlayout erreichen: Lege alle Kind-Container in den selben Elterncontainer und erzeuge ein Grid mit zwei Spalten. Dann weise jeweils den beiden Elementen, die sich überlappen sollen, mit grid-column und grid-row die selbe Zelle zu. Näheres siehe hier:
https://css-tricks.com/snippets/css/complete-guide-grid/

Wenn Du nicht zum Ziel kommst, melde dich wieder.

Beste Grüße, Ulrich

 

[DanielDD]

Hallo Ulrich,

vielen Dank, das grid ist sehr hilfreich. Die tatsächliche Struktur ist viel komplexer. Der erste Block besteht aus 4 quadratischen Bildern mit Abständen,
der zweite Block besteht aus 6 Bildern unterschiedlicher Dimension. Ich bräuchte ein Grid mit 12 Spalten mit komplizierter Breite.
Ich habe einen Container mit einer einzigen Zelle angelegt, darin sind beide Column-Blöcke.

DanielDD

 

[Sempervivum]

Hallo DanielDD,
das verstehe ich jetzt so, dass Du eine verschachtelte Struktur hast: Ein äußeres Grid mit nur einer Zelle und darin zwei weitere mit 4 bzw. 6 Elementen? Und heißt das, dass das Problem gelöst ist? Wenn ja, kann man sich das Ergebnis irgend wo ansehen?
Beste Grüße, Ulrich

 

[DanielDD]

Hallo,

ich habe jetzt teilweise zwei Elemente in dem gleichen Bereich des grids. Diese Elemente gehen mit opacity-Animationen ineinander über. Diese Elemente sind teilweise mit links versehen. Wenn ich zwei Elemente in dem gleichen Bereich habe, dann lassen sich die links nicht mehr anklicken. Ich habe schon versucht, die Elemente in einer anderen Reihenfolge zu definieren oder mit dem Z-index anders zu stapeln, das hat aber nichts gebracht.

DanielDD

 

[DanielDD]

Ich habe den z-index an der falschen Stelle angegeben. So funktioniert es:

<div style="grid-column:1/2;grid-row:3/4;align-self:center;z-index:10">
    ... Element mit dem link ...
</div>

 

[DanielDD]

Hallo,

ich habe jetzt viel mit grids experimentiert. Bilder werden nicht korrekt plaziert. Ich habe z.B.

<div style="grid-column:2/3; grid-row:1/2; align-self:end; justify-center:start; background-color:green">
<img src=" ....  "></div>

Dann ist ein schmaler grüner Streifen unter dem Bild. Die Hintergrundfarbe green habe ich nur gesetzt, um
das Problem zu veranschaulichen. Das Problem besteht z.B. darin, dass ich Bilder nicht bündig an den unteren
Rand des grids bekomme.

DanielDD

 

[Sempervivum]

Guten Morgen Daniel,
das tritt nicht nur beim Gridlayout auf und liegt daran, dass der Defaultwert für die vertikale Ausrichtung "baseline" ist. Setze vertical-align:top; (middle und bottom geht auch), dann sollte dieser Abstand verschwinden.

 

[DanielDD]

Danke Ulrich,

es hat funktioniert. Ich hatte vertical-align:top; zunächst in die Klassen des grids und dann
in de Klassen der grid-items gesetzt, in der Hoffnung das es sich nach innen vererbt.

Wenn das Bild außerhalb des grid-layouts ist, dann kann ich den Streifen mit vertical-align
an- und abschalten, allerdings ist es dann nicht blau, sondern durchsichtig. Das Vorhandensein des Streifens
erkenne ich nur, weil das Bild am Ende der Seite war.

DanielDD