#container mit fixer Breite / DIV zentrieren

Hallo,

ich möchte das alte Contao-Verhalten wieder herstellen:
Per CSS soll der #container wieder mittig zentriert werden (width: 980px; margin: 0 auto;)
Alle Elemente lassen sich mittig positionieren, nur #container nicht.
Beu ausgeschaltetem "layout builder" funktionierts, aber den brauch ich natürlich noch für die responsive Version.

Ich möchte also eine statische Version mit zentriertem container trotzdem erstellen.
Der wird immer breiter als angegeben, bei aktivierter rechter Spalte.

Das Thema wurde hier schonmal angeschnitten, ich bekomm's einfach nicht hin... ;-(
Ich brauche den wrapper bei 100%, da ich Hintergrundbilder über die gesamte Breite "stretche"....

In 2.x war's kein Problem....
Besten Dank schonmal.

Mitch

Und die Hintergrundbilder müssen unbedingt im wrapper stehen? Klappt das nicht auch im body?

Ja ich muss eine grafik in den wrapper stellen,
weil ein hintergrundbild mit jquery sich automatisch an die auflösung anpasst und body und html leider nicht mehr zur verfügung stehen :-( (jquery vegas). Darüber läuft dann noch ein bild im wrapper...
Gibt es dafür eine lösung?

Naja in 3.2.x ist es zumindest sehr einfach, einen zusätzlichen Layoutbereich zu definieren, den man vor den wrapper (leider nicht um den wrapper) legen könnte und eventuell absolut positionieren, damit er zumindest von der Position her den breiteren wrapper spielen kann für das Hintergrundbild. Jedenfalls,dann, wenn die absolute Positionierung des divs keine Probleme mit dem jQuery bereitet.

Hallo,

danke für den Vorschlag,
ich hab einen zusätzlichen DIV-Bereich in der fe_page um den wrapper "herum" eingefügt,
damit lässt sich zumindest die Grafik mit 100% Breite einfügen.

Allerdings scheint es damit auf Handys Probleme zu geben,
das ist irgendwie auch nicht optimal.... bei Contao 2.x ging das alles problemlos...

Ich hab mal einen Screenshot vom Grundlayout angehängt,
evtl. kann mir jemand Tipps geben, wie ich das in Contao 3.x hinbekomme?
Vor allem auch der MAIN-Bereich mit 100% Höhe macht mir Sorgen...? Mit mehreren height=100% wird der leider nicht verlängert...

Danke

MitchAnhang 13976

Ich verstehe zwar immer noch nicht, warum du das Hintergrundbild nicht dem body geben kannst (dort sollte sowas ja hin...) - aber selbst wenn du es könntest, funktioniert die minimale Höhe für deinen #main Bereich per CSS only eher schwierig. Es ist viel einfacher bspw. nur deinen #main oder #container eine min-height per JavaScript zu geben. Dann kannst du mit dem Rest machen was du willst (und das ohne Änderungen an der fe_page oder zusätzliche wrapper um den #wrapper etc.).

danke,
body wird schon via Jquery Plugin (vegas) benutzt, um das Hintergrundbild an Auflösungen anzupassen.
ich kann leider keine Grafiken drüber legen...
Also hab ich nun den zusätzlichen wrapper angelegt, der das dann übernimmt.
(bei contao 2.x brauchte ich die grafik nur in den wrapper legen)

Ich hab mit ausgeschalteter responsive Version im Moment das erreicht, was ich wollte,
für handys muss dann sowieso eine extra version her.

Kannst Du mir noch sagen, wie ich eine min-height per JavaScript einem Element zuweise?
Danke

Mitch

Zitat:

---

Zitat von MitchBuchannon

danke,
body wird schon via Jquery Plugin (vegas) benutzt, um das Hintergrundbild an Auflösungen anzupassen.
ich kann leider keine Grafiken drüber legen...
Also hab ich nun den zusätzlichen wrapper angelegt, der das dann übernimmt.
(bei contao 2.x brauchte ich die grafik nur in den wrapper legen)

---

Ich versteh's immer noch nicht. Gibt es die Seite irgendwo online? Warum willst du über das Hintergrundbild noch ein Hintergundbild legen? Laut deiner Grafik gibt es ja nur eines? (bzw. zwei, wenn auch #main oder #content ein Hintergrundbild hat). Und in Contao 3.x sollte sich das nicht anders verhalten als in Contao 2.x.

hallo,

es gibt drei Hintergründe:
- einmal das große Hintergrundbild
- einmal den Balken (nur ein paar Pixel breite png, die wird auf width 100% gestretcht)
in den Balken kommt mittig die Navigation

In Contao 2.x konnte ich den wrapper auf 100% stellen, und alle anderen auf margin: 980 auto. Dann hat alles gepasst.
In Contao 3 funktioniert das irgendwie nicht mehr. Der Container lässt sich nicht mehr so einfach zentrieren mit fixer Breite.

dritter Hintergrund
- eine halb transparente weisse PNG für den content-bereich (container), der sich auf height: 100% stellen soll

Danke

Mitch

Zitat:

---

Zitat von MitchBuchannon

hallo,

es gibt drei Hintergründe:
- einmal das große Hintergrundbild
- einmal den Balken (nur ein paar Pixel breite png, die wird auf width 100% gestretcht)
in den Balken kommt mittig die Navigation

In Contao 2.x konnte ich den wrapper auf 100% stellen, und alle anderen auf margin: 980 auto. Dann hat alles gepasst.
In Contao 3 funktioniert das irgendwie nicht mehr. Der Container lässt sich nicht mehr so einfach zentrieren mit fixer Breite.

dritter Hintergrund
- eine halb transparente weisse PNG für den content-bereich (container), der sich auf height: 100% stellen soll

Danke

Mitch

---

Das sollte alles auch in Contao 3.x funktionieren. Ohne einen Link kann ich dir aber nicht sagen, was es bei dir hat. Evt. hast du deine fe_page geändert? Default Layout ist ja:

PHP-Code:

---

<body>

  <div id="wrapper">

    <header id="header">
      ...
    </header>

    <div id="container">

      ...

      <div id="main">
        ...
      </div>

      ...

    </div>

  </div>

</body> 


---

#wrapper lässt du auf 100% Breite. #header genauso. #container zentrierst du wie du schon gesagt hast. Großes Hintergrundbild kommt in den body, der Balken in den #header und der weiße transparente Hintergrund in den #container. Mit JavaScript setzt du dann eine min-height für den #container, abhängig vom Viewport (also Viewport Höhe minus #header Höhe).


Wie gesagt, ein link wäre hilfreich um dir helfen zu können ;).

derzeitiger Workaround für einen zentrierten Container in Contao 3.x
(danke an Spooky!)

#container {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

So klappts erstmal...