12-Spalten Grid, Offset-Klasse funktioniert nicht?

**illplanet** · 27.06.2013, 09:03

Wenn ich unter Nutzung des 12-Spalten Grid ein Artikel-Element (Elementtyp Text) mittels der Offset-Klassen verschieben möchte, also z.B. an den rechten Rand, so zeigt dies keine Wirkung. Angenommen mein Artikel-Element soll drei Spalten breit sein, dann müsste ich doch mit den beiden Klassen "grid3 offset9" zum Ziel kommen. Leider tut sich nichts. Kann das jemand reproduzieren?

**Lego2013** · 27.06.2013, 10:17

beiden Klassen "grid3 offset9"

Fehlt der Punkt vor den Klassen auch in Deinem CSS? Dann liegt's daran.

CSS:
.grid3 .offset9

**illplanet** · 27.06.2013, 10:27

Zitat von Lego2013

Fehlt der Punkt vor den Klassen auch in Deinem CSS? Dann liegt's daran.

CSS:
.grid3 .offset9

Wenn ich ein Inhaltselement im BE bearbeite, gebe ich doch bei den Klassen keine Punkte an, sondern schreibe sie mit Leerzeichen in das Feld "Klasse". Im Firebug erscheint die Klasse auch da, wo sie soll. Das Problem scheint zu sein, das Contao die Klasse ce_text voranstellt. Entferne ich diese über den Firebug, greift die Offset-Klasse - nur ist das ja keine permanente Lösung.

**BugBuster** · 27.06.2013, 11:08

Die Offset Klassen im Grid sind ohne Einschränkung definiert. Ich vermute mal eine falsche Reihenfolge der Einbindung wodurch ce_text bei dir den margin-left Wert des Grid überschreibt.

**illplanet** · 27.06.2013, 11:23

Zitat von BugBuster

Ich vermute mal eine falsche Reihenfolge der Einbindung wodurch ce_text bei dir den margin-left Wert des Grid überschreibt.

Was meinst du mit "falscher Reihenfolge"?
So sieht's im Quelltext aus:

Code:

<div class="ce_text grid3 offset9 block">

Die Klassen .grid und.offset9 habe ich wie gesagt über das BE eingetragen, .ce_text und .block ergänzt Contao.

Habe auch mal dein 16grid getestet, da funktionieren die Offset-Klassen, allerdings erscheinen diese auch bei der Ansicht via Smartphone, was eher ungünstig ist, da die Inhaltselemente ja eh untereinander stehen, da brauche ich keine Offsets - ist allerdings ein anderes Thema, da anderes Grid...

**BugBuster** · 27.06.2013, 11:27

Mit Reihenfolge meine ich die Reihenfolge der CSS Dateien die über das Layout eingebunden werden, sofern du den internen CSS Editor nimmst.

**illplanet** · 27.06.2013, 11:35

Also es ist so, wenn ich ein Inhaltselement vom Elementtyp "Text" (ohne darin Klassen einzutragen) nutze, und diesem Element ein Elementtyp "HTML" voranstelle und darin über

Code:

<div class="grid3 offset9">

die Klassen definiere und hinter dem Elementtyp "Text" wieder ein "HTML"-Element einfüge und darin den div-Container schließe, dann funktionieren die Offsets.
Allerdings kann das ja nicht Sinn der Sache sein, weil es furchtbar umständlich ist und von einem Redakteur ohne fundierte HTML Kenntnisse wohl kaum zu bedienen sein dürfte.

**BugBuster** · 27.06.2013, 12:25

Nein, das muss dir an irgendeiner seltsamen css Definition liegen die bei ce_text gilt.
Bei mir sieht so ein div tag aus:

Code:

<div class="ce_text offset6 grid10 block">

und funktioniert prima (16er Grid, aber das basiert auf das 12er von Contao)

Was sagt den Firebug was bei dir bei ce_text genau an dieser Stelle gilt? Bei mir nur:

Code:

line-height: 1.5;

das heißt ich kann ce_text auch rausnehmen, das ändert an den Spalten nichts.

**illplanet** · 27.06.2013, 12:35

Wie gesagt, bei mir steht

Code:

<div class="ce_text grid3 offset9 block">

, wobei es auch am Ergebnis nichts ändert, wenn ich die Reihenfolge der Klassen vertausche, sprich

Code:

<div class="ce_text offset9 grid3 block">

Für .ce_text scheint gar nichts weiter definiert zu sein.
Und ja, bei deinem 16grid funktioniert es, nur beim original 12-Spalten Grid nicht.

**BugBuster** · 27.06.2013, 13:09

Kann man das irgendwo sehen? Ich glaub das nicht. Wenn ce_text keine definition hat, wie soll es dann stören? (es sein denn also Kombination mit grid Klasse).

**illplanet** · 27.06.2013, 13:28

Ich muss mich korrigieren, ce_text wird implizit in der Grid.css definiert:

Code:

.mod_article [class*="ce_"], .mod_article [class*="mod_"] {
    margin-left: 10px;
    margin-right: 10px;
}

Diese Margin Angabe ist der wohl der Grund dafür. Wenn ich die auskommentiere läuft es auf dem Desktop.
Problematisch wird es dann auf kleinen Displays, denn hier werden sie auch berücksichtigt, obwohl alle Inhaltselemente untereinander stehen. Evtl. kann man das über CSS abfangen - weiß ich jetzt noch nicht.

**pmmueller** · 27.06.2013, 15:07

Ich habe nicht den ganzen Thread gelesen, aber die Offset-Klassen funktionieren seit 3.1 wirklich nicht mehr. Das haben wir beim letzten Contao-Seminar bei Boldt-Training schon festgestellt und ich wollte auch schon ein Ticket dazu machen, habe aber momentan keine Zeit (Manuskript muss morgen fertig sein).

Leo hat weiter oben in der grid.css etwas geändert, und die Selektoren haben eine höhere Spezifität als die Offset-Klassen. Auf Anhieb fiel mir nur ein !important hinter den Offset-Klassen ein, was zwar unschön ist, aber funktioniert.

**illplanet** · 27.06.2013, 15:56

Zitat von pmmueller

Leo hat weiter oben in der grid.css etwas geändert, und die Selektoren haben eine höhere Spezifität als die Offset-Klassen. Auf Anhieb fiel mir nur ein !important hinter den Offset-Klassen ein, was zwar unschön ist, aber funktioniert.

Ich habe besagten Eintrag (s.o) im Grid.css auskommentiert. Er sollte wohl bewirken, dass man nicht jedes mal grid12 anzugeben braucht, wenn man die volle Breite nutzen möchte.
Damit die Offset-Klassen auf kleinen Displays (Mobile, Tablet) die untereinander angeordneten Elemente nicht verschieben, habe ich in meiner CSS-Datei für mobile Geräte alle Offsets einfach mit "margin-left:10px;" definiert.

**BugBuster** · 27.06.2013, 16:14

Dass sollte auch bewirken, dass die Contenelement und Module nicht an den Rand geklatscht werden, dazu gabs mal ein Ticket.
Weil die Artikel hatten Abstand, die Module nicht, sah blöd aus.

Das damit aber die offsets nicht mehr gehen ist blöd. Da ich diese Anpassung noch nicht übernommen habe, erklärt auch warum mein Grid noch mit Offset funktioniert.
Wird dann wohl auf !important hinauslaufen.

**Schnippel** · 05.07.2013, 14:19

Auch ich stehe grad vor dem Problem,
dass meine offset nicht funktionieren.
Ich arbeite mit Contao 3.1.0 sollte ich auch 3.1.1 updaten,
um dieses Problem zu beheben?

**BugBuster** · 05.07.2013, 14:29

Das bringt nichts, da in 3.1.1 das noch nicht behoben ist, das kommt mir 3.1.2 laut GitHub.
Ich habe mein Grid, was auf das 12er basiert, wie folgt vorläufig gepatched:
https://github.com/contao/core/issue...mment-20236832

Das kann man auch am 12er original durchführen.
/ assets / contao / css / grid-uncompressed.css ändern und über die grid.css kopieren, es sei denn man weiß wie man die komprimiert. (die komprimierte wird von Contao geladen.)