Ergebnis 1 bis 23 von 23

Thema: Seite horizontal + Vertikal zentrieren

  1. #1
    Contao-Nutzer
    Registriert seit
    26.09.2009.
    Ort
    Österreich; Wien & Salzburg
    Beiträge
    66

    Standard Seite horizontal + Vertikal zentrieren

    Hallo,

    Wie aus dem Titel bereits hervorgeht war es mein Ziel eine Seite horizontal + vertikal zu zentrieren.

    Verwendet wurde hierzu folgende Taktik: (angewendet auf #wrapper)
    http://www.intensivstation.ch/files/...es/temp11.html

    Achtung: Höhe und Breite des #wrappers muss bekannt sein!

    ---> Ergebnis nach Einbau dieser Technik:

    0% Erfolg, es stimmt vorn und hinten nicht.

    Problem: die /system/contao.css definiert body als position: relative; welches dazu führt, dass weitere top,left etc. im Textfluss ignoriert werden.

    Lösung: body {position:static}; (natürlich im eigenen .css, um die Sache updatesicher zu machen)

    Meinen Tests nach ist es Crossbrowser-kompatibel, wobei IE5-IE6 noch nicht getestet wurde. IE 7 + 8 passt.

    LG.
    Ferni

    Btw: Vielen dank an plane28 (#contao.de@freenode.net) für den Hinweis, das es am TL-Framework liegt.
    Geändert von ferni (04.08.2010 um 01:17 Uhr)
    Beste Grüße aus Österreich
    XING: https://www.xing.com/profile/Johannes_Ferner2

  2. #2
    Contao-Urgestein
    Registriert seit
    03.06.2010.
    Ort
    Wuppertal
    Beiträge
    2.149
    User beschenken
    Wunschliste

    Standard

    static ist dem IE seit Version 5 bekannt und somit sieht das Ergebnis in 5.5 und auch 6 wie gewollt aus.

  3. #3
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Ich weiß nicht ob es passt bzw. gewünscht ist (wenn nicht, sorry), aber einen Link zu dem Thema, den ich auch immer gerne poste ist der folgende:
    http://d-graff.de/fricca/center.html

    Vorteil: Der Container macht am Browserrand halt, wenn das Fenster kleiner als der Container wird. Ist ja mitunter für die Zugänglichkeit nicht ganz verkehrt.
    Müsste man mal prüfen, ob bei der Technik auch Anpassungen im Contao nötig sind wegen des Frameworks.
    Templateanpassung ist wohl in jedem Fall nötig wegen dem Distance-Div.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  4. #4
    Contao-Nutzer
    Registriert seit
    05.03.2010.
    Beiträge
    94

    Standard

    Zitat Zitat von tblumrich Beitrag anzeigen
    Ich weiß nicht ob es passt bzw. gewünscht ist (wenn nicht, sorry), aber einen Link zu dem Thema, den ich auch immer gerne poste ist der folgende:
    http://d-graff.de/fricca/center.html

    Vorteil: Der Container macht am Browserrand halt, wenn das Fenster kleiner als der Container wird. Ist ja mitunter für die Zugänglichkeit nicht ganz verkehrt.
    Müsste man mal prüfen, ob bei der Technik auch Anpassungen im Contao nötig sind wegen des Frameworks.
    Templateanpassung ist wohl in jedem Fall nötig wegen dem Distance-Div.

    Gruß
    Thomas
    Bin auch gerade dabei, das zu probieren, aber es klappt noch nicht ganz!

  5. #5
    Contao-Nutzer
    Registriert seit
    06.10.2009.
    Beiträge
    161

    Standard

    Moin.
    Ich habe auch schon mal länger mit Lösungen dieses Problems rumexperimentiert, Designer haben es ja gerne vertikal zentriert... ;-)
    Bei der Lösung von ferni sehe ich aber auch das Problem mit kleinen Bildschirmen, zumindestensm, wenn der Content Bereich höher als 200px ist. Mal das Fenster verkleinern, dann sieht man das schnell.
    Insofern ist die von tblumrich vorgeschlagene CSS Variante schon ziemlich genial!!
    Gruß
    PB

  6. #6
    Contao-Nutzer Avatar von darth_saschi
    Registriert seit
    05.11.2009.
    Beiträge
    220

    Standard

    Zitat Zitat von matthias123 Beitrag anzeigen
    Bin auch gerade dabei, das zu probieren, aber es klappt noch nicht ganz!
    Ich versuch auch gerade die fricca-Version, brings aber nicht zum Laufen. Habt Ihr das hinbekommen?

    Der Sascha

  7. #7
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Hi.

    Ein "Ansichtsexemplar" wäre immer toll, dann könnte man gucken, was nicht passt.
    Auf jeden Fall funktioniert das, ich habs schon x-mal umgesetzt nach dem Schema.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  8. #8
    Contao-Nutzer Avatar von darth_saschi
    Registriert seit
    05.11.2009.
    Beiträge
    220

    Standard

    Zitat Zitat von tblumrich Beitrag anzeigen
    Hi.

    Ein "Ansichtsexemplar" wäre immer toll, dann könnte man gucken, was nicht passt.
    Auf jeden Fall funktioniert das, ich habs schon x-mal umgesetzt nach dem Schema.

    Gruß
    Thomas
    Haaalloo Thomas.

    Danke für die schnelle Antwort.

    Mein Test ist hier: http://contao.naegler.eu/

    Ich versuche allerdings den wrapper als distance zu mißbrauchen, siehe CSS:

    HTML-Code:
    *
    {
    margin:0;
    padding:0;
    }
    
    html,
    body
    {
    height:100%;
    }
    
    body
    {
    text-align:center;
    }
    
    #wrapper
    {
    width:50px;
    height:50%;
    float:left;
    margin-bottom:-200px;
    background-color:#4b9c8f;
    }
    
    #container
    {
    width:800px;
    height:400px;
    position:relative;
    clear:left;
    margin:0 auto;
    text-align:left;
    background-color:#bd5e5e;
    }
    Vielleicht liegts daran? Daß ich den wrapper benutze? Der vom Framework irgendwie formatiert ist? Muß ich den distance-div im template verwenden?

    Ich danke Dir.

    Der Sascha

  9. #9
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    ...auf die Schnelle ohne den Code oder die Seite angesehen zu haben. Das Wichtige erscheint mir hier die Reihenfolge zu sein.
    Das Distance-DIV steht ja grundsätzlich als erstes, noch vor dem wrapper, insofern kannst du den wrapper dafür nicht "missbrauchen". Dieser umschließt ja per se den Inhalt der Seite.

    Ich gestehe, das ich die Umsetzung bis dato auf den Non-Contao Seiten gemacht habe.
    So wie ich das sehe, muss man aber einfach, wie oben angedeutet, dem Seitentemplate fe-page.tpl eben dieses distance-div "unterjubeln" - genau vor den wrapper.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  10. #10
    Contao-Nutzer Avatar von darth_saschi
    Registriert seit
    05.11.2009.
    Beiträge
    220

    Standard

    Zitat Zitat von tblumrich Beitrag anzeigen
    Ich gestehe, das ich die Umsetzung bis dato auf den Non-Contao Seiten gemacht habe.
    Ahc, schade, ich hatte gehofft, daß Du das schon mal unter Contao gemacht hattest.

    Aber ich werde mir das mal gemäß Deinen Tips anschauen.

    Danke Dir.

    Der Sascha

  11. #11
    Contao-Nutzer
    Registriert seit
    12.02.2011.
    Beiträge
    10

    Standard

    Hallo,
    mich würde das auch interessieren. hat das denn geklappt?

    Danke
    Christoph

  12. #12
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard

    Ohne zu testen, aber sollte klappen:

    body, html
    {
    width: 100%; height: 100%;
    }

    #wrapper
    {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }

    #container
    {
    position: absolute;
    width: 800px;
    height: 400px;

    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -400px;
    }

    Wenn man header und footer auch braucht, im fe_page template diese einfach innerhalb des container divs setzten. Mehr ist eigentlich nicht zu ändern.

    Ist damit natürlich kein fluid layout.

    Kanns jetzt nicht testen, weil ich grad in der ubahn sitze



    Sent from my iPhone using Tapatalk
    http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.

  13. #13
    Contao-Nutzer
    Registriert seit
    21.02.2011.
    Ort
    Bremen
    Beiträge
    28
    Partner-ID
    nein

    Fehler "unterjubeln" in fe-page.tpl eben dieses distance-div vor den wrapper

    Hallo Thomas[/QUOTE]
    Zitat Zitat von tblumrich Beitrag anzeigen

    heißt das, daß ich in den quelltext muß vom fe-page.tpl?
    Kann ich generell hier Änderungen dann für html + php durchführen?
    Sorry, ich lerne immer noch.

    Walddag


    ...auf die Schnelle ohne den Code oder die Seite angesehen zu haben. Das Wichtige erscheint mir hier die Reihenfolge zu sein.
    Das Distance-DIV steht ja grundsätzlich als erstes, noch vor dem wrapper, insofern kannst du den wrapper dafür nicht "missbrauchen". Dieser umschließt ja per se den Inhalt der Seite.

    Ich gestehe, das ich die Umsetzung bis dato auf den Non-Contao Seiten gemacht habe.
    So wie ich das sehe, muss man aber einfach, wie oben angedeutet, dem Seitentemplate fe-page.tpl eben dieses distance-div "unterjubeln" - genau vor den wrapper.

    Gruß
    Thomas
    Vielen Dank für die Nachricht und Information.
    Daggi

  14. #14
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard

    Wozu die Mühe mit float zu arbeiten für ein v+h zentriertes Layout?
    Ok, der Inhalt könnte dynamisch wachsen, z.b. bei einem accordion. Aber der Effekt sieht alles andere als gut aus live. Die ganze Seite zuckt.
    Und für ein statisches Layout würde ich einfach alles absolute setzen und das scrolling innerhalb des containers machen bzw. innerhalb des main.

    Falls man doch unterschiedliche Größen brauch definiert man diese einfach seitenspezifisch im css.

    hier ein paar Beispiele dazu:
    http://johannes-rojahn.com/index.php/home.html
    http://www.joergbach.de/biografie.html

  15. #15
    Contao-Nutzer
    Registriert seit
    12.02.2011.
    Beiträge
    10

    Standard

    hallo,
    also meinem verständnis muss das dann so schematisch aussehen

    Code:
    <Body>
    <distance>
    <wrapper>
    ...
    </wrapper>
    </distance>
    </body>
    oder muss das so sein

    Code:
    <Body>
    <distance>
    </distance>
    <wrapper>
    ...
    </wrapper>
    </body>
    Danke schon mal für die Hilfe

  16. #16
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard

    Wenn unbedingt mit floating und AbstandsDIV, dann die zweite Variante, da du mit margin arbeiten musst und nicht mit padding, denke ich.
    Wahrscheinlich noch ein "&nbsp" in das div.

    Viele Grüße


    Sent from my iPhone using Tapatalk
    http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.

  17. #17
    Contao-Nutzer
    Registriert seit
    12.02.2011.
    Beiträge
    10

    Standard

    was würdest du mir denn empfehlen, wenn ich so zwischen den Zeilen lese, dann verstehe ich, dass es nicht gut ist mit float zu arbeiten. verstehe ich das richtig.
    es geht um folgende Seite
    http://contao.wolf-planung.de

    letzten Endes war eigentlich vorgesehen, dass die Seite 800x400 px hat und ohne scrollbalken auskommt.
    wie würdet ihr das machen?

  18. #18
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard

    Den wrapper absolut positionieren.
    Also ohne float arbeiten.


    Sent from my iPhone using Tapatalk
    http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.

  19. #19
    Contao-Fan Avatar von elwega
    Registriert seit
    15.09.2009.
    Ort
    Black Forest
    Beiträge
    586

    Standard Schnipsel

    Code:
    <html>
      <head>
        <title>Webseite horizontal und vertikal zentrieren</title>
        <style type="text/css">
    
          div {
            /* width:400px; */
            width: 960px;
            /* height:300px; */
            height: 600px;
            background-color:blue;
    
            /* fuer horizontale und vertikale zentrierung */
            position: absolute;
            left:50%;
            margin-left:-480px;  /* Um die Hälfte der Breite nach links schieben */
            top:50%;
            margin-top:-300px;  /* Um die Hälfte der Höhe nach oben schieben */
          }
    
        </style>
      </head>
      <body>
        <div>
          Inhalte.
        </div>
    
      </body>
    </html>
    Beste Grüße
    Wenn der Reiter nichts taugt, ist das Pferd schuld.

  20. #20
    Contao-Nutzer
    Registriert seit
    12.02.2011.
    Beiträge
    10

    Standard

    Danke!
    ich werd das mal versuchen und dann berichten

  21. #21
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Ich weiß der Thread ist etwas älter... aber weil sich gerade jemand mit vorgestellter Seite auf diesen hier bezieht...
    Zitat Zitat von Tim G Beitrag anzeigen
    Wozu die Mühe mit float zu arbeiten für ein v+h zentriertes Layout?
    Ok, der Inhalt könnte dynamisch wachsen, z.b. bei einem accordion. Aber der Effekt sieht alles andere als gut aus live. Die ganze Seite zuckt.
    Und für ein statisches Layout würde ich einfach alles absolute setzen und das scrolling innerhalb des containers machen bzw. innerhalb des main.

    Falls man doch unterschiedliche Größen brauch definiert man diese einfach seitenspezifisch im css.

    hier ein paar Beispiele dazu:
    http://johannes-rojahn.com/index.php/home.html
    http://www.joergbach.de/biografie.html
    Wie amimoto oben sehr richtig bemerkte, gehts bei der geposteten Variante von mir eben darum zu verhindern, das das Layout bei kleinen Auflösungen/Browserfenstern etc... (Smartphones) aus dem Sichtfeld verschwindet ohne Scrollbalken zu liefern. Im schlimmsten Fall kommt man damit nicht mehr an die Navigation.
    Genau das ist der Fall beim zweiten Link von dir.
    Beim ersten funktioniert das zwar, aber auf Kosten einer ins Layout eingebauten Tabelle. Dann kann man ja gleich ein paar Jahre zurück und wieder auf Tabellenlayout setzen, oder? Und wenn man schon extra eine Tabelle ins Seitenlayout einbaut, kann man dort doch auch anstatt dessen eben das eine distance-div ganz oben einbauen, finde ich.

    Und dann sollte mit dem entsprechenden CSS (ok, da sind ein paar floats drin) auch die Variante in Contao gehen.

    Ich werde das mal, sobald ich etwas Zeit habe, probieren und eine Anleitung ins Wiki stellen... versprochen.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  22. #22
    Contao-Nutzer
    Registriert seit
    01.04.2012.
    Beiträge
    1

    Standard Seite vertikal zentrieren

    Ich habe mich jetzt schon durch so viele Foren gelesen und kriege es einfach nicht fertig die Beispiele auf meine Seite anzuwenden www.belchen-schweiz.ch

    Die Seite klebt am linken Bildrand und ich möchte sie mittig platzieren. Kann jemand einem etwas älteren Semester helfen? Der Code ist einsehbar....ich habe halt nach bestem Wissen und Gewissen mit Tabellen gearbeitet Die Seite habe ich mit Share Point Designer gemacht.

    Es wäre schön wenn ich dieses Problem endlich lösen könnte. Vielleicht kann mir jemand den Code so ändern dass ich ihn nur noch zu kopieren brauche?

    Adrian

  23. #23
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo denali,
    was hat dich denn hier ins Contao Forum verschlagen? Wenn ich mir das anschaue läuft da kein Contao...

    Naja, das was ich dir mitgeben kann:
    - Nimm keine Tabellen zum Designen
    - Schau dir mal an wie man das macht und lerne: http://jendryschik.de/wsdev/einfuehrung/kochbar/
    - Lerne allgemein CSS: http://little-boxes.de/

    Und: guck dich vllt besser in passenden Foren um und frag da ;-)
    Hier geht es ja eigentlich vorwiegend um das CMS Contao.

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

Aktive Benutzer

Aktive Benutzer

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

Ähnliche Themen

  1. Bei variabler Breite div in div horizontal zentrieren?
    Von pepe_007 im Forum Layout / Templates / Holy Grail
    Antworten: 5
    Letzter Beitrag: 11.06.2013, 16:59
  2. main-Bereich vertikal zentrieren
    Von tinoo im Forum Layout / Templates / Holy Grail
    Antworten: 8
    Letzter Beitrag: 02.06.2011, 18:07
  3. Seite vertikal zentrieren
    Von varix im Forum Allgemeine Inhaltselemente
    Antworten: 9
    Letzter Beitrag: 08.02.2011, 13:43
  4. navigation vertikal zentrieren
    Von schman im Forum Layout / Templates / Holy Grail
    Antworten: 3
    Letzter Beitrag: 27.08.2010, 16:27
  5. Seite vertikal zentrieren
    Von derolli im Forum Layout / Templates / Holy Grail
    Antworten: 4
    Letzter Beitrag: 22.11.2009, 12:19

Berechtigungen

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