12-Spalten-Grid - Größe

[karo68]

Hallo,

ich möchte eine statische Webseite, welche sich im container (ohne äußere Abstände) auf genau 960px breite erstreckt, responsive umsetzen. Hierzu möchte ich gerne das 12-Spalten-Grid von Contao benutzen. Aufgrund der Spaltenabstände von 10px, welche ja auch vor die erste und letzte Spalte gesetzt werden, sind die Inhalte ja nur noch 940px breit, somit fehlen ja 20px zu meiner momentanen Größe.
Ich habe gesehen, dass es eine Contao-Erweiterung für zwei Responsive-Grid-Definitionen mit 16 Spalten - 1120px und 1140px gibt. Dies ist mir aber momenten noch zu breit.
Gerne würde ich die Seite in ihrer Breite erst einmal 1zu1 umsetzen.

1. Gibt es eine Möglichkeit, die fehlenden 20px in Contao auszugleichen?
2. Würde es funktionieren, die CSS-Dateien über Tools wie http://gridinator.com/ oder http://gridpak.com/ zu erzeugen und in Contao einzubinden oder kann ich nur das Contao-interne Grid benutzen?

Danke im Voraus
Karsten

[peter64]

Hallo Karsten,

das, was Du haben möchtest, also eine Breite von 960px, ist bereits im CSS für das 12er-Grid enthalten. Die Datei grid-uncompressed.css findest Du im Ordner assets/contao/css.

/**
 * Remove the margin from floated articles, because the margin is already
 * applied to its content elements (see above)
 */
.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,
.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12 {
	margin-left:0;
	margin-right:0;
}

/**

und

/**
 * Floated articles can be 20 pixel wider (no margin)
 */
.mod_article.grid1  { width:80px;  }
.mod_article.grid2  { width:160px; }
.mod_article.grid3  { width:240px; }
.mod_article.grid4  { width:320px; }
.mod_article.grid5  { width:400px; }
.mod_article.grid6  { width:480px; }
.mod_article.grid7  { width:560px; }
.mod_article.grid8  { width:640px; }
.mod_article.grid9  { width:720px; }
.mod_article.grid10 { width:800px; }
.mod_article.grid11 { width:880px; }
.mod_article.grid12 { width:960px; }

/**

Ich würde nur das interne Grid benutzen, weil es exakt für Contao abgestimmt ist.

Gruß Peter

[karo68]

@peter64: Danke für deine Antwort.
zu Frage1: Bitte lies meine Frage noch mal genau. Dass es das 12-Spalten-Grid in Contao mit einer Breite von 960px gibt, ist mir bewusst, hatte ich ja auch geschrieben. Durch die Spaltenabstände von jeweils 10px, welche ja auch vor die erste und nach der letzen Spalte automatisch gesetzt werden, erstreckt sich der eigentliche Inhalt (z.B. ein Foto) bei dem 960-Grid dann ja nur noch auf 940px. Meine jetzige Seite ist jedoch 960px breit, ohne einen Abstand. Somit hat ein Foto auf meiner jetzigen Seite genau 960px und nicht 940px. Durch die Benutzung des interne Grids würde ich dann ja insgesamt 20px (10px auf der linken und rechte Seite) verlieren.

Ich würde nur das interne Grid benutzen, weil es exakt für Contao abgestimmt ist.

Was heißt das konkret? In welcher Form würde ein externes Grid-CSS Probleme bereiten?

Gruß
Karsten

[Spooky]

Es spricht nichts dagegen ein externes Grid zu verwenden. Du musst halt nur wissen, wie du es einsetzt und welche Anpassungen du ggf. machen musst.

[karo68]

Es spricht nichts dagegen ein externes Grid zu verwenden. Du musst halt nur wissen, wie du es einsetzt und welche Anpassungen du ggf. machen musst.

Hat das hier schon mal jemand gemacht bzw. was muss konkret angepasst werden?

[BugBuster]

Das Contao Grid verwendet in den Definitionen u.a. die automatisch von Contao generierter Klassen, wie mod_article. Das Grid wirkt auf Artikel und/oder Elemente in Artikeln.

Entweder du baust ein fremdes Grid so um das es zu den Contao Klassen passt, oder du verwendest in den Seiten und Artikeln Klassen die zu deinem Grid passen.

Es spricht auch nichts dagegen, das 12 Grid von Contao zu verwenden und für deinen Sonderfall (keine margins) eine eigene Klasse noch dazu zu definieren.
Ich habe auch so eine bei mir laufen, bei meinem 16er Spalten Prozent Grid:

.grid16_0 {
margin: 0 !important;
width: 100%;
}

Und schon passt das.

[karo68]

Entweder du baust ein fremdes Grid so um das es zu den Contao Klassen passt, oder du verwendest in den Seiten und Artikeln Klassen die zu deinem Grid passen.

Ich habe das Buch von Peter Müller gelesen und mir die CSS-Definitionen angeschaut, steige aber da noch nicht ganz durch. Z.B. warum das erste Grid nur 60px breit ist oder wozu die Offsets da sind, etc. Davon werde ich dann wohl erst einmal Abstand nehmen :-)

Es spricht auch nichts dagegen, das 12 Grid von Contao zu verwenden und für deinen Sonderfall (keine margins) eine eigene Klasse noch dazu zu definieren.
Ich habe auch so eine bei mir laufen, bei meinem 16er Spalten Prozent Grid:
Code:

.grid16_0 {
margin: 0 !important;
width: 100%;
}

Und schon passt das.

Wie sieht so etwas denn bei Elementen aus, die sich nicht über die gesamte Breite erstrecken? Beispiel: Ich habe zwei Bilder, die sich die Gesamtbreite jeweils zu 50 % Links und Rechts teilen. Wenn ich das richtig verstanden habe, müsste ich den Elementen jeweils "grid_6" zuweisen. Wie kann es ich jetzt umsetzen, dass nur der erste Abstand des linken grids und der letzte Abstand des rechten grids wegfallen soll? So eine Klasse müsste dann doch für jedes grid existieren oder verstehe ich da was falsch?

[peter64]

Hallo Karsten,

auch wenn Du mir empfohlen hast, Deinen ersten Beitrag noch einmal genau zu lesen, kann ich mir immer noch nicht vorstellen, welches Layout genau herauskommen soll. Ja, ich weiß, es soll 1:1 umgesetzt werden. Aber es soll ja auch responsive umgesetzt werden. Wieso stören dann die margins bei den Spalten?
Willst Du mit dem Inhalt, genauer gesagt mit den Inhaltselementen bis an den Rand des wrappers gehen? Willst Du bei 2 Bildern nebeneinander auf jeglichen horizontalen Abstand zwischen den Bildern verzichten? Welchen Sinn soll das denn haben? Und wie sieht denn die statische Website zur Zeit aus? Hast Du einen Link dazu? Das würde sicher helfen.

Gruß Peter

[karo68]

Wieso stören dann die margins bei den Spalten?

Die Spalten stören nicht und müssen natürlich vorhanden sein, nur nicht die erste und letzte. Von mir aus kann die erste und letzte auch vorhanden sein, dann müsste aber das Grid 980 (bzw. 982px, wenn Spaltenbreite 71px) breit sein, damit der Inhalt auf 960px (bzw. 962px, wenn Spaltenbreite 71px) kommt.

Willst Du mit dem Inhalt, genauer gesagt mit den Inhaltselementen bis an den Rand des wrappers gehen?

Das ist eine mögliche Lösung. Eine andere wäre, wie gesagt, das Grid mit der ersten und letzten Spalte zu belassen und auf 980px zu verbreitern. Falls ich dann für ein Inhaltselement, welches sich über die gesamte Breite erstreckt, keinen Abstand wünsche, könnte ich die von @BugBuster empfohlene Methode der eigenen Klasse ohne Margins implementieren.

Willst Du bei 2 Bildern nebeneinander auf jeglichen horizontalen Abstand zwischen den Bildern verzichten?

Nein, natürlich nicht. Es geht lediglich um die erste und letzte Spalte.

Welchen Sinn soll das denn haben?

Der Sinn besteht lediglich darin, dass meine jetzige Seite mit einer Breite von 960px nicht 'optisch' auf 940px verkleinert werden soll.

Und wie sieht denn die statische Website zur Zeit aus? Hast Du einen Link dazu?

Es ist eine ganz normale Shop-Webseite mit einer Breite von 960px. Die Seite wird auch mit einer 'optischen' Breite von 940px gut funktionieren. Eigentlich wollte ich sie aber nicht in der Breite verkleinern.

Im Gridinator http://gridinator.com/ kann man ja das Grid sehr flexibel nach seinen Wünschen einstellen. Spaltenbreite, Spaltenanzahl, Spaltenabstand, Container-Abstand. So eine flexible Lösung als Erweiterung für Contao wäre super :-)

[overHead]

Hallo Leute,

also irgendwie komm ich ich nicht weiter.
Will ein grid6 anwenden was ich in der css schon auf 470px genommen habe aber irgendwie will der das mir bei nicht verändern von der Breite her.
Gibt es da irgendwo ein Trick das es es macht wenn ich in der grid.css alles schon angepasst habe?