Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: Frage zu Konflikten der CSS-Klassen bzw. .container und .container-fluid

  1. #1
    Contao-Nutzer
    Registriert seit
    19.05.2010.
    Beiträge
    62

    Standard Frage zu Konflikten der CSS-Klassen bzw. .container und .container-fluid

    Ich entwickele gerade ein Theme für Contao 4.9 mit der Extension contao-bootstrap.
    Das Layout sieht vor, dass es sowohl Bereiche gibt die gesamte Browserbreite nutzen und welche, die nur in einem fixen container mittig platziert werden.
    Z.B. ce_text (mit Bild in voller Breite), ce_headline (max-width 1500px) und das Grid (max-width 1500px) sollen verwendet werden. Ich brauche kein Grid in voller Breite.

    Layout
    layout.jpg

    Mein Problem ist, dass ein div mit 100% Breite bei Bootstrap ja die Klasse "container-fluid" haben müsste und sich nicht in einem anderen div mit der klasse "container" befinden darf.
    Standardmäßig gibt Contao aber folgendes aus, obwohl ich im Inhalt noch mal volle Breite für ein Bild brauche:
    HTML-Code:
    <div class="container" id="container">
    <main id="main" itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage">
    <div class="inside">
    Alles was jetzt folgt - auch ein div mit der Klasse fluid-container, kann somit nicht mehr die volle Breite haben. Die Verschachtelung bzw. der Konflikt der Klassennamen ist also mein Problem.

    Muss ich jetzt alle betreffenden Templates anpassen um bei Contao sämtliche Angaben der Klasse "container" zu entfernen oder sollte ich die Bootstrap-Dateien so anpassen, dass anstelle von "container" eine andere Klassenbezeichnung gewählt wird? Oder verstehe ich etwas grundlegend nicht?

    Ein anderer Ansatz wäre es so zu lösen, dass ich das Bootstrap-Grid nur innerhalb des Contao main-containers mit max-width 1500px verwende und nicht den fluid-container. Aber wie kann ich dann im main-Bereich (der über die container-Klasse bereits auf 1500px begrenzt ist) dennoch die volle Bildschirmbreite hinaus für ein Bild nutzen? Dies wäre wohl eher keine Bootstrap, sondern eine Contao/CSS Frage oder?
    Geändert von jogiwebster (25.10.2020 um 21:47 Uhr)

  2. #2
    Contao-Nutzer Avatar von hjo
    Registriert seit
    08.01.2013.
    Ort
    Wuppertal
    Beiträge
    118

    Standard

    Bei mir benutzt Contao "container" als ID nicht als Klasse. Somit kann man die Klasse von Bootstrap benutzen. Man muss nur auf die Wertigkeit achten.

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

    Support Contao

    Standard

    Für den Einbau von Klassennamen würde ich mir mal die Erweiterung https://github.com/Contao-DD/advanced-classes-bundle. Ich glaube die wurde genau für so etwas gebaut.
    Getestet habe ich das allerdings selbst noch nicht, weil ich es bisher nicht benötigt habe.
    Alternativ ist vielleicht auch die boostrap-Erweiterung für Contao einen Blick wert - entweder das komplette Bundle oder einzelne Komponenten (gibt es als eigene Erweiterungen)
    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.




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

    Standard

    Hi,

    Dein Layout kannst Du mit der Bootstrap Erweiterung einfach umsetzen. Wenn ich das richtig sehe, dann möchtest Du folgendes:

    Header --> container
    Bereich ganze Breite --> container-fluid
    Inhaltsbereich --> container
    Footer über ganze Breite --> container-fluid

    Im Seitenlayout als Typ des Layouts "Bootstrap" wählen. Jetzt kannst Du für Header, Footer und Container CSS-Klassen vergeben. Bei Header und Container gibst Du als Klasse "container" an, beim Footer "container-fluid".
    Für das Bild erstellst Du einen eigenen Layoutbereich. Für diesen wählst Du als Template "block_section", dann erstreckt sich der Bereich über die komplette Bildschirmbreite. Dann noch als Position "unterhalb der Kopfzeile", und Du hast den Bereich gleich unter dem Header.

    Gruß
    Mathias
    “Ah," said Mr Pin. "Right. I remember. You are concerned citizens." He knew about concerned citizens. Wherever they were, they all spoke the same private language, where 'traditional values' meant 'hang someone'.”
    ― Terry Pratchett, The Truth

  5. #5
    Contao-Nutzer
    Registriert seit
    19.05.2010.
    Beiträge
    62

    Standard

    Ich finde es klasse, wie gut und schnell hier geantwortet wird, danke Euch!
    @Mathias: Ich denke, Du hast genau beschrieben, was ich brauche - einen eigenen Layoutbereich für den Bereich zwischen header und main.
    Ich habe immer versucht alles im main untereinander unterzubringen, das macht es aber umständlich bzw. geht nicht konform mit der Contao-Bootstrap-Extension.
    Ich werde es jetzt testen.
    VG Jogi

Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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