Ergebnis 1 bis 13 von 13

Thema: Problem mit Display Flex

  1. #1
    Contao-Nutzer
    Registriert seit
    17.02.2012.
    Beiträge
    27

    Standard Problem mit Display Flex

    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

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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/
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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 - - -

    Zitat Zitat von mlweb Beitrag anzeigen
    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

  4. #4
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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”.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  5. #5
    Contao-Nutzer
    Registriert seit
    17.02.2012.
    Beiträge
    27

    Standard

    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
    Code:
     
    
    #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 */
    Angehängte Grafiken Angehängte Grafiken

  6. #6
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Geändert von mlweb (17.09.2023 um 22:41 Uhr)
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  7. #7
    Contao-Nutzer
    Registriert seit
    17.02.2012.
    Beiträge
    27

    Standard

    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

  8. #8
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    351

    Standard

    Zitat Zitat von Maik-Dobbertin Beitrag anzeigen
    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:

    Code:
    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
    The idea is to die young as late as possible!

  9. #9
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    351

    Standard

    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:

    Code:
    #main > .inside {
      display: grid;
      grid-template-columns: 1fr 1fr; /* Teilt den Platz in zwei gleichgroße Spalten auf */
    }
    Gruß
    Mathias
    The idea is to die young as late as possible!

  10. #10
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  11. #11
    Contao-Nutzer
    Registriert seit
    17.02.2012.
    Beiträge
    27

    Standard

    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.

  12. #12
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard Navigation mit Bildern

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  13. #13
    Contao-Nutzer
    Registriert seit
    17.02.2012.
    Beiträge
    27

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •