Seite horizontal + Vertikal zentrieren

[ferni]

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.

[Flex]

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

[tblumrich]

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

[matthias123]

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!

[amimoto]

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

[darth_saschi]

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

[tblumrich]

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

[darth_saschi]

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:

*
{
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

[tblumrich]

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

[darth_saschi]

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

[Ral9005]

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

Danke
Christoph

[Tim G]

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

[walddag]

Hallo Thomas[/QUOTE]

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

[Tim G]

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

[Ral9005]

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

<Body>
<distance>
<wrapper>
...
</wrapper>
</distance>
</body>

oder muss das so sein

<Body>
<distance>
</distance>
<wrapper>
...
</wrapper>
</body>

Danke schon mal für die Hilfe

[Tim G]

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

[Ral9005]

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?

[Tim G]

Den wrapper absolut positionieren.
Also ohne float arbeiten.


Sent from my iPhone using Tapatalk

[elwega]

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

[Ral9005]

Danke!
ich werd das mal versuchen und dann berichten

[tblumrich]

Ich weiß der Thread ist etwas älter... aber weil sich gerade jemand mit vorgestellter Seite auf diesen hier bezieht...

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

[denali]

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

[MacKP]

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