Div um Grid und oder Flex

Zitat:

Zitat von MacPix

Ich bin gerne bereit wenn man das in Verschaltlungen mit Artikel machen kann.

Verschachtelungen kannst du mit Elementgruppen machen. Artikel haben keine Verschachtelung.

Zitat:

Zitat von MacPix

Dass ist ja das schöne An COntao die Artikeln mir immeren verschachtlungen wie im Video gezeigt.

Was genau meinst du damit?

Zitat:

Zitat von MacPix

Cool wäre wenn die Gruppenelemente eine Stufe höher wären, dort wo man die Artikel macht...

Eine Idee für zukünftige Contao Versionen ist, dass es Artikel gar nicht mehr gibt, sondern nur mehr Elementgruppen. Also Inhaltselemente werden direkt zu Seiten hinzugefügt und wenn du Verschachtelungen brauchst, nimmst du eine Elementgruppe.

Zitat:

Zitat von MacPix

Ja ich bin schon bereit, wo wobei habe noch. nicht geseehen wie es sonsst geht so wie ich es erklert habe. Wenn ja setzte ich das gerne um ..

Ich bin mir immer noch nicht sicher was du machen möchtest. Poste mal dein gewünschtes HTML Markup, unabhängig von Contao.

Zitat:

Zitat von Spooky

Verschachtelungen kannst du mit Elementgruppen machen. Artikel haben keine Verschachtelung.

Was genau meinst du damit?

Eine Idee für zukünftige Contao Versionen ist, dass es Artikel gar nicht mehr gibt, sondern nur mehr Elementgruppen. Also Inhaltselemente werden direkt zu Seiten hinzugefügt und wenn du Verschachtelungen brauchst, nimmst du eine Elementgruppe.

Ich bin mir immer noch nicht sicher was du machen möchtest. Poste mal dein gewünschtes HTML Markup, unabhängig von Contao.

Wie bitte doch Artikel haben verschachtlungen ... schau dir das Video an ... ist eigentlich genau erklärt

Was genau meinst du mit Verschachtelung?
Ich habe mir alles durchgelesen und auch das Video angeschaut, aber ich verstehe dein Problem noch nicht ganz.
In einer Elementgruppe kannst du Inhaltselemente genauso anlegen wie in einem Artikel. Die Elementgruppe besitzt ein eigenes <div>-Element, das alle darin enthaltenen Elemente umschließt – so kannst du problemlos Grid oder Flexbox verwenden.
Ich finde, Contao bietet bereits genügend HTML-Strukturen, um mit CSS alles flexibel zu gestalten – und das auf eine Weise, die für den Nutzer einfach bleibt.

MacPix, ich vermute, dass du dich da in deiner Denkweise festgefahren hast! Löse dich mal von deinen Vorstellungen, wie das zu funktionieren hat und lies dir all die obigen Beiträge nochmals durch.
Dann gehe her und baue dein Konstrukt nochmals neu auf!

Seite » Artikel » Elementgruppe » Inhaltselement(e): hier können dann z.B Inhaltselemente Text, Galerie, Elementgruppe, Download oder what ever drinnen stehen. In der hier innerhalb genannten Elementgruppe kannst du wieder Inhaltselemente reinpacken ... also alles wunderbar verschachteln.

Mit der Vergabe von Klassen (aber auch ohne diese) kannst du stylen wie und was du willst. Grid oder Flex lässt sich damit ideal umsetzen. Auf unsichtbar setzen kannst du dann ebenfalls immer z.B. über die Elementgruppe

Ja, ich habe dein Video gesehn und deshalb meine ich, dass du dich von deiner Denkweise lösen musst. Denn du sitzt damit fest und erkennst nicht, dass Contao hier ja viel flexibler ist, als du da gerade annimmst.
Gehe mal davon aus, dass bereits 1000te Installationen und Anforderungen ausserhalb deiner Denkweise umgesetzt wurden ;-)

Zitat:

Zitat von Kopfnuss

Was genau meinst du mit Verschachtelung?
Ich habe mir alles durchgelesen und auch das Video angeschaut, aber ich verstehe dein Problem noch nicht ganz.
In einer Elementgruppe kannst du Inhaltselemente genauso anlegen wie in einem Artikel. Die Elementgruppe besitzt ein eigenes <div>-Element, das alle darin enthaltenen Elemente umschließt – so kannst du problemlos Grid oder Flexbox verwenden.
Ich finde, Contao bietet bereits genügend HTML-Strukturen, um mit CSS alles flexibel zu gestalten – und das auf eine Weise, die für den Nutzer einfach bleibt.

In denn Elementgruppen kann man nur eine Tiefe Schachtel machen hab ich doch im Video erklärt. Muss ich noch ein Video machen ?

Zitat:

Zitat von derRenner

MacPix, ich vermute, dass du dich da in deiner Denkweise festgefahren hast! Löse dich mal von deinen Vorstellungen, wie das zu funktionieren hat und lies dir all die obigen Beiträge nochmals durch.
Dann gehe her und baue dein Konstrukt nochmals neu auf!

Seite » Artikel » Elementgruppe » Inhaltselement(e): hier können dann z.B Inhaltselemente Text, Galerie, Elementgruppe, Download oder what ever drinnen stehen. In der hier innerhalb genannten Elementgruppe kannst du wieder Inhaltselemente reinpacken ... also alles wunderbar verschachteln.

Mit der Vergabe von Klassen (aber auch ohne diese) kannst du stylen wie und was du willst. Grid oder Flex lässt sich damit ideal umsetzen. Auf unsichtbar setzen kannst du dann ebenfalls immer z.B. über die Elementgruppe

Ja, ich habe dein Video gesehn und deshalb meine ich, dass du dich von deiner Denkweise lösen musst. Denn du sitzt damit fest und erkennst nicht, dass Contao hier ja viel flexibler ist, als du da gerade annimmst.
Gehe mal davon aus, dass bereits 1000te Installationen und Anforderungen ausserhalb deiner Denkweise umgesetzt wurden ;-)

Ist eben nicht flexibler ... Ein ganzer Artikel im Elementgruppen mit untergruppen wie ein normaler Artikel ... Kannst das zeigen ??

Zitat:

Zitat von MacPix

In denn Elementgruppen kann man nur eine Tiefe Schachtel machen hab ich doch im Video erklärt. Muss ich noch ein Video machen ?

Nein, du kannst da wieder eine Elementgruppe einfügen. Du kannst sogar mit HTML-Elementen unendlich alles verschachteln.
Nur als Denkanstoß: Das Verschachteln von Elementen oder Inhalten erhöht die Komplexität und erschwert die Wartung. Versuche daher, so wenig wie möglich zu verschachteln.

Zitat:

Zitat von Kopfnuss

Nein, du kannst da wieder eine Elementgruppe einfügen. Du kannst sogar mit HTML-Elementen unendlich alles verschachteln.
Nur als Denkanstoß: Das Verschachteln von Elementen oder Inhalten erhöht die Komplexität und erschwert die Wartung. Versuche daher, so wenig wie möglich zu verschachteln.

Also das heisst Elementgruppe und noch eine Elementgruppe für den Artikel ersatz? ok ist ja voll komplizert und das html ? omg ich mache das gerade als test

Liste der Anhänge anzeigen (Anzahl: 1)

Zitat:

Zitat von Kopfnuss

Nein, du kannst da wieder eine Elementgruppe einfügen. Du kannst sogar mit HTML-Elementen unendlich alles verschachteln.
Nur als Denkanstoß: Das Verschachteln von Elementen oder Inhalten erhöht die Komplexität und erschwert die Wartung. Versuche daher, so wenig wie möglich zu verschachteln.

Also du meinst so ??

Zitat:

Zitat von MacPix

Also das heisst Elementgruppe und noch eine Elementgruppe für den Artikel ersatz? ok ist ja voll komplizert und das html ? omg ich mache das gerade als test

Versuche das HTML-Grundgerüst auf ein Minimum zu reduzieren und das Layout mit CSS Grid und Flexbox aufzubauen. Prüfe zuerst, was „out of the box“ funktioniert: Reichen die Default-Eigenschaften von Flexbox oder Grid aus? Super—nutze sie. Wenn nicht, greife bevorzugt zu Grid; damit lässt sich vieles ohne zusätzliche Hilfsklassen lösen.

Als Faustregel:
– Flexbox, wenn der Inhalt die Breite der Box bestimmen soll (z. B. bei Navigationsleisten).
– Grid, wenn du gleich große Karten/Spalten in einem Card-Layout brauchst—hier ist Grid in der Regel die bessere Wahl.

Zitat:

Zitat von MacPix

Also du meinst so ??

Das ist nur eine von vielen Möglichkeiten. Du kannst auch Elementgruppen und Inhaltselemente mischen – das stört Grid oder Flexbox nicht.

Zitat:

Zitat von Kopfnuss

Das ist nur eine von vielen Möglichkeiten. Du kannst auch Elementgruppen und Inhaltselemente mischen – das stört Grid oder Flexbox nicht.

OK and ich und alle... DANKE

Ich versuche in den nechsten Tagen mit der Webseite zu machen und schauen wir wie das dann aussihet. Dass heisst ich mache den Arikel mit Elementgruppen sozusagen selber.

Ich hatte Dir ja weiter oben auch noch den Hinweis auf mein Konferenzvortrag gegeben. Da kommt dann zusätzlich noch subgrid zum tragen. Vielleicht schaust Du Dir so etwas mal an.

Zitat:

Zitat von mlweb

Ich hatte Dir ja weiter oben auch noch den Hinweis auf mein Konferenzvortrag gegeben. Da kommt dann zusätzlich noch subgrid zum tragen. Vielleicht schaust Du Dir so etwas mal an.

Sorry war unterwegs.. Ja danke habe die Links gespeichert und angefangen zu schauen. Das mit Twig ist sehr super, muss noch zu Ende schauen und sicher noch ein zweites mal... danke

Zitat:

Zitat von MacPix

Also du meinst so ??

DA ist doch schon wieder ein Artikel in einem Artikel oder habe ich das falsch gelesen?

Die Frage war ja auch nach einem HMTL wie es gewünscht ist um zu sehen wie es besser geht.

Soweit ich verstanden habe benötigst du grob gesagt diese Struktuk für dein Grid:

HTML-Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <head> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, provident. </p> </div> </head> <main> <div class="main-top"> <h2>Lassen Sie den Alltag hinter sich...</h2> <p> Und geniessen Sie eine entspannende Zeit beim Wellness- & Beautycenter.<br /><br /> Sie neue und innovative Pflegekonzepte, kombiniert mit hochwirksamen und bestens verträglichen Produkten, optimal abgestimmt auf den Hauttyp und Hautzustand jeden Alters.<br /><br /> Hier eine kurze Beschreibung zu den einzelnen Angeboten, genaue Informationen über die speziellen Körper- und Gesichtsbehandlungen sowie die Zeitangaben. </p> </div> <div class="main-grid"> <div id="article-1"></div> <div id="article-2"></div> <div id="article-3"></div> <div id="article-4"></div> <div id="article-5"></div> <div id="article-6"></div> <div id="article-7"></div> <div id="article-8"></div> <div id="article-9"></div> </div> <div class="main-bottom"> <h2>Schreiben Sie uns eine E-Mail über den Link unten</h2> <div> <a href="mailto:max.mustermann@exammple.com" title="E-Mail Wellness- & Beautycenter"> E-Mail </a> </div> </div> </main> <footer> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam blanditiis corrupti quasi modi architecto iste quam doloremque, dignissimos perferendis! Sunt. </p> </footer> </body> </html>

Zitat:

Zitat von MacPix

schaut --- https://www.dropbox.com/scl/fi/fjqa4...=3w0kcdlz&dl=0

Habe es mir angeschaut und so wie ich das verstehe benutzt du einfach nur die Elementguppe NICHT so wie du deinen Hilfsartikel verwendets.

Hallo Zusammen

Ich habe das wie ihr gesagt habt, wenn ich das richtig verstanden habe so gemacht.

HTML-Code:

<div id="article-466" class="mod_article block"> <div class="art_wrapp_inner block mod_article" id="article-446"> <div class="content-width"> <h2 class="box_inner_element content-headline">Neuste Websseiten</h2> <div class="box-grid content-element-group"> <div class="box web content-element-group"> <div class="flex_set box_inner"> <h2 class="content-headline">Wellness- & Beautycenter</h2> <div class="content-text"> <div class="rte"> <p>Das Beautycenter in Zürich Höngg besteht seit 1990. Unsere Parterschaft besteht seit 1992, wo wir für den Wegauftritt und die IT verantworlich.</p> </div> </div> <div class="btn-flex content-element-group"> <div class="btn content-hyperlink"> <a href="/webdesign.html" title="-> mehr">-> mehr</a> </div> <div class="btn content-hyperlink"> <a href="https://wellness-beautycenter.ch/" title="Webseite von Wellness- & Beautycenter" target="_blank" rel="noreferrer noopener">zur Webseite</a> </div> </div> </div> </div> <div class="box web content-element-group"> <div class="flex_set box_inner"> <h2 class="content-headline">Wellness- & Beautycenter</h2> <div class="content-text"> <div class="rte"> <p>Das Beautycenter in Zürich Höngg besteht seit 1990. Unsere Parterschaft besteht seit 1992, wo wir für den Wegauftritt und die IT verantworlich.</p> </div> </div> <div class="btn-flex content-element-group"> <div class="btn content-hyperlink"> <a href="/webdesign.html" title="-> mehr">-> mehr</a> </div> <div class="btn content-hyperlink"> <a href="https://wellness-beautycenter.ch/" title="Webseite von Wellness- & Beautycenter" target="_blank" rel="noreferrer noopener">zur Webseite</a> </div> </div> </div> </div> <div class="box web content-element-group"> <div class="flex_set box_inner"> <h2 class="content-headline">Wellness- & Beautycenter</h2> <div class="content-text"> <div class="rte"> <p>Das Beautycenter in Zürich Höngg besteht seit 1990. Unsere Parterschaft besteht seit 1992, wo wir für den Wegauftritt und die IT verantworlich.</p> </div> </div> <div class="btn-flex content-element-group"> <div class="btn content-hyperlink"> <a href="/webdesign.html" title="-> mehr">-> mehr</a> </div> <div class="btn content-hyperlink"> <a href="https://wellness-beautycenter.ch/" title="Webseite von Wellness- & Beautycenter" target="_blank" rel="noreferrer noopener">zur Webseite</a> </div> </div>

Liste der Anhänge anzeigen (Anzahl: 3)

Also Bild 1 ist im Artikel von ganz vorne.

Bild 2 ist im Box Grid Elementgruppe

Bild 3 im nechsten Elementgruppe als Ersatz meiner kommischen Artikel und mit den Verschachtlungen Head, Text, Linke und so..

so geht es Danke euch Ich hoffe habe es richtig verstanden.

Warum nutzt du denn nun noch ein HTML-Element in der Elementgruppe? Du kannst doch auch die Klasse in der Elementgruppe vergeben?

Zitat:

Zitat von zoglo

Warum nutzt du denn nun noch ein HTML-Element in der Elementgruppe? Du kannst doch auch die Klasse in der Elementgruppe vergeben?

Um die verschachtlungen wie ein normaler Artikel zu haben

Zitat:

Zitat von MacPix

Um die verschachtlungen wie ein normaler Artikel zu haben

Was ist eine Verschachtelung wie ein normaler Artikel?

Zitat:

Zitat von MacPix

Um die verschachtlungen wie ein normaler Artikel zu haben

Diese Aussage macht absolut keinen Sinn.
Oder meinst du die Verschachtelung im Backend bzw. in der Backend-Ansicht?

Zitat:

Zitat von MacPix

Um die verschachtlungen wie ein normaler Artikel zu haben

Was genau meinst du damit?

Bild 3 im nechsten Elementgruppe als Ersatz meiner kommischen Artikel und mit den Verschachtlungen Head, Text, Linke und so.

Hab ich da geschreieben... sonnst muss ich ein Foto machen .. Komme gerad nicht rein weil das update von 5.5 auf 5.6 nicht geht...

Zitat:

Zitat von MacPix

Bild 3 im nechsten Elementgruppe als Ersatz meiner kommischen Artikel und mit den Verschachtlungen Head, Text, Linke und so.

Die Frage war, warum du einen Wrapper als HTML-Inhaltselemente angelegt hast. Wozu brauchst du den?

Zitat:

Zitat von Spooky

Die Frage war, warum du einen Wrapper als HTML-Inhaltselemente angelegt hast. Wozu brauchst du den?

Welchen genau hat mehrere

Zitat:

Zitat von MacPix

Hallo Zusammen

Ich habe das wie ihr gesagt habt, wenn ich das richtig verstanden habe so gemacht.

Hast du dir das mal etwas formatiert angeschaut?

HTML-Code:

<div id="article-466" class="mod_article block"> <div class="art_wrapp_inner block mod_article" id="article-446"> <div class="content-width"> <h2 class="box_inner_element content-headline">Neuste Websseiten</h2> <div class="box-grid content-element-group"> <div class="box web content-element-group"> <div class="flex_set box_inner"> <h2 class="content-headline">Wellness- & Beautycenter</h2> <div class="content-text"> <div class="rte"> <p> Das Beautycenter in Zürich Höngg besteht seit 1990. Unsere Parterschaft besteht seit 1992, wo wir für den Wegauftritt und die IT verantworlich. </p> </div>

Vor allem diesen Teil

HTML-Code:

<div class="box-grid content-element-group"> <div class="box web content-element-group"> <div class="flex_set box_inner">

Eine Box mit Grid mit einer Box mit nichts mit einer Box mit Flex.
Das sieht sehtr Konzeptlos aus. Hast du dir mal eine Struktur ausgedacht, so wie ich in meinem Beitrag, wie du deinen Seiteninhalt aufbauen willst?

Alleine dein Bild 3.png sieht konfus aus: Manueller <div>-Start, nur um eine Klasse zu setzen (was in dem darauf folgendem Textelement auch schon gesetzt werden könnte), dann eine Überschrift zweiter Klasse (h2) welche in dem darauf folgendem Textelement sowieso auch schon mit verfügbar gewesen wäre und dann ein <div>-Ende und das ganze abzuschließen.
Diu siehts also schon dieses 4er-Konstrukt würde in einem einzigen Textelement platz finden.

Wenn das dann steht, dann versuchtst du das mit Elementgruppen und darin enthaltenen Artikeln, Überschriften usw umzusetzen.

Zitat:

Zitat von miniA4kuser

Hast du dir das mal etwas formatiert angeschaut?

HTML-Code:

<div id="article-466" class="mod_article block"> <div class="art_wrapp_inner block mod_article" id="article-446"> <div class="content-width"> <h2 class="box_inner_element content-headline">Neuste Websseiten</h2> <div class="box-grid content-element-group"> <div class="box web content-element-group"> <div class="flex_set box_inner"> <h2 class="content-headline">Wellness- & Beautycenter</h2> <div class="content-text"> <div class="rte"> <p> Das Beautycenter in Zürich Höngg besteht seit 1990. Unsere Parterschaft besteht seit 1992, wo wir für den Wegauftritt und die IT verantworlich. </p> </div>

Vor allem diesen Teil

HTML-Code:

<div class="box-grid content-element-group"> <div class="box web content-element-group"> <div class="flex_set box_inner">

Eine Box mit Grid mit einer Box mit nichts mit einer Box mit Flex.
Das sieht sehtr Konzeptlos aus. Hast du dir mal eine Struktur ausgedacht, so wie ich in meinem Beitrag, wie du deinen Seiteninhalt aufbauen willst?

Alleine dein Bild 3.png sieht konfus aus: Manueller <div>-Start, nur um eine Klasse zu setzen (was in dem darauf folgendem Textelement auch schon gesetzt werden könnte), dann eine Überschrift zweiter Klasse (h2) welche in dem darauf folgendem Textelement sowieso auch schon mit verfügbar gewesen wäre und dann ein <div>-Ende und das ganze abzuschließen.
Diu siehts also schon dieses 4er-Konstrukt würde in einem einzigen Textelement platz finden.

Wenn das dann steht, dann versuchtst du das mit Elementgruppen und darin enthaltenen Artikeln, Überschriften usw umzusetzen.

Grid ist für die Kasten nebeneinander das Flex in den Kasten drin.
H2 ist extra nicht aus dem Text Element..

Das div ist für Grid und dann die weiteren für den Artikel aber jetzt als Gruppenenement

Also diese hohe Anzahl an Verschachtelungen mit Elementgruppen braucht es nicht ...
Alles innerhalb der <div class="box web"> kannst du in ein einziges Inhaltselment Text packen. Und mit entsprechendem Hinzufügen oder entfernen von <p> oder <span> kommst du innerhalb dieses Elementes mit CSS sehr gut zu Rande. Falls notwendig vergib für die tags dann noch eigene Klassen.
Beispiel mit Inhaltselement Text:

HTML-Code:

<div class="box web content-text"> <h2>Wellness- & Beautycenter</h2> <div class="rte"> <p>Das Beautycenter in Zürich Höngg besteht seit 1990. Unsere Parterschaft besteht seit 1992, wo wir für den Wegauftritt und die IT verantworlich.</p> <p> <span> <a title="-> mehr" href="/webdesign.html">-> mehr</a> </span> <span> <a title="Webseite von Wellness- & Beautycenter" href="https://wellness-beautycenter.ch/" target="_blank" rel="noreferrer noopener">zur Webseite</a> </span> </p> </div> </div>

Diese Text-Elemente kannst du, damit du rundherum einen Wrapper bekommst, in einem Inhaltselement Elementgruppe erstellen. Damit sind deine .box.web wiederum mit CSS gut stylebar bzw. anordenbar.
... mehr braucht's nicht

OK ich versuche es so zu baucen - Danke mal schauen ob ich das hinkriege.. ;-)

Zitat:

Zitat von MacPix

Danke mal schauen ob ich das hinkriege.. ;-)

Kriegste hin, ich glaube an dich.

Zitat:

Zitat von MacPix

H2 ist extra nicht aus dem Text Element..

Und warum nicht?

Ich denke du verschachtelst dich in deinen Gedanken. Wenn man dein PDF aus dem ersten Beitrag nimmt, dann würde ich das im Backend so aufbauen:

Code:

1 - Für die Seite ganz normal einen Artikel anlegen der dann zwischen Header und Footer ist 2 - In diesem Artikel dann einen Elementtyp "Text" einbetten: > Die Überschrift h2 eintragen > Den Text eintragen > Als CSS-Klassen "rte-h2 rte-h2-top" eintragen 3 - Darunter dann einen Elementtyp ""Elementgruppe einbetten: > Zur Übericht im Backend als Titel "Grid Container" eintragen > Als CSS-Klasse "grid__container" eintragen 4 - Nun bei der soeben angelegten Elementgruppe auf das Icon für "Kindelemente ... anlegen" klicken > Hier kannst du nun deine Schachteln anlegen indem du in der Kindelementeansicht nun 4.1 - Für jede deiner Gruppierungen (Bild, Überschrift, Link) einen Elementtyp ""Elementgruppe einbetten z.B. 3 Stück (Alternativ nur eines anlegen, bearbeiten und anschließend kopieren und entsprechend nachbearbeiten) > Zur Übericht im Backend als Titel "Grid Item" eintragen > Als CSS-Klasse "grid__item" eintragen 4.2 - Nun in eines der soeben angelegten "Gruppen"-Elementgruppe auf das Icon für "Kindelemente ... anlegen" klicken > Hier kannst du nun deine Gruppierung anlegen indem du in der Kindelementeansicht nun 4.2.1 - Einen Elementtyp "Bild", einen Elementtyp Überschrift und einen Elementtyp "Hyperlink" einbetten, was ja deine Gruppierung ist

Wenn das alles gemacht hast müsste ja dann etwas in der Art herauskommen:

HTML-Code:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="generator" content="Contao Open Source CMS" /> <title>Titel</title> <meta name="robots" content="noindex,nofollow" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no" /> <link rel="stylesheet" href="layout_default.css" /> </head> <body> <main> <div id="article-3" class="mod_article block"> <div class="rte-h2 rte-h2-top content-text"> <h2>Lassen Sie den Alltag hinter sich...</h2> <div class="rte"> <p>Und geniessen Sie eine entspannende Zeit beim Wellness- & Beautycenter.</p> <p> Erleben Sie neue und innovative Pflegekonzepte, kombiniert mit hochwirksamen und bestens verträglichen Produkten, optimal abgestimmt auf den Hauttyp und Hautzustand jeden Alters. </p> <p> Hier eine kurze Beschreibung zu den einzelnen Angeboten, genaue Informationen über die speziellen Körper- und Gesichtsbehandlungen sowie die Zeitangaben. </p> </div> </div> <div class="grid__container content-element-group"> <div class="grid__item content-element-group"> <div class="content-image"> <figure> <img src="/images/gesichtsbehandlung_02-ymr4gh1bswdf8d6.webp" alt="" width="362" height="163" /> </figure> </div> <h2 class="content-headline">Kosmetik</h2> <div class="content-hyperlink"> <a href="/macpix" title="mehr ...">mehr ...</a> </div> </div> <div class="grid__item content-element-group"> <div class="content-image"> <figure> <img src="/images/opi-h-18pd4y8hkgz1v5g.webp" alt="" width="362" height="163" /> </figure> </div> <h2 class="content-headline">Kosmetik</h2> <div class="content-hyperlink"> <a href="/macpix" title="mehr ...">mehr ...</a> </div> </div> <div class="grid__item content-element-group"> <div class="content-image"> <figure> <img src="/images/gesichtsbehandlung_02-ymr4gh1bswdf8d6.webp" alt="" width="362" height="163" /> </figure> </div> <h2 class="content-headline">Kosmetik</h2> <div class="content-hyperlink"> <a href="/macpix" title="mehr ...">mehr ...</a> </div> </div> </div> </div> </main> </body> </html>

Nun noch mit passendem CSS (grob so) designen und dann sollte es doch gehen und du kannst jede Gruppierung ein-/ausblenden usw.:

HTML-Code:

.rte-h2 { margin: 0; padding: 0; } .rte-h2 h2 { font-family: "beauty_mountains"; margin: 0 auto; } .rte-h2 p { margin-bottom: 16px; } .rte-h2-top { max-width: 875px; margin: 0 auto; } .rte-h2-top h2 { margin-bottom: 30px; } .grid__container { max-width: 1475px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); gap: 1em; } .grid__item { color: hsl(0, 0%, 95%); background-color: hsl(0, 0%, 26%); border-radius: 7px; display: flex; flex-direction: column; flex-wrap: inherit; justify-content: space-evenly; align-items: center; padding: 30px; } .grid__item img { max-width: 100%; height: auto; }

Zitat:

Zitat von miniA4kuser

Und warum nicht?

Ich denke du verschachtelst dich in deinen Gedanken. Wenn man dein PDF aus dem ersten Beitrag nimmt, dann würde ich das im Backend so aufbauen:

Code:

1 - Für die Seite ganz normal einen Artikel anlegen der dann zwischen Header und Footer ist 2 - In diesem Artikel dann einen Elementtyp "Text" einbetten: > Die Überschrift h2 eintragen > Den Text eintragen > Als CSS-Klassen "rte-h2 rte-h2-top" eintragen 3 - Darunter dann einen Elementtyp ""Elementgruppe einbetten: > Zur Übericht im Backend als Titel "Grid Container" eintragen > Als CSS-Klasse "grid__container" eintragen 4 - Nun bei der soeben angelegten Elementgruppe auf das Icon für "Kindelemente ... anlegen" klicken > Hier kannst du nun deine Schachteln anlegen indem du in der Kindelementeansicht nun 4.1 - Für jede deiner Gruppierungen (Bild, Überschrift, Link) einen Elementtyp ""Elementgruppe einbetten z.B. 3 Stück (Alternativ nur eines anlegen, bearbeiten und anschließend kopieren und entsprechend nachbearbeiten) > Zur Übericht im Backend als Titel "Grid Item" eintragen > Als CSS-Klasse "grid__item" eintragen 4.2 - Nun in eines der soeben angelegten "Gruppen"-Elementgruppe auf das Icon für "Kindelemente ... anlegen" klicken > Hier kannst du nun deine Gruppierung anlegen indem du in der Kindelementeansicht nun 4.2.1 - Einen Elementtyp "Bild", einen Elementtyp Überschrift und einen Elementtyp "Hyperlink" einbetten, was ja deine Gruppierung ist

Wenn das alles gemacht hast müsste ja dann etwas in der Art herauskommen:

HTML-Code:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="generator" content="Contao Open Source CMS" /> <title>Titel</title> <meta name="robots" content="noindex,nofollow" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no" /> <link rel="stylesheet" href="layout_default.css" /> </head> <body> <main> <div id="article-3" class="mod_article block"> <div class="rte-h2 rte-h2-top content-text"> <h2>Lassen Sie den Alltag hinter sich...</h2> <div class="rte"> <p>Und geniessen Sie eine entspannende Zeit beim Wellness- & Beautycenter.</p> <p> Erleben Sie neue und innovative Pflegekonzepte, kombiniert mit hochwirksamen und bestens verträglichen Produkten, optimal abgestimmt auf den Hauttyp und Hautzustand jeden Alters. </p> <p> Hier eine kurze Beschreibung zu den einzelnen Angeboten, genaue Informationen über die speziellen Körper- und Gesichtsbehandlungen sowie die Zeitangaben. </p> </div> </div> <div class="grid__container content-element-group"> <div class="grid__item content-element-group"> <div class="content-image"> <figure> <img src="/images/gesichtsbehandlung_02-ymr4gh1bswdf8d6.webp" alt="" width="362" height="163" /> </figure> </div> <h2 class="content-headline">Kosmetik</h2> <div class="content-hyperlink"> <a href="/macpix" title="mehr ...">mehr ...</a> </div> </div> <div class="grid__item content-element-group"> <div class="content-image"> <figure> <img src="/images/opi-h-18pd4y8hkgz1v5g.webp" alt="" width="362" height="163" /> </figure> </div> <h2 class="content-headline">Kosmetik</h2> <div class="content-hyperlink"> <a href="/macpix" title="mehr ...">mehr ...</a> </div> </div> <div class="grid__item content-element-group"> <div class="content-image"> <figure> <img src="/images/gesichtsbehandlung_02-ymr4gh1bswdf8d6.webp" alt="" width="362" height="163" /> </figure> </div> <h2 class="content-headline">Kosmetik</h2> <div class="content-hyperlink"> <a href="/macpix" title="mehr ...">mehr ...</a> </div> </div> </div> </div> </main> </body> </html>

Nun noch mit passendem CSS (grob so) designen und dann sollte es doch gehen und du kannst jede Gruppierung ein-/ausblenden usw.:

HTML-Code:

.rte-h2 { margin: 0; padding: 0; } .rte-h2 h2 { font-family: "beauty_mountains"; margin: 0 auto; } .rte-h2 p { margin-bottom: 16px; } .rte-h2-top { max-width: 875px; margin: 0 auto; } .rte-h2-top h2 { margin-bottom: 30px; } .grid__container { max-width: 1475px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); gap: 1em; } .grid__item { color: hsl(0, 0%, 95%); background-color: hsl(0, 0%, 26%); border-radius: 7px; display: flex; flex-direction: column; flex-wrap: inherit; justify-content: space-evenly; align-items: center; padding: 30px; } .grid__item img { max-width: 100%; height: auto; }

DANKEEEEE wow ich versuche dies so wie Ihr beiden oder eher alle sagen umzubauen. Brauch leider da bisschen Zeit, da ich nicht der Profi bin wie ihr…

Ich sehe da kann man einiges an divs sparen. Muss auch viel umbauchen ;-) DANKE

UND AN ALLE HIER

DANKE - DANKE - DANKE

Und jetzt modifiziere dir noch das Element-Group Template und spare dir eine weitere Verschachtelung im Backend, da dies über das Element-Group Template das Grid außerhalb setzen würde (Gedankenexperiment).

Zitat:

Zitat von MacPix

... da ich nicht der Profi bin wie ihr…

Das macht mich jetzt leicht sprachlos - auf Deiner eigenen Website wirbst Du mit "Webdesign aus Leidenschaft" und schreibst weiter "Als unsere Kernaufgabe sind wir fokusiert speziell auf effiziente und optimierter Quellcode-Programmierung.", da erwarte ich einen Profi - übrigens erwarte ich das unabhängig vom Text auf der eigenen Webseite von jedem der Webdesign professionell anbietet.

Zitat:

Zitat von mlweb

Das macht mich jetzt leicht sprachlos - auf Deiner eigenen Website wirbst Du mit "Webdesign aus Leidenschaft" und schreibst weiter "Als unsere Kernaufgabe sind wir fokusiert speziell auf effiziente und optimierter Quellcode-Programmierung.", da erwarte ich einen Profi - übrigens erwarte ich das unabhängig vom Text auf der eigenen Webseite von jedem der Webdesign professionell anbietet.

Die Seiten sind auch im umbau, mit den div war es füher anders und wenn man noch eine farbe als Hintergrund hatte mir Float dann weisst was ich meine. Klar gibt es grid/Flex nicht seit gestern. Das mit Profi mente ich auch auf Contao. Ist es auch alles zum Detail immer wieder neues und sauber aufbauen. Aber denke das gehört nicht hier in den Chat hier.

Zitat:

Zitat von MacPix

DANKEEEEE wow ich versuche dies so wie Ihr beiden oder eher alle sagen umzubauen. Brauch leider da bisschen Zeit, da ich nicht der Profi bin wie ihr…

Ich sehe da kann man einiges an divs sparen. Muss auch viel umbauchen ;-) DANKE

Na dann warten wir mal auf deine Rückmeldung wie es so geklappt hat.

Muss kurz schreiben ...

Ihr mit euren Gruppenelement in Contao.... Muss sagen einfach HAMMER COOL
Bin die ganze Webpage am ändern, ich brauche keine Templates mehr und weitere schöne Vorteile...
(Habe das mit Gruppenelemente in Contao gar nicht so gesehen)

DANKEEEEEEEE euch allen...

PS seit ihr sicher dass die Gruppenelemente weiter kommen? so kann ich weiter Pages so anpassen-