"Kacheln" im Inhalt

[claudiacarolina]

Hallo zusammen

Wir möchten solche Kacheln (siehe Bild) im Inhaltsbereich. Wie löst man das am besten? Mittels Tabelle und Hintergrundfarbe?

kacheln.jpg

Danke für Eure Hilfe!
Claudia

[mlweb]

Mit einem Gridsystem oder mit Flexbox. Tabellen benutzt man nicht fürs Layout, höchstens display: table;
Mein Favorit ist Flexbox weil es moderner ist.

[claudiacarolina]

Mit einem Gridsystem oder mit Flexbox. Tabellen benutzt man nicht fürs Layout, höchstens display: table;
Mein Favorit ist Flexbox weil es moderner ist.

Eigentlich ist es ja nicht das Layout, sondern der Inhalt, der so dargestellt werden möchte.


"Gridsystem oder mit Flexbox" - das wäre dann mittels CSS gelöst, gell? Das ist nicht ein Inhaltselement von Contao.

Danke und Gruss
Claudia

[tab]

Naja, Farben entstehen im Allgemeinen durch CSS . Wie sehen denn die Inhalte der (im Bild) 6 Kacheln aus? Sind das einzelne Inhaltselemente, Artikel, Nachrichten, Events, ...? Wie sieht das HTML dazu aus? Oder ist es genau das, was du suchst? Wie du eine HTML-Struktur erzeugen kannst, die du mittels CSS dann so wie im Bild gestalten kannst?

[mlweb]

"Gridsystem oder mit Flexbox" - das wäre dann mittels CSS gelöst, gell?

Ja das ist css. Wobei Contao selbst ja auch ein einfaches Grid anbietet und es gibt auch einige Erweiterungen für Gridsysteme.
Wie leistungsfähig/geeignet die sind kann ich aber sagen. Ich habe noch nicht damit gearbeitet.
Auf jeden Fall bieten bekannte Frameworks wie Bootstrap oder Foundation (gibt es auch als Contao-Erweiterungen) solche Sachen an. Aber auch da habe ich keine praktischen Erfahrungen, weil ich keines dieser Frameworks benutze.

Eigentlich ist es ja nicht das Layout, sondern der Inhalt, der so dargestellt werden möchte.

Ja, aber Dein Inhalt ist von der Semantik her kein tabellarischer Inhalt. Damit sind das Layouttabellen - Tabellen die nur eingesetzt werden, damit man ein bestimmtes Layout darstellen kann. Das macht man schon seit Jahren nicht mehr.
Wenn man solchen Inhalt trotz dem tabellarisch darstellen möchte, dann kann man display: table etc. verwenden (auch css).

[mlweb]

Oder ist es genau das, was du suchst? Wie du eine HTML-Struktur erzeugen kannst, die du mittels CSS dann so wie im Bild gestalten kannst?

Für meinen Ansatz kann man im Prinzip jedes Inhaltselement von Contao verwenden oder auch verschiedene Artikel als Cards mit css gestalten.
Auf der Startseite von Contao sind z.B. auch Textelement (ce-text) über ein Gridsystem in Form von Karten gesetzt (nur ohne eigene Hintergrundfarbe).

[claudiacarolina]

Wobei Contao selbst ja auch ein einfaches Grid anbietet

Ist das bereits eine Erweiterung? Oder wie und wo finde ich das? Ist es im Editor von Contao vorhanden?

Danke...

PS: Es geht ja dann auch darum, dass das Ganze von Leuten, die noch weniger wissen als ich.... dann aktualisiert werden kann.

[claudiacarolina]

Auf der Startseite von Contao sind z.B. auch Textelement (ce-text) über ein Gridsystem in Form von Karten gesetzt (nur ohne eigene Hintergrundfarbe).

Ja genau, in dieser Art und Weise. Einfach mit Hintergrundfarbe.

[mlweb]

Ist das bereits eine Erweiterung? Oder wie und wo finde ich das?

Soweit ich mich grob erinnere ist das eine der css-Dateien des Contao-Frameworks, die ein paar Grid-Klassen zur Verfügung stellt. Wie gesagt ich nutze es nicht. Deshalb, weiss ich nicht wie gut es ausgebaut ist und wie gut sich das für Deine Zwecke nutzen lässt.

PS: Es geht ja dann auch darum, dass das Ganze von Leuten, die noch weniger wissen als ich.... dann aktualisiert werden kann.

Das kommt immer etwas auf die Leute an, die das nacher pflegen sollen.
Am einfachsten für die Pflege sind m.E. spezielle Inhalts-Elemente für den unterschiedlichen Einsatzzweck der Inhaltselemente.
Gut geeignet zum Erstellen solchen Spezialelemente sind z.B. [dma-elementgenerator] oder [rocksolid-custom-elements].
Eine andere Möglichkeit ist der Einsatz von verschieden Templates, die der Redakteur auswählen kann oder aber er muss css-Klassen eintragen oder auswählen. Damit das mit dem Auswählen der css-Klassen klappt gibt es auch eine Erweiterung [Stylepicker4ward].

[manoelo]

am einfachsten ist es 6 Artikel oder Textelemente zu nehmen eine Klasse vergeben
zB .quadrat

mit css links floaten und einer min-height versehen und einer width von 33%

.quadrat{
float:left;
width:33%;
box-sizing:border-box;
min-height: 200px;
background:#ccc;
}
dann noch die Hintergrundfarbe und ein bisschen padding und margin....
schöne Grüße manoelo