Layout Header und Footer über die gesamte Breite und 2 Spalten-Layout

[dackelchen]

Moin ich verzweifele gerade etwas.

Zuerst mal ein Link zum Problem: http://www.phonearts.de

Frage. Warum respondet das nicht, sondern schiebt sich die linke Spalte unter main?

Auf der Startseite ist alles ok, eine Spalte / Gridsystem

Auf der anderen Seite ( http://www.phonearts.de/index.php/test-2-spalten.html ) habe ich nun zusätzlich ein Zwei-Spalten-Layout.

Aktiv sind hier in Reihenfolge

CSS-Reset
Layout-Builder
Responsives Layout
12-Spalten Grid

Das CSS dazu:

#header  .inside{
    margin: 0 auto;
    background-color: #333;
    color: #fff;
    max-width: 960px;
    min-width: 768px;
}

#footer {
    background-color: #333;
    color: #fff;
    width: auto;
}

#footer .inside{
    margin: 0 auto;
    background-color: #333;
    color: #fff;
    max-width: 960px;
    min-width: 768px;
}

#container {
    margin: 0 auto;
    background-color: #fff;
    color: #333;
	max-width: 960px;
}

#left: {
	width: 300px;
}

[pmmueller]

#container hat kein padding-left und aside keine Breite, und genau so verhalten die beiden sich auch.

Wieso erwartest du, dass aside neben main stehen sollte?

Nachtrag:
In deinem Listing hat aside#left width:300px, aber auf der Seite vorhin konnte ich keine finden.

Frage:
Warum willst du unbedingt das 12-Spalten Grid verwenden?

[dackelchen]

#container hat kein padding-left und aside keine Breite, und genau so verhalten die beiden sich auch.

Wieso erwartest du, dass aside neben main stehen sollte?

Jetzt wo Du's sagst... "rotwerd"

Staun, aber warum nur? Ich habe die Anweisung im CSS drin gehabt, ohne dass sie übernommen wird. Mache ich die Angabe direkt im Layout, liegt die Spalte da, wo ich sie haben will..

Und noch mal Staunen. responsivegrid.css (eingebunden) sagt mir:

	#container {
		padding-left:0;
		padding-right:0;
	}

Warum das nicht übenommen wird öhm, ja... gute Frage

In meier test.css steht ja nur

#container {
    margin: 0 auto;
    background-color: #fff;
    color: #333;
	max-width: 960px;
}

Daher hatte ich angenommen, dass das bemi Zusammenfassen in der "großen" CSS-Datei, die Contao generiert, auch auftaucht - ich überschreibe ja nichts.

So, ich habe jetzt im CSS padding-left:0; und padding-right:0; bei#container ergänzt. keine Verbesserung

Frage:
Warum willst du unbedingt das 12-Spalten Grid verwenden?

... weil Du in Deinem Buch auf Seite 227 sagst, dass das geht, also will ich das mal ausprobieren. Ob ich es dann auch einsetzte, weiß ich noch nicht. Zunächt will ich das einfach mal umsetzen, um was dazuzulernen. .... wobei ich im Moment denken würde, dass das Grid auf den Unterseiten eher überflüssig ist, da ich die 4 Artikel im Footer, die jetzt einen Gridklassen haben, auch floaten und klearen kann und dabei eine CSS-Datei weniger zum Einbinden habe.

Einige Stunden später...

Was auf jeden Fall funktioniert, wäre einfach den wrapper auf 969px zu setzen, und die Layoutbereiche "top" und "bottom" zu nutzen. Dann könnte man entweder die Modulen aus dem Header bzw. Footer da reinlegen, oder entsprechend mit CSS da "reinschieben".

[pmmueller]

... weil Du in Deinem Buch auf Seite 227 sagst, dass das geht, also will ich das mal ausprobieren. Ob ich es dann auch einsetzte, weiß ich noch nicht. Zunächt will ich das einfach mal umsetzen, um was dazuzulernen. ....

Das geht auch, aber das alleine ist ja noch kein Grund, es wirklich auch zu machen ;-)

Das 12-Spalten Grid von Contao ist mit seinen drei Stufen sehr pfiffig ausgedacht, aber man muss beim Layouten manchmal sehr viel Rücksicht darauf nehmen. Wenn wie auf contao.org das Layout zum Grid passt, lohnt sich ein Versuch, aber oft wird das ein ziemliches "Gepixelrechne", um das alles passend zu machen. Wie z. B. bei deinem Layout...

Für mich ist die Grenze inzwischen unter anderem Mehrspaltigkeit. Auch wenn es rein rechnerisch geht, nutze ich das Grid nicht, wenn ich ein mehrspaltiges Layout habe. Dann geht es in erster Linie doch darum, im Inhaltsbereich oder im Footer mehrere Elemente nebeneinander zu stellen, und dazu nutze ich dann die RockSolid Columns.

[pmmueller]

Wenn #container ein padding-left: 0 hat, kann das nicht funktionieren. #container MUSS ein padding-left haben, das der width von #left entspricht, damit das zweispaltige Holy Grail funktionieren kann. Hier ein theoretisches Beispiel (da dein Link gerade nicht funktioniert):

#container { padding-left: 240px; }*
#left { width: 240px; right: 240px; }

Die 240px ergeben sich aus .grid3 von 220px plus 2x10px margin links und rechts.

Der Holy Grail ist ja eine "Presspackung": #left wird durch den negativen margin aus layout.css nach links gezogen, an den linken Rand von #main, und dann durch die relative Positionierung mit "right" in das linke padding von #container geschoben (siehe Teil 1, http://pmueller.de/blog/ck-2013-responsive-contao.html). Beim Grid hast du die zusätzliche Schwierigkeit, dass die verwendeten Pixelbreiten genau zu den Gridbreiten passen müssen, und zwar in *beiden* Grid-Stufen.

Die Breite von #container ist dann auch nicht mehr 960px, sondern auf blauen Dunst, rein theoretisch und ohne es probiert zu haben 960px - 240px = 720px. Jedenfalls sofern da nicht noch irgendwie ein horizontales padding oder ein horizontaler margin dazwischen funkt. Das nenne ich dann gerne "Gepixelrechne".

[Twitt]

Hallo Peter

Hätte hierfür kurz eine Frage zu den rocksolid-colums. Wie passt du jeweils die Spaltenabstände an. Ich habs mal mit der Anpassung der eigenen CSS-Datei versucht wie von RS beschrieben hier im Forum aber so wirklich sauber wirds nicht...

Wie gehst du da vor?

...dazu nutze ich dann die RockSolid Columns.

[pmmueller]

Hätte hierfür kurz eine Frage zu den rocksolid-colums. Wie passt du jeweils die Spaltenabstände an. Ich habs mal mit der Anpassung der eigenen CSS-Datei versucht wie von RS beschrieben hier im Forum aber so wirklich sauber wirds nicht...

Ich hab's schon länger nicht mehr gemacht, aber ich habe die Spaltenbreiten im eigenen CSS überschrieben. Ich erinnere mich dunkel, dass das ein bisschen "Gefriggel" war, aber es hat funktioniert.

Ein Beispiel findest du auf der Startseite von http://bildungskontor.de/. Die beiden nebeneinander stehenden Boxen sind mit RSColumns gebaut, und der Original-Margin war zu groß. Also habe ich die Spaltenbreite von width: 46.15385%; auf width: 47.5%; erhöht.

Ansonsten freue ich mich darauf, bei sowas demnächst nicht mehr zu floaten, sondern zu "flexboxen" ;-)

[Twitt]

Jup das hab ich auch so gemacht, nur umbrechen mir dann die Boxen. Mit einem margin: 0 1.5% 0 1%; klappts dann allerdings besser obwohl dann überall logischerweise rundum winzig kleine Margins sind. Wie hast du es denn geschafft dass die Boxen bündig sind?

Ich hab die Original-CSS-Datei kopiert und bei der entsprechenden Formatierung die Aenderung geschrieben. Mach ich da was verkehrt?
Wenn ich nur die Breite angebe, wird das Layout umbrochen... :-/

Ein Beispiel findest du auf der Startseite von http://bildungskontor.de/. Die beiden nebeneinander stehenden Boxen sind mit RSColumns gebaut, und der Original-Margin war zu groß. Also habe ich die Spaltenbreite von width: 46.15385%; auf width: 47.5%; erhöht.

Ansonsten freue ich mich darauf, bei sowas demnächst nicht mehr zu floaten, sondern zu "flexboxen" ;-)