Darstellungsfehler? Simple Columns bei Contao 3.5.

**rauel** · 24.11.2016, 09:25

Ich versuche eine bestimmtes Layout für ein Kundenprojekt mit dem Simple_Columns darzustellen.
Zu sehen in der Grafik
screen-grid-layout.jpg

Ist dieses Layout überhaupt machbar? Denn ich bekomme es nicht hin. Ich erreiche es nicht, dass neben dem großen Bild 2 Zeilen (Tabelle und Fließtext) untereinander plaziert werden.

Hat jemand eine Lösung?

Anbei der Link zur Kundenwebseite: http://www.diva-escort.de/Contao/esc...oto-gross.html

Ich möchte den Fließtext unter die Tabelle setzten!

**Spooky** · 24.11.2016, 09:51

Zitat von rauel

Ist dieses Layout überhaupt machbar? Denn ich bekomme es nicht hin. Ich erreiche es nicht, dass neben dem großen Bild 2 Zeilen (Tabelle und Fließtext) untereinander plaziert werden.

Das ist eine Zeile mit zwei Spalten. Und in der zweiten Spalte fügst du einfach nacheinander deine jeweiligen Inhalte ein.

**rauel** · 24.11.2016, 10:15

Zitat von Spooky

Das ist eine Zeile mit zwei Spalten. Und in der zweiten Spalte fügst du einfach nacheinander deine jeweiligen Inhalte ein.

Ja es klingt so einfach. Das große Bild habe ich mit 2-spaltig und bei Spaltenhöhe "Spalte umfasst zwei Elemente" eingeben.

Schau wie es im Backend angezeigt wird.

screen-details-backend.jpg

Der Text ruscht nicht unter die Tabelle.

Ich habe schon einiges ausprobiert und ich glaube mit der Erweiterung simple_columns geht es nicht!!

**dazzle89** · 24.11.2016, 10:19

Ich weiß nicht ob das mit Simple Columns geht, aber wenn ja, hast du vielleicht etwas falsch eingestellt. Wenn man sich zumindest die kleinen Icons / Kästchen ansieht, die sind beim Text und Bild gleich.

Mit Rocksolid Columns lässt es sich definitiv umsetzen.

**rauel** · 24.11.2016, 10:29

Zitat von dazzle89

Ich weiß nicht ob das mit Simple Columns geht, aber wenn ja, hast du vielleicht etwas falsch eingestellt. Wenn man sich zumindest die kleinen Icons / Kästchen ansieht, die sind beim Text und Bild gleich.

Mit Rocksolid Columns lässt es sich definitiv umsetzen.

Ja im Backend sieht es falsch aus obwohl ich beim Text nichts eingestellt habe weil er die Spalteneinstellung sowieso ignoriert.
Wenn ich im Backend die Positionen vertausche, da ja eigentlich logischerweise erst die Tabelle und dann der Text plaziert werden soll wird es noch unlogischer dargestellt.
screen-details-text.jpg

Im Erweiterungsverwaltung steht auch dass die Simple_colums nicht erprobt sind für Contao 3.5.3!

**Spooky** · 24.11.2016, 10:29

Achso ja, stimmt, ich glaube sowas kann man mit simple_columns nicht umsetzen.

**tab** · 24.11.2016, 10:33

So wie das HTML jetzt ist, kann es nicht funktionieren. Jedenfalls nicht, wenn du den Text meinst, der momentan unter dem Bild steht. Der Text und das Bild stehen in einem Container, die Tabelle in einem anderen. Eigentlich sollten dann wohl in dem zweiten Container das ce_table und das ce_text mit dem Fliesstext stehen.

**dazzle89** · 24.11.2016, 10:35

Liegt nicht an der Contao-Version, ich glaube das geht einfach nicht.

Bei Rocksolid Column hast du Spalten und Umschläge (du wirst beides davon brauchen). Kann man als wrapper betrachten bzw. Start- und End-Elemente und du gibst an, wie breit diese sind und welche Inhalte sich darin befinden. Egal wie viele. Würde ich mal testen an deiner Stelle.

Edit:

Der zweite Screenshot auf https://rocksolidthemes.com/de/conta.../dokumentation zeigt, wie es funktionieren würde. Die Spalten brauchst du, wenn sich mehr als 1 Inhaltselement in der Spalte befinden sollen. Anderenfalls braucht man nur den Umschlag.

**rauel** · 24.11.2016, 10:38

Zitat von Spooky

Achso ja, stimmt, ich glaube sowas kann man mit simple_columns nicht umsetzen.

Ich habe mir die Erweiterung Rocksolid Colums installiert.
Da arbeitet man mit Spaltenumschläge.
Gibt es dazu eine Hilfestellung oder ein Video wie ich die Umsetzung mache?

**dazzle89** · 24.11.2016, 10:39

Siehe mein letzter Post^^

**dazzle89** · 24.11.2016, 10:41

Ich denke dass du folgenden Aufbau bräuchtest:

Umschlag Start

Bild

Spalte Anfang

Tabelle

Text

Spalte Ende

Umschlag Ende

**tab** · 24.11.2016, 10:44

Eben, die Tabelle und der Text sollten halt schon in der selben Spalte stehen. Ob jetzt bei den Rocksolid oder den simple columns.

**rauel** · 24.11.2016, 10:47

Zitat von dazzle89

Ich denke dass du folgenden Aufbau bräuchtest:

Umschlag Start

Bild

Spalte Anfang

Tabelle

Text

Spalte Ende

Umschlag Ende

Ich werde es versuchen ;-) Danke für die Hilfe.

**rauel** · 24.11.2016, 10:52

Zitat von tab

Eben, die Tabelle und der Text sollten halt schon in der selben Spalte stehen. Ob jetzt bei den Rocksolid oder den simple columns.

ja aber ich bekomme es nicht mit simple_columns hin.
Mag sein dass ich eine falsche Einstellung wähle, für mich ist es etwas unlogisch dass nur von Spalten die Rede ist und nicht von Zeilen..................

**tab** · 24.11.2016, 10:59

Will ich jetzt auch nicht ausschliessen, dass es mit den simple columns nicht geht, weil ich die noch nie benutzt habe. Sieht aber für mich erst mal nicht so aus, weil es dir ja offenbar möglich war, zwei Inhaltselemente in eine Spalte zu packen, nämlich Bild und darunterstehenden Fliesstext. Die stehen in einem gemeinsamen Container. Mach das so mit Tabelle und Fliesstext und du bist fertig. Wie du das gemacht hast und wie du es machen müsstest weiss ich nicht, weil ich mit der Erweiterung keine Erfahrung habe. Eventuell musst du die Reihenfolge der Elemente ändern und/oder die Spalteneinstellung oder was auch immer.

**rauel** · 24.11.2016, 11:00

Zitat von tab

So wie das HTML jetzt ist, kann es nicht funktionieren. Jedenfalls nicht, wenn du den Text meinst, der momentan unter dem Bild steht. Der Text und das Bild stehen in einem Container, die Tabelle in einem anderen. Eigentlich sollten dann wohl in dem zweiten Container das ce_table und das ce_text mit dem Fliesstext stehen.

genau der Fließtext der im Moment unter dem Bild dargestellt wird soll unter die Tabelle.
Was muss ich denn dann für Einstellungen im Backend bei den Spalteneinstellungen machen?

Kannst du mir das genau sagen?

Das große Bild ist 2-spaltig und Spalte umfasst zwei Spalten...
was muss ich bei den anderen folgenden angeben?

**dazzle89** · 24.11.2016, 11:08

Ich würde behaupten dass es nicht geht... weil du dort keine Umschläge hast.

**tab** · 24.11.2016, 11:11

Ohne die Erweiterung zu kennen würde ich nach deiner Erläuterung sagen:
Bild: zweispaltig, 1 Element
Tabelle: zweispaltig (rechte Spalte), 2 Elemente

**rauel** · 24.11.2016, 11:16

Zitat von dazzle89

Ich würde behaupten dass es nicht geht... weil du dort keine Umschläge hast.

ich glaube es auch, weil ich so viel versucht habe und ich es nicht schaffe mit den Einstellmöglichkeiten die mir Contao vorgibt.

Ich werde es mit Rocksolid versuchen, und so wie du es mir erklärt hast.
Kannst du mir noch erklären welche Spaltenkonfiguration ich beim Umschlag machen muss?

Desinstalliere ich dann am besten vorher die simple_columns?

Vielen Dank...

**tab** · 24.11.2016, 11:18

Es scheint ja sehr wohl Umschläge zu geben, wenn auch eventuell nicht explizit. Das HTML sieht (sah) ja so aus:

HTML-Code:

<div class="sc sc2 sc-count10 sc-first sc2-first">
   <div class="ce_image block">
      <figure class="image_container">
          <a href="files/theme_files_q/content_images/Galerie/lucie%201005.jpg" data-lightbox="acb2a0">
             <img src="files/theme_files_q/content_images/Galerie/lucie%201005.jpg" width="1000" height="1500" alt="">
          </a>
      </figure>
   </div>
   <div class="ce_text block sc sc2 sc-count12 sc-last sc2-last sc-close">
      ...
   </div>
</div>

**dazzle89** · 24.11.2016, 11:19

Musst du nicht deinstallieren.

Ich würde es bei jeder Spalten-Einstellung mit einer 2 erstmal versuchen. Bzw. bei Tablet und/oder Mobile eine 1, wenn du es da untereinander haben willst

**rauel** · 24.11.2016, 11:25

Zitat von dazzle89

Musst du nicht deinstallieren.

Ich würde es bei jeder Spalten-Einstellung mit einer 2 erstmal versuchen. Bzw. bei Tablet und/oder Mobile eine 1, wenn du es da untereinander haben willst

Danke ich werde es testen und wenns nicht klappt melde ich mich noch einmal.

**rauel** · 24.11.2016, 11:26

Zitat von tab

Ohne die Erweiterung zu kennen würde ich nach deiner Erläuterung sagen:
Bild: zweispaltig, 1 Element
Tabelle: zweispaltig (rechte Spalte), 2 Elemente

danke habe ich probiert, aber geht nicht!

**tab** · 24.11.2016, 11:26

Ansonsten, ja, scheint wirklich zu gehen mit simple_columns, siehe hier:
https://community.contao.org/de/show...l=1#post145067

**dazzle89** · 24.11.2016, 11:31

Zitat von tab

Ansonsten, ja, scheint wirklich zu gehen mit simple_columns, siehe hier:
https://community.contao.org/de/show...l=1#post145067

Ja, vermutlich indem er beim Bild eine Spaltenhöhe von 2 vergibt?

**mlweb** · 24.11.2016, 11:51

Vielleicht wenig hilfreich, aber an dieser Stelle weiss ich immer, warum ich keinerlei Grid-Systeme benutze und lieber die Lösung individuell von Hand Code.

@rauel
Ganz grundsätzlich kann man jedes Layout mit css umsetzen.

Unabhängig von Deiner jetzigen Lösung mit simple_colums oder irgendeinem anderen Grid-System schau Dir doch mal das Flexboxmodell an. Es ist für solche Layouts m.E. hervorragend geeignet.

**dazzle89** · 24.11.2016, 12:09

Zitat von mlweb

Vielleicht wenig hilfreich, aber an dieser Stelle weiss ich immer, warum ich keinerlei Grid-Systeme benutze und lieber die Lösung individuell von Hand Code.

@rauel
Ganz grundsätzlich kann man jedes Layout mit css umsetzen.

Unabhängig von Deiner jetzigen Lösung mit simple_colums oder irgendeinem anderen Grid-System schau Dir doch mal das Flexboxmodell an. Es ist für solche Layouts m.E. hervorragend geeignet.

Darf ich fragen, wie du das für die Redakteure gestaltest? Müssen die CSS-Klassen bei den Inhaltselemtenten/Artikeln eingeben? Oder eigenen HTML-Code drum herum bauen?

**mlweb** · 24.11.2016, 12:21

Bisher habe ich das unterschiedlich gelöst. Für Redakteuere haben sich die Rocksolid Custom Elements an dieser Stelle bestens bewährt.
Alternativ hatte ich mit css-Klassen und der Erweiterung [Stylepicker4ward] bzw. der Auswahl unterschiedlicher Templates experimentiert.
Hängt allerdings auch ein bisschen vom Projekt selbst ab.
Da viele meiner kleinen Kunden im Endeffekt zwar vor haben Ihre Seite selbst zu pflegen, es im Endeffekt aber entweder gar nicht oder nur sehr sporadisch tun, mangelt es mir an dieser Stelle allerdings an aussagekräftgen "Messpunkten".

**rauel** · 24.11.2016, 16:18

Zitat von mlweb

Vielleicht wenig hilfreich, aber an dieser Stelle weiss ich immer, warum ich keinerlei Grid-Systeme benutze und lieber die Lösung individuell von Hand Code.

@rauel
Ganz grundsätzlich kann man jedes Layout mit css umsetzen.

Unabhängig von Deiner jetzigen Lösung mit simple_colums oder irgendeinem anderen Grid-System schau Dir doch mal das Flexboxmodell an. Es ist für solche Layouts m.E. hervorragend geeignet.

Danke für Deinen Beitag. Ich habe die Darstellung nun mit den Rocksolid Columns erreicht. Was mir mit den simple_columns nicht möglich war. Das ging jetzt schnell.

**Samson1964** · 25.11.2016, 11:07

Mit simple_columns sollte das ganz sicher umsetzbar sein. Ich arbeite täglich mit der Erweiterung. Wenn ich nachher am PC sitze, poste ich die Einstellungen.

Gesendet von meinem L52 mit Tapatalk

**Samson1964** · 25.11.2016, 11:18

Mit simple_columns wird das so umgesetzt:

Bild --- Spalten: 2-spaltig
Tabelle --- Spalten: 2-spaltig, Spaltenhöhe: Spalte umfasst 2 Elemente
Text --- keine Spalteneinstellungen erforderlich

Text --- Spalten: 4-spaltig über 2 Spalten
Bild --- Spalten: 4-spaltig
Bild --- Spalten: 4-spaltig

Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig

Statt "Bilder" würde ich eine vierspaltige Galerie machen. Außerdem kann es sein das Du nach dem "Text" ohne Spalteneinstellungen ein Clearing machen mußt, falls die nächste Zeile in die erste Zeile mit reinrutschen sollte.

**rauel** · 28.11.2016, 17:27

Zitat von Samson1964

Mit simple_columns wird das so umgesetzt:

Bild --- Spalten: 2-spaltig
Tabelle --- Spalten: 2-spaltig, Spaltenhöhe: Spalte umfasst 2 Elemente
Text --- keine Spalteneinstellungen erforderlich

Text --- Spalten: 4-spaltig über 2 Spalten
Bild --- Spalten: 4-spaltig
Bild --- Spalten: 4-spaltig

Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig

Statt "Bilder" würde ich eine vierspaltige Galerie machen. Außerdem kann es sein das Du nach dem "Text" ohne Spalteneinstellungen ein Clearing machen mußt, falls die nächste Zeile in die erste Zeile mit reinrutschen sollte.

Super Danke Dir, für mich am besten erklärt :-)

**rauel** · 29.11.2016, 16:13

Zitat von rauel

Super Danke Dir, für mich am besten erklärt :-)

also ich wollte es nun wissen ob es Dank Deiner guten Erklärung geht.

Leider nicht :-( es wird alles untereinander platziert......

http://www.diva-escort.de/Contao/esc...e_columns.html

screen-details-spalten.jpg

obwohl es im Backend richtig aussieht.

**rauel** · 29.11.2016, 17:59

Zitat von Samson1964

Mit simple_columns wird das so umgesetzt:

Bild --- Spalten: 2-spaltig
Tabelle --- Spalten: 2-spaltig, Spaltenhöhe: Spalte umfasst 2 Elemente
Text --- keine Spalteneinstellungen erforderlich

Text --- Spalten: 4-spaltig über 2 Spalten
Bild --- Spalten: 4-spaltig
Bild --- Spalten: 4-spaltig

Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig
Bilder --- Spalten: 4-spaltig

Statt "Bilder" würde ich eine vierspaltige Galerie machen. Außerdem kann es sein das Du nach dem "Text" ohne Spalteneinstellungen ein Clearing machen mußt, falls die nächste Zeile in die erste Zeile mit reinrutschen sollte.

also ich wollte es nun wissen ob es Dank Deiner guten Erklärung geht.

Leider nicht :-( es wird alles untereinander platziert......

http://www.diva-escort.de/Contao/esc...e_columns.html

screen-details-spalten.jpg

obwohl es im Backend richtig aussieht.

**Samson1964** · 29.11.2016, 18:17

Wo kommt denn

HTML-Code:

<div class="sc-clear"></div>

her?
Entfernt man diesen Code stimmt alles. Zur Zeit wird nach jedem Element gecleart, womit die Elemente alle untereinander sind.

EDIT: Wahrscheinlich hast Du in allen Elementen "Zeile manuell schließen" angeklickt.

**rauel** · 01.12.2016, 10:36

Guten Morgen,

ja nach jedem Bild wird ein clearing gemacht...

Obwohl ich im Backend nirgends eine Zeile manuel geschlossen habe.

Ich habe aber jetzt gesehen, dass er durch die Erweiterung der Rocksolid_columns folgende style übernommen hat

.sc-clear {
clear:left;
}

----ich muss sagen, dass mir nicht klar ist warum z.B. wenn ich eine Erweiterung installiere die neuen Styles dazu nicht im Backend finde.
Ich bekomme sie im Firebug angezeigt aber im Backend sind nur meine Styles zu finden---- das ist für mich unlogisch :-(

ich verzweifel bald, denn jetzt klappt es auch mit dem clear:none; immer noch nicht korrekt. Habe jetzt zwei Varianten.

http://www.diva-escort.de/Contao/start.html

http://www.diva-escort.de/Contao/esc...e_columns.html
(diese Darstellung sieht fast gut aus bis auf den "Text Extras zur Dame")

wenn du sicher bist , dass ich das Layout mit den Simple_columns hinbekomme, schmeiße ich die Rocksolid_columns wieder raus.
Ich fange wieder ganz von vorne an. Leider blicke ich nichts mehr :-(((

**Spooky** · 01.12.2016, 10:54

Zitat von rauel

Ich habe aber jetzt gesehen, dass er durch die Erweiterung der Rocksolid_columns folgende style übernommen hat

.sc-clear {
clear:left;
}

Das kommt von simple_columns, nicht von RockSolid Columns.

Zitat von rauel

----ich muss sagen, dass mir nicht klar ist warum z.B. wenn ich eine Erweiterung installiere die neuen Styles dazu nicht im Backend finde.
Ich bekomme sie im Firebug angezeigt aber im Backend sind nur meine Styles zu finden---- das ist für mich unlogisch :-(

Erweiterungen binden ihre Stylesheets direkt ein. Interne Stylesheets werden in der Regel nie von irgendwelchen Erweiterungen angelegt.

Zitat von rauel

Am besten ich setze in meinem Style das

.sc-clear {
clear:none;
}

Das würde ich nicht machen.

Seid ihr euch sicher, dass man sein Vorhaben mit simple_columns umsetzen kann?

**dazzle89** · 01.12.2016, 11:02

Mit simple columns kann man eine Zeile doch nicht manuell schließen? Du meinst wohl Rocksolid?

Kann es auch sein, dass du beide Erweiterungen am laufen hast und auch beide verwendest, indem du z.B Umschläge von Rocksolid einbaust und zusätzlich noch Spalteneinstellungen von simple columns?

Ich denke, dass sein Vorhaben mit beiden Erweiterungen möglich ist. Bei simple columns ist die "Spaltenhöhe" in seinem Fall das entscheidende.

**Andreas** · 01.12.2016, 11:36

Zitat von Spooky

Seid ihr euch sicher, dass man sein Vorhaben mit simple_columns umsetzen kann?

Habe ich gerade mal probiert, funktionierte sofort.

Bei simple_columns würde mir allerdings die Einstellung für kleinere Viewports fehlen, deswegen setze ich auf dma_simple_grid mit unsemantic.

**rauel** · 01.12.2016, 12:06

Zitat von dazzle89

Mit simple columns kann man eine Zeile doch nicht manuell schließen? Du meinst wohl Rocksolid?

? ich denke ja, aber wie soll ich das im Element sehen ob ich mit Rocksolid oder simple arbeite? :-(

Kann es auch sein, dass du beide Erweiterungen am laufen hast und auch beide verwendest, indem du z.B Umschläge von Rocksolid einbaust und zusätzlich noch Spalteneinstellungen von simple columns?

--- ja dass hatte ich in einem Layout versucht!

Ich denke, dass sein Vorhaben mit beiden Erweiterungen möglich ist. Bei simple columns ist die "Spaltenhöhe" in seinem Fall das entscheidende.

okay, ich werde mich für simple_columns entscheiden und die Rocksolid wieder rausschmeissen