Ergebnis 1 bis 11 von 11

Thema: #container mit fixer Breite / DIV zentrieren

  1. #1
    Contao-Nutzer
    Registriert seit
    29.09.2011.
    Beiträge
    194

    Standard #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
    Geändert von MitchBuchannon (09.07.2014 um 13:39 Uhr)

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.078
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  3. #3
    Contao-Nutzer
    Registriert seit
    29.09.2011.
    Beiträge
    194

    Standard

    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?

  4. #4
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.078
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  5. #5
    Contao-Nutzer
    Registriert seit
    29.09.2011.
    Beiträge
    194

    Standard

    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

    Mitch140710_grundlayout_contao.jpg

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.126
    Partner-ID
    10107

    Standard

    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.).

  7. #7
    Contao-Nutzer
    Registriert seit
    29.09.2011.
    Beiträge
    194

    Standard

    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

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.126
    Partner-ID
    10107

    Standard

    Zitat Zitat von MitchBuchannon Beitrag anzeigen
    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.

  9. #9
    Contao-Nutzer
    Registriert seit
    29.09.2011.
    Beiträge
    194

    Standard

    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

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.126
    Partner-ID
    10107

    Standard

    Zitat Zitat von MitchBuchannon Beitrag anzeigen
    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 .
    Geändert von Spooky (11.07.2014 um 10:38 Uhr)

  11. #11
    Contao-Nutzer
    Registriert seit
    29.09.2011.
    Beiträge
    194

    Standard

    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...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •