komplettes Layout mit CSS Ebenen wie zentrieren?

Frog · 21.10.2004, 12:38

Hallo
ich bin neu hier im Forum und muss sagen das hier sehr viele gute Beiträge zu finden sind.
So nun zu meiner Frage.
Ich erstelle gerade in golive ein komplettes Layout in CSS Ebenen bzw. Layern. Alles ohne Tabellen und Layoutraster. Das ganze Layout soll zentriert im Browserfenster angezeigt werden. Welche einstellung muss ich da machen?
Habe schon soviel ausprobiert aber leider alles ohne Erfolg.
Kann mir da jemand helfen? Bin schon ganz verzweifelt.

Über eine Antwort würde ich mich riesig freuen

Gruß Frog

walter · 21.10.2004, 13:19

Hallo im TP!

Also du solltest immer erst die Suche benutzen.
Wenn du da nichts findest vielleicht mal googeln.
Wenn du da auch nicht fündig wirst, dann hier posten.

Hier ein guter Link:
http://www.css4you.de/wslayout1/ex0003.html

Ansonsten würde ich mir auch mal den Quelltext zentrierter Seiten ansehen. Da lernt man auch eine Menge.

Hier noch ein Beispiel wie es in der Praxis aussehen könnte:

(#hauptbox ist die id für das div das die gesamte Seite einschließt!)

body {text-align:center; padding:0px 0px; background-color:red;}

#hauptbox {
margin:0px auto;
width:760px;
border: 1px solid #black;
background-color:#yellolow;
}

Dirk Levy · 21.10.2004, 14:49

Das ist aber nur eine seitliche Zentrierung, oder?

Gruß
Dirk

walter · 23.10.2004, 11:22

Oh ja, wollte er vertikal und horizontal zentriert haben?

Also meine Lösung Frog ist nur die Lösung für horizonzales zentrieren!!!

fettmme · 23.10.2004, 11:45

Man kann recht einfach einen div Container auf der Seite zentrieren. Mal ungetestet und aus dem Kopf:

HTML:
<div id="cbox">Foo</div>

CSS:
#cbox{
position:absolute;
left:50%;
top:50%;
width:400px;
height:200px;
margin:-100px 0 0 -200px;
border:1px solid #999;
}

Terry · 23.10.2004, 13:07

Der Code von fettmme ist richtig, allerdings gibt es dabei ein Problem:

Bei so kleinen Containern (400x200px im Beispiel) ist das o.k. - aber bei größeren Containern wird bei kleinem Bildschirm durch das negative margin links und oben der Container abgeschnitten - hinscrollen geht dann auch nicht. Das Ganze funktioniert also nur bei kleinen Containern.

Eine andere Möglichkeit mit CSS gibt es aber nicht - vertikales Zentrieren ist vom W3C halt leider nicht vorgesehen - auch der alte Tabellentrick funktioniert ja nur im Quirksmode - nicht im Standardmodus.

Frog · 25.10.2004, 15:25

Hallo,
danke für die vielen Antworten.
Die ganze Geschichte mit den div Containern ist absolutes Neuland für mich.
Ich habe den Code von http://www.css4you.de/wslayout1/ex0003.html

<body style="text-align:center;">
<div style="width:760px;margin:0px auto;text-align:left;">
Seiteninhalt...
</div>
</body>

eingesetzt dieser zentriert den div Container. Horizontal als auch vertikal.
Dann hatte ich aber ein neues Problem.
Und zwar wollte ich den div Container mit Inhalt füllen. Also zusätzliche Ebenen darauf positionieren. Diese wurden trotz festen positionen immer irgendwo auf der Seite angezeigt aber nicht im zentrierten div Container.
Wir haben uns jetzt darauf geeinigt die Seite links auszurichten. Somit habe ich das Problem umgangen, aber leider nicht gelöst.

__________
Gruß Frog

Nele · 25.10.2004, 18:22

Wenn du deinem Div position: relative; gibst, dann richten sich absolut ausgerichtete Objekte an ihm aus, wenn sie sich in diesem Div befinden.

soleil83 · 01.11.2004, 21:04

Hallo, ich hatte genau das selbe problem und es ist bei mir ganz einfach gewesen: der ansatz von fettmme is vollkommen ok, nur muss man die "Minus-werte" ersetzen, wenn man ein größeres Fenster hat. Beispiel:
#main
{
position:absolute;
left:50%;
top:50%;
width:772px;
height:420px;
margin:-210px 0 0 -386px;
border:1px solid #999;
}

Da der DIV-Container durch die 50% mit seiner Ecke genau im Mittelpunkt des Browserfensters liegt, muss man ihn um die Hälfte seiner Breite nach links und um die Hälfte seiner Höhe nach oben 'ziehen'.
(=> margin:-210px 0 0 -386px;)

Bei mir hats wunderbar geklappt!

komplettes Layout mit CSS Ebenen wie zentrieren?

Hat Funktioniert