.g6 grid aktivieren, wie geht das?

[scampi]

Hi,

ich komme nicht drauf, was ich machen muss, um z. B. einem ce_text block eine .g6 Klasse
zuzuweisen. So wie auf contao.org oder bei pmueller.de. Habe reset und responsive angehakt.

[do_while]

Im Textblock oder im Content-Element trägst Du einfach g6 bei CSS-Klasse ein (ohne Punkt).

[scampi]

Im Textblock oder im Content-Element trägst Du einfach g6 bei CSS-Klasse ein (ohne Punkt).

Vielen Dank!

Das mit den Punkten setzen oder weg lassen bei Klassen oder auch die Leerstellen zwischen mehreren weglassen oder
nicht, ist mir noch nicht so ganz klar in Contao.

[do_while]

Das ist gar nicht so schwer und liegt nicht an Contao, sondern ist die CSS-Definition:

alles, was mit Punkt beginnt, ist eine Klasse
alles, was mit einer Raute # beginnt, bezieht sich auf eine ID im HTML
ohne . und # gibt man in CSS echte HTML-Tags an.

Einzelne Selektoren werden mit Komma getrennt.
Wenn eine Leerstelle dazwischen ist, ist das der Pfad zur Definition:

<div class="abschnitt">
  <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
  </ul>
</div>

Im Beispiel erreichst Du die Punkte 1 und 2 in CSS mit ".abschnitt ul li", den ganzen Pfad gibt man aber nur an, wenn es notwendig ist. Du kannst auch nur "li" angeben, dann gilt es aber für alle li auf der HTML-Seite, mit Angabe der Klasse oder einer ID kannst Du gezielter arbeiten.

Wenn es mehrere Selektionen für ein Element gibt, wird es etwas schwieriger. Da kann ich Dir dann nur das Buch "Little Boxes" von Peter Müller empfehlen.

[scampi]

Das ist gar nicht so schwer und liegt nicht an Contao, sondern ist die CSS-Definition:

....

Wenn es mehrere Selektionen für ein Element gibt, wird es etwas schwieriger. Da kann ich Dir dann nur das Buch "Little Boxes" von Peter Müller empfehlen.

Das Buch habe ich ...offensichtlich noch nicht aufmerksam genug gelesen.

Vielen Dank für die Ausführlichkeit!

#div .rot (mit Leerstelle zwischen id und Klasse) oder #div.rot (ohne) und wie bei mehreren ids oder Klassen hintereinander
mit oder ohne Leerstelle?

[do_while]

Zu Deinen Beispielen:
"div .rot" wirkt bei <div class="irgendwas"><div ".rot">Inhalt</div></div>

"div.rot" wirkt bei <div class="rot">Inhalt </div>

sobald die Selektoren in verschiedenen Elementen stehen, wird ein Blank eingefügt, ist der Selektor in einem Tag, dann ohne Blank.

[pmmueller]

Die Geschichte mit den Klassen steht auf dieser Seite erklärt:

http://little-boxes.de/lb1/6.4-eigen...und-class.html

In Contao 3 heißen die Gridklassen übrigens "grid6" und so weiter (und nicht mehr "g6").

[scampi]

Danke Euch beiden!

@Peter
das .g6 hab ich in firebug auf contao.org entdeckt.

Dort ist mir aufgefallen, dass der Text "Neueste Blog-Einträge" rechts unten das Preview-Image daneben (Mit Contao erstellt)
beim horizontalen Verkleinern (ca. 1/4) des Browserfensters überlappt.

Neugierig wie ich bin, hab ich rumprobiert. Bei Vergabe von width: 95% an den image_container passiert das hier nicht nicht mehr.

Wäre das der richtige Weg?

[pmmueller]

Leo benutzt auf contao.org anscheinend eine etwas angepasste Version des Responsive Grid. Du kannst dir das CSS zum "Responsive Grid" von Contao 3 in der Datei assets/contao/css/responsive-uncompressed.css anschauen.

Bei mir im Chrome überschneiden die "Neuesten Blog-Einträge" das Preview-Image übrigens nicht.

[scampi]

Leo benutzt auf contao.org anscheinend eine etwas angepasste Version des Responsive Grid. Du kannst dir das CSS zum "Responsive Grid" von Contao 3 in der Datei assets/contao/css/responsive-uncompressed.css anschauen.

Bei mir im Chrome überschneiden die "Neuesten Blog-Einträge" das Preview-Image übrigens nicht.

Bei mir im Chrome und Safari auch nicht, aber im FF, Opera und IE9.
Im IE9 Browser Modus IE7 und IE8 auch nicht, da kommt dann aber ein horizontaler Scrollbalken.

[pmmueller]

Das umgebende Element div.mod_csRandom hat die Klasse "g3". Das entsprechende "grid3" ist im Responsive Grid bei mittlerem Browserfenster (768px bis 979px) genau 166px breit (siehe responsive-uncompressed.css), Zeile 122.

Zwei Lösungen:

• Sage div.image_container, dass es bei einem Viewport von 768px bis 979px nicht breiter als 166px werden soll (Breite von grid3).
• Oder sage ihm, dass es niemals breiter werden soll als das Elternelement: div.image_container {max-width: 100%;}

95% würde wahrscheinlich auch gehen, ist aber ein bisschen "Pi mal Daumen".

[scampi]

Das umgebende Element div.mod_csRandom hat die Klasse "g3". Das entsprechende "grid3" ist im Responsive Grid bei mittlerem Browserfenster (768px bis 979px) genau 166px breit (siehe responsive-uncompressed.css), Zeile 122.

Zwei Lösungen:

• Sage div.image_container, dass es bei einem Viewport von 768px bis 979px nicht breiter als 166px werden soll (Breite von grid3).
• Oder sage ihm, dass es niemals breiter werden soll als das Elternelement: div.image_container {max-width: 100%;}

95% würde wahrscheinlich auch gehen, ist aber ein bisschen "Pi mal Daumen".

Danke! Funktioniert mit 100% max-width, mit 100% width aber auch.

Stimmt, das "div.mod_csRandom" zeigt tatsächlich bei verkleinertem Fenster bei .g3 166px im Firebug an. Man sieht da auch gut, dass die Verkleinerung auf 166px das Bild im FF (hier Vers. 19) nicht mitnimmt. Chrome blendet dann auch die @media Anweisung ein, FF nicht, merkwürdig...