Layout umsetzen

[kubjo]

Hi Leute,
ich habe mir in meiner freien Zeit ein Layout überlegt, das ich gerne umsetzten würde, aber nicht weiß, wie ich es am besten angehe.
Ich würde gerne zwei Quadrate nebeneinander anordnen, links ein Bild, rechts eine farbige Fläche mit Schrift. Die zwei Flächen sollen zusammen auf dem normalen Desktop immer die gesamte Breite einnehmen und gleich hoch bleiben (und quadratisch bleiben), egal wieviel Schrift (es wird meistens nur ein Satz sein) drin ist. Dass hier in den meisten Fällen noch ein Streifen unten übrig bleibt ist nicht schlimm, hier soll dann ein schmaler Footer erscheinen.

Im Hochformat ( Handy, Tablet, us.w. sollen die "Kisten" unereinander rutschen, oben das Bild, darunter der Text.

Wie würdet ihr das angehen? Grid, Flexbox, Tabelle, Grafik?

Ich bin auf eure Vorschläge gespannt!

Grüße aus Ludwigsburg
Jochen Kubik

[Franko]

Hi,
ich denke über ein Grid-Layout könntest Du dies am schnellsten setzen.

Zum Beispiel mit dem erdmannfreunde/euf_grid
(ab Version 3.x als CSS-Grid Umsetzung - s.a.: https://www.youtube.com/watch?v=9TyaH7TKcOk)

Die Sache mit equal height wäre wohl mit flexbox am einfachsten ...

[kubjo]

Hi Franco,
ich habe jetzt mal das Grid von E&F installiert und zwei Element in den Artikel eingefügt. Ein Bild ohne Größenangaben und ein Text. Dann habe die Reihen-Elemente vor und nach diesen Inhaltselementen eingefügt, so wie es im Video erklärt wird. Leider ist die Darstellung nicht wie erwartet. Schau mal:

http://contao48.sabine-winkle.de/startseite.html

Mit equal Height habe ich noch nicht angefangen, ich will mich erst mal um die Breite der "Kisten" kümmern! Da muß ich erst mal gucken, wie das geht!

Grüße
Jochen

[Franko]

Hi Franco,
ich habe jetzt mal das Grid von E&F installiert und zwei Element in den Artikel eingefügt. Ein Bild ohne Größenangaben und ein Text. Dann habe die Reihen-Elemente vor und nach diesen Inhaltselementen eingefügt, so wie es im Video erklärt wird. Leider ist die Darstellung nicht wie erwartet. Schau mal:

http://contao48.sabine-winkle.de/startseite.html

Mit equal Height habe ich noch nicht angefangen, ich will mich erst mal um die Breite der "Kisten" kümmern! Da muß ich erst mal gucken, wie das geht!

Grüße
Jochen

Hi,
so wie es eingebunden ist sieht es bei mir korrekt aus (zweispaltig).
Du benutzt die Klassen "col-6" - Bedeutet es wird IMMER zweispaltig ausgegeben.
Wenn dies nicht erwünscht ist mußt du die anderen Klassen für verschiedenen viewports nutzen ala "col-md-6" usw. ...

[kubjo]

Hi Franco,
das mit den Viewports habe ich kapiert, aber erst mal weg gelassen, danke für den Hinweis.
Leider sind aber die Spalten nicht gleich groß, das Bild paßt sich nicht der Größe der Spalte an, irgendwas ist da noch nicht ganz OK! Bin noch auf der Suche wo es hakt!

Grüße
Jochen

[Franko]

Hi,
weiss jetzt nicht genau was du erreichen möchstest.

Das E&F - Grid bietet die Hilfsklasse "row--show" das du beim row Start Inhaltselement eintragen kannst.
Damit werden die Spalten farblich eingeblendet...
Die Gesamtbreite ist ansonsten abhängig von der Breite des übergeordneten Containers.

Beim img finde ich keine entsprechenden responsive Angaben ala img { width: 100%; height: auto; } -
dies musst du selbst setzen ...

Frank

[Franko]

Hi,
Das E&F - Grid bietet die Hilfsklasse "row--show" das du beim row Start Inhaltselement eintragen kannst.
Damit werden die Spalten farblich eingeblendet...

Mit dem E&F - Grid ab Version 3 wird ja CSS-Grid verwendet.

Daher wäre die Hilfsklasse "row--show" hier nicht notwendig. Die Chrome DevTools zeigen die Spalten dann eh an ...
Und dann auch der IE-Edge ab Version 80.0.xxx - basiert ja dann auch auf Chromium ...

[andre.saage]

https://gist.github.com/asaage/1e91a...9cbec4b6e9a416

[kubjo]

Hallo andre.saage,

leider kann ich mit Deinem Post nichts anfangen, weil ich nicht so im Programmieren drin bin. Würdest Du bitte ein paar erklärende Worte beisteuern?

Grüße
Jochen

[Franko]

Hallo andre.saage,

leider kann ich mit Deinem Post nichts anfangen, weil ich nicht so im Programmieren drin bin. Würdest Du bitte ein paar erklärende Worte beisteuern?

Grüße
Jochen

Ist ein CSS-Grid Sample - halt ohne die Erweiterung ...

[andre.saage]

Sorry - war nur eine Spielerei - und ist auch nicht besonders praktisch.
Dass da eine Grid-Erweiterung im Spiel ist hatte ich gar-nicht berücksichtigt - dachte du fängst bei Null an.

[Franko]

Ein schönes Tut zu CSS-Grid allgemein findest Du hier:
https://css-tricks.com/4-css-grid-pr...-layout-needs/