Hintergrundbilder über Content hinaus

[olop01]

Hallo Contao Community,

ich habe heute ein kleines Logik- / Verständnisproblem.
Meine Seite nutzt Contao Grid, das heißt sie hat eine statische Breite für den main container von 960px (desktop), 768px (tablet), und eine variable Breite für alles unter 768px (mobile).
Jede Unterseite startet mit der Navi ganz oben, darauf folgt ein Slider und danach meine Artikel. (siehe Screenshot)

Jetzt möchte ich die Navi immer mit einem Schatten vom Rest der Seite trennen, ebenso sollen die Slider eine graue Hintergrundfarbe zur Abgrenzung haben. Das Problem ist, dass meine Navi, sowie der Slider ja nie größer sein können als der main content (960, 768 usw.) - d.h. ich kann die graue Fläche / den Schatten immer nur auf eben dieser Breite nutzen und der Rest links und rechts davon bleibt weiß. (auf dem Screenshot seht ihr den Wunschzustand! für den aktuellen Stand stellt euch bitte alles außerhalb der roten Rahmen weiß vor)

Ich habe überlegt, einfach meinem body eine Hintergrundgrafik zuzuweisen, die den Schatten und die graue Fläche enthält, allerdings müsste ich diese Grafik dann für alle 3 Screen Varianten bereitstellen (desktop, tablet & mobile). Außerdem ist der Slider nicht auf jeder Seite gleich groß in seiner Höhe! Das heißt ich müsste für jede Unterseite die Größe neu bemessen und weitere Bilder erstellen, für die Hintergrundgrafik.

Gibt es keinen dynamischeren Weg, um die Hintergrundfarbe bzw. box-shadow über meine content main hinaus zu verlängern, in der Breite?

Die Seite ist derzeit lokal und ich kann euch maximal mit Screenshots versorgen, wenn ihr weitere Fragen habt. Ich hoffe ich konnte das etwas verständlich erklären (schaut euch auch den Screenshot an, wenn ihr mögt) und jemand weiß einen Tipp

[Samuell]

Einfach formuliert geht es wie folgt:

Jeder Bereich Navi, slideshow und Content ist ein Div, dass 100% breite hat.
Jedes dieser Divs muss nun ein weiteres "inneres" Div enthalten, dass die maximale breite vorgibt um den Content zu zentrieren.
In Deinem Fall 960px (desktop), 768px (tablet) und 100% für alles dass kleiner ist.

Das könnte zb für Desktop so aussehen:

.div-aussen {
background: #ccc;
}

.div-innen {
max-width: 960px;
margin: 0 auto;
}

Bei der Navigation könnte möglicherweise "nav = .div-aussen" und "ul = .div-innen" sein

Alle anderen divs die weiter aussen liegen, zb #wrapper dürfen dann keine "max-width" oder "width" mehr mit Werten kleiner 100% haben, da ".div-aussen" die volle Breite einnehmen soll.

Für diesen Punkt mußt Du den Contao eigene, "Layout builder" abschalten oder alles überschreiben, da er Dir sonst dazwischen funkt.

[olop01]

Hm den Layout Builder abzuschalten bedeutet auch dass ich mein 12er grid nicht mehr nutzen kann, stimmts? Das wäre sehr ungünstig
Da mach ich lieber 32 Hintergrundbilder

[tab]

Leider habe ich noch nicht ganz verstanden, was dein Screenshot jetzt eigentlich bedeutet. Was soll oberhalb und unterhalb des "hellen" Bereichs sein, also da. wo es jetzt dunkel/schwarz ist? Und Navi, Slider und Content sind bisher im Gridbereich? Ich versuche gerade, irgendwie zu verstehen, welche Layoutbereiche da existieren und was auf deinem Bild in welchem dieser Bereiche momentan drin ist. Notfalls kann man die Hintergründe mit den Schatten auch mit zusätzlichen div's realisieren, die im Seitentemplate fe_page.html5 eingefügt werden. Die kann man dann absolut positionieren und hinter die anderen Bereiche schieben und die können dann auch 100% breit sein und die gewünschten Hintergründe mit Schatten bekommen. Vielleicht geht es ja auch noch einfacher, aber das weiss ich erst, wenn ich den aktuellen Aufbau der Seiten verstanden habe.

[olop01]

Hi und danke für die Nachricht - ich habe hier einen ausführlicheren Screenshot angehängt und das Problem etwas vereinfacht, damit es verständlicher wird. Zusammengefasst kann man sagen: Das Contao Grid verwendet eine max. Breite von 960px auf Desktop PCs. Sobald ich also ein Element (Artikel oder was auch immer) über die komplette Breite des Screens (z.B. 1920px) einfärben will, scheitere ich am fixen Layout des Grids, das max. 960px zulässt. Daher habe ich überlegt, ob und wie man Elemente auch außerhalb (links und rechts des main containers) darstellen kann. Aber wahrscheinlich bleibt nur eine (für mich) komplizierte Lösung wie von Samuell übrig.

[tab]

Hmm, wenn es darum geht, Artikel, die im Grid positioniert sind, über das Grid hinaus einzufärben, dann stelle ich mir das schwierig vor. Was nichts heißen muss, manchmal gibt es überraschend einfache Lösungen für scheinbar schwierige Probleme. Wenn es aber nur darum geht, irgendwelche Bereiche (horizontale Streifen) zwischen bekannten y-Positionen einzufärben, dann reichen eventuell schon ein paar zusätzliche div's im Seitentemplate. Leider sieht dein aufbau.jpg eher nach dem ersteren aus.

Edit: Falls du Artikel als "Zeilen" verwendest im Grid und die Inhaltselemente die Gridklassen zugewiesen bekommen, könnte man eventuell per Template ein zusätzliches div zwischen .mod_article und den CE's einziehen. Oder eins außen um den .mod_article herum. Dann wäre der Rest der Aufgabe wohl mit ein paar CSS-Anweisungen gelöst.

[do_while]

Ich habe verstanden, dass Du den gesamten Bildschirmbereich mit Farben oder Bildern erreichen möchtest und nicht nur den Bereich innerhalb des #wrapper.
Um den Wrapper herum gibt es den body-Bereich, dem Du Hintergrundfarbe oder ein Hintergrundbild zuordnen kannst (per CSS).
Es gibt auch die Möglichkeit, Bilder über die komplette Fläche als Hintergrund zu verwenden. Das kann man mit CSS machen, es gibt aber auch eine Erweiterung, die Dir dabei hilft:
https://contao.org/de/erweiterungsli...020009.de.html

[olop01]

Vielen Dank für eure Tipps und Anregungen!
Ja, ich glaube ich muss das Grid Layout so modifizieren, dass ich diese statischen Werte (960px und 768px) für den Content herausnehme, und Elemente immer auf die volle body-Breite ziehe... Das Problem hierbei ist dann natürlich, dass das Grid System so nicht mehr funktionert, da es ja für jedes Element in den Zeilen (grid1 bis grid12) auch wieder statische Breitenwerte vergibt, was das ganze dann wieder unbrauchbar macht... Es sei denn... Ich würde alle Elemente mit einer grid-Klasse in einer Zeile immer horizontal zentrieren und zusätzlich ein DIV einfügen, mit der gewünschten Hintergrundfarbe und Breite 100%.

Das könnte ich mal ausprobieren... Wo genau sind denn die CSS Eigenschaften für Contao's Grid-System gespeichert? Oder sollte ich diese einfach mit !important überschreiben?

[olop01]

Ich habe verstanden, dass Du den gesamten Bildschirmbereich mit Farben oder Bildern erreichen möchtest und nicht nur den Bereich innerhalb des #wrapper.
Um den Wrapper herum gibt es den body-Bereich, dem Du Hintergrundfarbe oder ein Hintergrundbild zuordnen kannst (per CSS).

Ja das wäre die Ausweichmöglichkeit - einfach ein Hintergrundbild dafür zu nutzen. Da sich die Elemente aber je nach device (desktop, tablet, phone) und auch nach Inhalt in ihrer Höhe verändern, müsste ich tausend millionen Hintergrundbilder anlegen und genau auf den content abstimmen, was eher eine ungünstige Lösung ist

[tab]

Vielen Dank für eure Tipps und Anregungen!
Ja, ich glaube ich muss das Grid Layout so modifizieren, dass ich diese statischen Werte (960px und 768px) für den Content herausnehme, und Elemente immer auf die volle body-Breite ziehe... Das Problem hierbei ist dann natürlich, dass das Grid System so nicht mehr funktionert, da es ja für jedes Element in den Zeilen (grid1 bis grid12) auch wieder statische Breitenwerte vergibt, was das ganze dann wieder unbrauchbar macht... Es sei denn... Ich würde alle Elemente mit einer grid-Klasse in einer Zeile immer horizontal zentrieren und zusätzlich ein DIV einfügen, mit der gewünschten Hintergrundfarbe und Breite 100%.

Das wäre ja genau der Trick mit dem inneren div im Artikel - oder was auch immer du als Zeilencontainer benutzt. Das innere div enthält die Elemente, hat die fixe Breite des Grids und wird dann im äußeren div mit Breite 100% zentriert.

Das könnte ich mal ausprobieren... Wo genau sind denn die CSS Eigenschaften für Contao's Grid-System gespeichert? Oder sollte ich diese einfach mit !important überschreiben?

Das Grid-CSS ist in assets/contao/css. grid.css komprimiert, grid-uncompressed.css ... .
Ich würde entweder die grid-uncompressed kopieren, modifizieren und als externes CSS einbinden - oder eben das Notwendige überschreiben / hinzufügen, soweit möglich auch ohne !important. Was im Einzelnen zu ändern ist, wird jedenfalls auch davon abhängen, wie du das Grid genau nutzt.

[Samuell]

Hm den Layout Builder abzuschalten bedeutet auch dass ich mein 12er grid nicht mehr nutzen kann, stimmts? Das wäre sehr ungünstig
Da mach ich lieber 32 Hintergrundbilder

Nein, das würde es nicht bedeuten.
Mittlerweile besteht das "Contao CSS Framework" aus mehreren Elementen/CSS-Files.

CSS framework
[] Layout builder
[] Responsive layout
[] 12-column grid

Du kannst eines davon "abwählen" und die anderen weiterhin nutzen.

[comanche]

Ich würde entweder die grid-uncompressed kopieren, modifizieren und als externes CSS einbinden - oder eben das Notwendige überschreiben / hinzufügen, soweit möglich auch ohne !important.

So mach ich das in der Regel. Ich setze einige Container auf 100% Breite:

#wrapper,
#header,
#container,
#main,
#custom,
#mainmenue,
#footer {
    width:100%;
}

Und die inneren Container setze ich für Desktop, Tablet und Mobile auf die entsprechende Größen, hier am Beispiel "Desktop":

#header > div.inside,
#mainmenue > div.inside,
#main > div.inside,
#footer > div.inside {
    width:960px;
    margin-right:auto;
    margin-left:auto;
}

Gruß,
Andreas

[olop01]

Das klingt hervorragend! Das werde ich bei meiner nächsten Umsetzung auf jeden Fall ausprobieren! Sehr schön!!!