Problem mit Display Flex

[Maik-Dobbertin]

Hallo liebe Contao Community,
ich versuche eine Webseite aufzubauen ganz ohne float das gelingt mir aber nicht ich habe versucht den main Container und den right-container mit Display Flex nebeneinander zu bekommen. Das gelingt mir überhaupt nicht. Wenn ich die Seite als html Seite mit CSS in Visual Studio Code gestalte dann funktioniert das ohne Probleme. Aber in Conato nicht, ich weiß das liegt bestimmt an der
FE-Page wahrscheinlich.
Und wenn ich im CSS Framework alles deaktiviere hab ich in der Menüleiste Navigation überspringen stehen und ich weiß nicht warum. ich muss dazu sagen ich hab das letzte mal vor 6 Jahren ein kleines Projekt mit Contao umgesetzt.

Das aktuelle Projekt hat eine Hauptspalte und eine rechte Spalte Header und der Footer funktionieren ohne Probleme, noch jedenfalls.

Das wäre nett wenn irgendjemand helfen könnte damit ich das Problem lösen kann und nicht mehr auf die alte float Variante zurückgreifen muss.

die Seite läuft erstmal nur lokal auf einem Testsystem

[mlweb]

display: flex ist eher gedacht für eindimensional Ausrichtung. Man kann es zwar auch für zweidimensionale Dinge benutzen, aber seit dem alle modernen Browser CSS-Grid unterstützen, nutze ich für das "globale Layout" in der Regel CSS-Grid mit Platzierung im jeweiligen Bereich.
Vielleicht schaust Du mal, ob das für Dich nicht auch eine Möglichkeit wäre.

https://css-tricks.com/snippets/css/...te-guide-grid/
https://kulturbanause.de/blog/css-grid-layout-module/

[zoglo]

Die internen CSS-Dateien von Contao sorgen dafür, dass gewisse Sachen ausgeblendet werden (wie z.B. Navigation überspringen).
Du solltest die "Layout" .css abwählen.

Was das Layout mit linker / rechter und einer Hauptspalte angeht, hier empfehle ich folgende Links:
- https://web.dev/one-line-layouts/

Wenn du etwas fertiges zum Flexbox "Layouting" haben möchtest, empfehle ich dir mal in diese SCSS reinzuschauen.

#container { display: flex }

und mit Media-query ab wann auch immer...

#container {flex-direction: row }
#main { width: calc(100% - *deine width von deiner rechten oder linken spalte oder beide zusammenaddiert ) }
#left, #right { width: deine width, welche du für diese haben willst}

Bei der Contao-Konferenz wird es hierzu auch einen Vortrag geben, ich empfehle aber grundsätzlich auf ein Framework zu setzen, bei welchem sich Leute schon Gedanken gemacht haben.

- - - Aktualisiert - - -

display: flex ist eher gedacht für eindimensional Ausrichtung. Man kann es zwar auch für zweidimensionale Dinge benutzen, aber seit dem alle modernen Browser CSS-Grid unterstützen, nutze ich für das "globale Layout" in der Regel CSS-Grid mit Platzierung im jeweiligen Bereich.
Vielleicht schaust Du mal, ob das für Dich nicht auch eine Möglichkeit wäre.

https://css-tricks.com/snippets/css/...te-guide-grid/
https://kulturbanause.de/blog/css-grid-layout-module/

Flexbox-Grid hat seine Vorteile, daher würde ich es nicht ausschließen

[planepix]

Gute Erfahrung habe ich mit diesen beiden Grid Erweiterungen gemacht:

https://github.com/clickpress/contao-clickpress-grid
https://github.com/erdmannfreunde/contao-grid-bundle

Am besten eine Test-Installation erstellen und mal damit „experimentieren”.

[Maik-Dobbertin]

Danke für die zahlreichen Hilfestellung. Aber das Problem besteht weiterhin. Ich weiß allerdings nicht wieso ich hab es mit Grit probiert aber auch das funktioniert nicht die Container halbieren sich zwar aber liegen immer noch untereinander ich kopier euch einfach mal den CSS Code hinein vielleicht habe ich auch noch etwas vergessen und einen Screenshot wie die Seite jetzt aussieht

 

#container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Teilt den Platz in zwei gleichgroße Spalten auf */
}

#main {
  background-color: blue;
}


/**/
#costum-right {
  background-color: yellow;
  border-left: 6px solid red; /* Roter Rahmen um den Container */

[mlweb]

Wenn Du die fe_page.html5 nicht angepasst hast und mit dem Standardlayout von Contao arbeitest - also Auswahl im Backend für die rechte Spalte und Fußzeile, dann müsste es wohl
#right heißen und nicht #custom-right

Ansonsten - ein Link zur Seite wäre hilfreich.
Ich nehme mal stark an, dass das nicht das ganze CSS ist und damit kann natürlich alles mögliche Probleme bereiten.

Kleiner Nachtrag: Eine schließende Klammer fehlt auch noch - könnte aber ein Fehler beim Kopieren fürs Forum sein.

[Maik-Dobbertin]

Guten Morgen,
ja die Klammer hab ich tatsächlich vergessen mit zu kopieren. Ich habe einfach oben im Template bei Zeilen und Spalten einfach das leere Blatt ausgewählt. Es gibt nämlich in Youtube einige Videos die vermitteln dass man bei Contao ein Template ohne Spalten und Zeilen anlegen sollte. Man soll so frei in der Gestaltung der Website sein und ich wollte das mal ausprobieren ich habe dann quasi meine eigenen Layoutbereiche festgelegt das ging ja früher schon sehr gut und habe mir nichts dabei gedacht. Daher auch die Bezeichnung costum right wie gesagt die Seite funktioniert ja außer das mit der rechten Spalte geht halt nicht. Wenn ich den CSS Framework layoutbilder und responsive Design aktiviere und ihm sage die rechte Spalte soll 20% haben bei Spalte und Zeilen dann geht es ja. Aber dann hab ich auch wieder float right drinne was ich halt nicht wollte ich möchte gern die alte css Sprache außen vor lassen und das mit Grid oder Flex gestalten. Ich seite kann ich leider nicht zeigen weil sie auf einem Testserver läuft der nicht im Internet ist

[mdoll]

Hallo liebe Contao Community,
Und wenn ich im CSS Framework alles deaktiviere hab ich in der Menüleiste Navigation überspringen stehen und ich weiß nicht warum.

Das ist ein Skip-Link der Navigation und ist standardmäßig in jedem Navigationsmenü von Contao enthalten. Das dient der Barrierefreiheit. Ist für Screenreader gedacht, die den Inhalt einer Webseite vorlesen. Damit ein sehbeeinträchtiger Benutzer nicht jedes Mal die komplette Navigation vorgelesen bekommt, gibt es diesen Skiplink. Visuell wird der per CSS für den betrachtenden User ausgeblendet.

In Contao hat der Skiplink die CSS-Klasse "invisible" und eine Möglichkeit, das auszublenden und nur für Screenreader zugänglich zu machen ist so eine CSS-Anweisung:

nav > .invisible {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

Gruß
Mathias

[mdoll]

Zum Layout-Problem:
Dub hast einen eigenen Layoutbereich angelegt. Welche Position hast Du dem Bereich im Seitenlayout mitgegeben? Das sieht mir nach "In der Haupspalte" aus. Damit liegt dein eigener Layoutbereich innerhalb von #main. Deine grid Anweisung greift, denn #main ist ja nur 50% breit, aber costum-right liegt dann innerhalb von #main und wir da unterhalb Deines Artikels angezeigt.

Du musst entweder als Position "Manuelle Ausgabe" wählen und dann die fe_page anpassen, oder Du lässt dass mit dem eigenen Layoutbereich und wählst im Seitenlayout unter Spalten "Hauptspalte und rechte Spalte".

Dritte Möglichkeit: kein eigener Layout bereich und stattdessen mit 2 Artikeln arbeiten. Inhalt linke Spalte in Artikel 1 und Inhalt rechte Spalte in Artikel 2. Dann muss aber das Grid an eine andere Stelle:

#main > .inside {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Teilt den Platz in zwei gleichgroße Spalten auf */
}

Gruß
Mathias

[mlweb]

Das kann man schon so machen, aber dann brauchen wir mal einen Link zur Seite. Alternativ geht auch die Angabe wo denn Dein Layoutbereich eingebunden wurde. Sonst kostet das alles unnötig Zeit und Rückfragen. Probleme direkt im Code in den Entwicklertools lösen geht deutlich schneller.

Deswegen bitte ein Link zu Deiner Testseite.

Um frei in der Gestaltung zu sein, kann man übrigens auch die Layoutbereiche von Contao verwenden. Wenn Du das Contao-CSS-Framework nicht nutzt, bist Du ja in der Gestaltung nahezu völlig frei.
Wenn Du tatsächlich komplett frei sein willst, dann schreibst Du Deine fe_page.html komplett nach Deinem Geschmack.
M.E. ist das in 90% der Fälle allerdings nicht nötig. Gerade wenn man CSS-Grid nutz und die Bereiche völlig frei platziern kann.

[Maik-Dobbertin]

Vielen Lieben Dank für Eure Tipps. Ich hab mir das alles durchgelesen und noch ein bisschen was verändert. Ich habe es jetzt doch mit Display flex umgesetzt und es funktioniert sogar. Das Problem war Contao meinte irgendwo noch ein padding Right von 20% her zu holen das hab ich in der rechten Spalte auf 0 gesetzt. Auf einmal standen die beiden Container wie gewollt nebeneinander. Ich habe mich dann doch dazu entschieden die Zeilen und Spalten von Contao zu nutzen inklusive Layoutbilder und Responsive Design. Jetzt sieht das Layout so aus wie ich es mir vorgestellt habe.

Ich habe noch eine andere Frage die wahrscheinlich nicht zur Kategorie Template passt aber ich frag trotzdem einmal. Wenn ich einen Link habe zum Beispiel das Wort Home dieses Wort möchte ich gern durch eine Grafik ersetzen geht das überhaupt? weil eigentlich liest er ja nur den Seitenbaum und generiert daran die Links.

[mlweb]

Das Bild z.B. im css mit :before oder :after "erzeugen" und den Textlink barrierefrei ausblenden. Das Ausblenden müsste dann auch mit der von Contao mitgelieferten Klasse invisible funktionieren.
Wahrscheinlich muss das Template für die Navigation noch leicht angepasst werden, damit das Markup passt und außerdem solltest Du dafür jeder Seite eine Klasse geben, wenn Du für alle Navigationspunkte ein Bild verwenden willst.
Alternativ kann man auch mit Hintergrundbildern arbeiten (anstelle von :before bzw. :after)

Es gab auch mal eine Erweiterung für so etwas, aber was da noch aktuell gepflegt wird, keine Ahnung?
https://extensions.contao.org/?p=das...igation-bundle scheint noch die aktuellste zu sein, wurde aber auch vor zwei Jahren das letzte mal angefasst.
Ich selbst würde da eher die Finger von lassen und mit CSS und Templateanpassungen arbeiten.

Realisiert hat es jemand auch mal mit der Seitenbild-Erweiterung https://community.contao.org/de/show...plate-anzeigen. Leider war für mich nicht auf einen Blick ersichtlich mit welcher Erweierung genau man da gearbeitet hat.

Also schau mal ob etwas für Dich passt.
Eine Rückmeldung, wie Du es dann im Endeffekt gelöst hast wäre ganz nett, um anderen im Forum zu helfen.

[Maik-Dobbertin]

Danke für den Tipp. Ich werde auf jeden Fall eine Rückantwort geben. Aber diese Spielereien mit den Bildern als Navigationslinks werde ich ganz zum Schluss realisieren wenn das Projekt fertig ist. das heißt wenn ich das mache dann so im Januar oder Februar. Ich mach das ja alles nicht hauptberuflich sondern nur privat