3.0 - Responsive Grid und Elementhöhe

Hallo zusammen,

ich nutze das responsive Grid aus Contao 3. Allerdings tritt bei mir das Problem auf, dass sobald ich einem Element eine Grid-Klasse (z.B. "grid12") zuweise, alle Eltern-Elemente eine Höhe von 0px erhalten.

Zur Verdeutlichung:

HTML-Code:

---

<div id="main"> <!-- Höhe 0px -->
  <div class="inside"> <!-- Höhe 0px -->
    <div class="mod_article block"> <!--Höhe 0px -->
      <div class="ce_text grid12 block"> <!--Höhe 100px -->
        ...
      </div>
    </div>
  </div>
</div>

---

Damit zerhaut es mir alle Hintergrundgrafiken.

Ich nutze das "CSS-Reset" und "Responsive Grid" Framework. Sobald ich den Layout-Builder aktiviere tritt dieser Fehler nichtmehr auf.

Was noch wichtig sein könnte: Ich habe dem wrapper und der inside-Klasse jeweils eine Breite zugewiesen.

Jemand eine Idee woran das liegen kann?

vG

Nochmal an die Experten: Hat jemand eine Idee warum bei der Nutzung der Grid-Klassen die Elternelemente eine Höhe von 0 erhalten? Das kann doch nicht so gedacht sein...?

Wie bereits erwähnt: Nutze ich keine Grid-Klassen wird die Höhe korrekt bestimmt.

Gegenfrage, woher weißt du das? Ich habe beim Arbeiten mit dem Grid keine Probleme bisher erlebt.

Zitat:

---

Zitat von BugBuster

Gegenfrage, woher weißt du das? Ich habe beim Arbeiten mit dem Grid keine Probleme bisher erlebt.

---

Weil ich es im Einsatz habe und der Fehler so bei mir auftritt.

Zeig doch mal her, ein Link wäre hilfreich.

Jetzt weiß ich aber immer noch nicht wie du drauf komst das der div main hat eine Höhe 0 hat, wie soll das gehen wenn einer der inneren 100px hat ?
Verstehe irgendwie nicht wo dein Problem liegt.

grid Klassen definieren doch nur Breiten?

Ahh, jetzt sehe ich, du nimmst nicht den Layout Builder, na dann Fehlen dir ja auch wichtige Definitionen zum Holy Grail. Darin ist #main mit min-height:1px; definiert.

Falls du das allgemeine Problem meinst, Divs mit Hintergrundgrafik aber ohne Inhalt werden nicht angezeigt, dass ist was ganz anderes.

Zitat:

---

Zitat von BugBuster

Jetzt weiß ich aber immer noch nicht wie du drauf komst das der div main hat eine Höhe 0 hat, wie soll das gehen wenn einer der inneren 100px hat ?
Verstehe irgendwie nicht wo dein Problem liegt.

grid Klassen definieren doch nur Breiten?

Ahh, jetzt sehe ich, du nimmst nicht den Layout Builder, na dann Fehlen dir ja auch wichtige Definitionen zum Holy Grail. Darin ist #main mit min-height:1px; definiert.

Falls du das allgemeine Problem meinst, Divs mit Hintergrundgrafik aber ohne Inhalt werden nicht angezeigt, dass ist was ganz anderes.

---

Hallo,

vielen Dank erst einmal für die vielen Antworten.

Das die Grid-Klassen nur die Breiten definieren ist korrekt, ich bin daher ja auch ratlos. Sobald ich einem Inhaltselement eine Gridklasse zuweise wird die Höhe z.B. von #main auf 0 gesetzt, ohne die Gridklasse stimmt auch die Höhe von #main. Warum auch immer.

Ich dachte das Responsive-Grid sollte auch ohne Layout Builder funktionieren? Für eine Quelle über deren Zusammenspiel wäre ich sehr dankbar.

Ansonsten werde ich jetzt wohl einfach den Layout Builder aktiviert lassen. Mit einem Link kann ich momentan leider nicht dienen.

Ja, das Grid geht auch ohne Layout Builder, dann hat man quasi header,main,footer und muss sich den Rest selber basteln.
Ich habe so eine Seite gerade in Betrieb um die Möglichkeiten zu testen.
Ich aktiviere aber den Layout Builder trotzdem (für die die Breite und Zentrierung), nutze aber wie gesagt dann nur main, nicht left und right davon.
Das teste ich später noch.
Siehe contaogrid.glen-langer.de