DIV: Rechte Seite des DIV an linker Seite der Seite ausrichten

[Christian_85]

Hallo, ich sitze schon lange an einem Problem, das ich nicht lösen kann. Ein DIV-Container (flexible Breite) soll mit seiner RECHTEN Seite an der Position 0 der Seite ausgerichtet werden. Funktioniert das ohne JavaScript?

(Der Container ist quasi unsichtbar und wird später in die Seite sliden per CSS-Transition).

Liebe Grüße und vorab Dankeschön Christian

[Felix Riesterer]

Lieber Christian_85,

Funktioniert das ohne JavaScript?

klar! Ist ja CSS, denn Du schreibst weiter:

später in die Seite sliden per CSS-Transition).

Aber was meinst Du mit mit seiner RECHTEN Seite an der Position 0 der Seite ausgerichtet? Meinst Du right: 0;?

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

ich meine, mit right:0 richte ich die rechte Kante des Elements an der rechten Kante des Elternelements aus. Man müsste es mit right:100% machen.

Setzt natürlich voraus, dass das Elternelements nicht statisch positioniert ist (bspw. position:relative) und das Kindelement absolut positioniert wird.

Alternativ müsste man auch mit left:0 und position:absolute arbeiten können und das Element mit transform:translate(-100%, 0) rausschieben. Setzt man dann transform auf translate(0,0) und animiert den transform, sollte das das Element ebenfalls hereinscrollen. Ist jetzt nicht ausprobiert, also keine Garantie für Brauchbarkeit…

Rolf

[Gunnar Bittersmann]

@@Rolf B

Alternativ müsste man auch mit left:0 und position:absolute arbeiten können und das Element mit transform:translate(-100%, 0) rausschieben. Setzt man dann transform auf translate(0,0)

So ha’m wa’s beim Tagesspiegel.

und animiert den transform

Warum transform? translate gibt’s schon seit einiger Zeit als CSS-Eigenschaft.

Hm, als wir das Menü implementiert hatten, gab’s das noch nicht. Könnte ich mal refactorn.

Kwakoni Yiquan

[Christian_85]

Der rechte Rand der DIV-Box, soll an die linke Seite der angezeigten Seite anschließen. Die DIV-Box müsste also left:-100px positioniert werden. Leider hat die DIV-Box aber eine flexible Breite.

[Gunnar Bittersmann]

@@Felix Riesterer

Aber was meinst Du mit mit seiner RECHTEN Seite an der Position 0 der Seite ausgerichtet? Meinst Du right: 0;?

Nein, meint er nicht. Sondern right: 100vw. Für so’n reinfahrendes Menü. (Da der zweite Wert in inset: var(--header-height) 100vw 0 auto.)

Das ist aber nur ein nur teilweise funktionierender Prototyp. Es fehlt u.a. das Schließen per Esc-Taste und und und …

Kwakoni Yiquan