div-Element zentriert ausrichten

[Peter Mairhofer]

Servas!

Ich soll (nicht mein Wunsch) eine Seite auf 1024x768 "optimieren". Dazu habe ich einen div-Container gemacht, der genau 980x614 groß ist.

Jetzt soll das ganze aber zentriert werden, wenn die Auflösung höher ist. Dabei habe ich mich an den Tipp von der selfhtml-FAQ gerichtet:

#container
{
        background-color: white;

position: absolute;
        top: 50%;
        left: 50%;

width: 980px;
        height: 614px;

margin-left: -490px;
        margin-top: -307px;
}

Das große Problem ist jetzt aber, dass der Container (mit allen Kindelementen) einfach abgeschnitten wird, wenn ich das Fenster verkleinere.
Ich möchte aber, dass es bei niedriger Auflösung wenigstens mit Scrollbars möglich ist, die komplette Seite zu sehen.

Gibt es dafür irgendeine Lösung, einen Container sowohl horizontal als auch vertikal zu zentrieren, aber bei kleinerer Auflösung trotzdem alles mit Scrollbars sichtbar zu machen?

Vielen Dank!

Peter

PS: Bildschirm-Auflösung mit DHTML feststellen und danach die Masse/Position des Containers ändern, will ich mir auf alle Fälle ersparen...

[schwarze Piste]

Tachchen!

Gibt es dafür irgendeine Lösung, einen Container sowohl horizontal als auch vertikal zu zentrieren, aber bei kleinerer Auflösung trotzdem alles mit Scrollbars sichtbar zu machen?

Spontan:

div {margin:auto; position:relative; top:50%; margin-top: -halbe Höhe des DIVs;}

Probleme:

1. Habe es jetzt nicht getestet, weiß nur, dass ich es mal ungefähr so gemacht habe. ;-)

2. Damals gab's _ernsthafte_ Probleme mit Opera 6.

Gruß

Die schwarze Piste

[Gunther]

Servus!

Ich soll (nicht mein Wunsch) eine Seite auf 1024x768 "optimieren". Dazu habe ich einen div-Container gemacht, der genau 980x614 groß ist.

Wie kommst du auf diese Werte, bzw. glaubst du, dass dein Container dann in das Browserfenster passt, selbst wenn es 1024px breit wäre?

Jetzt soll das ganze aber zentriert werden, wenn die Auflösung höher ist. Dabei habe ich mich an den Tipp von der selfhtml-FAQ gerichtet:

#container
{
        background-color: white;

position: absolute;
        top: 50%;
        left: 50%;

width: 980px;
        height: 614px;

margin-left: -490px;
        margin-top: -307px;
}

Das große Problem ist jetzt aber, dass der Container (mit allen Kindelementen) einfach abgeschnitten wird, wenn ich das Fenster verkleinere.

Rechne mal nach, wenn einer ein Fenster von 800x350 hat:
Durch position: absolute top: 50%(von 350px = 175px) und margin-top: -307px (also 175px - 307px = -132px) ergibt den Wert für Oben.
Analog für Links: left: 50% (von 800px = 400px) und margin-left: -490px (also 400px - 490px = -90px) ergibt den Wert für Links.

Da man in den mir bekannten Browsern nicht nach oben und nach links über den Nullpunkt (in der linken oberen Ecke) hinaus scrollen kann, verschwindet ein Teil deines Inhaltes und wird unerreichbar => nicht zu empfehlen.

Ich möchte aber, dass es bei niedriger Auflösung wenigstens mit Scrollbars möglich ist, die komplette Seite zu sehen.

Im übrigen verwechselst du die Auflösung mit der Fenstergröße, bzw. dem Viewport.

Gibt es dafür irgendeine Lösung, einen Container sowohl horizontal als auch vertikal zu zentrieren, aber bei kleinerer Auflösung trotzdem alles mit Scrollbars sichtbar zu machen?

Über den Sinn oder nicht eines solchen Vorhabens könnte man auch lang und breit diskutieren (was ich aber jetzt nicht tun werde). Eine feste Größe in Kombination mit festen negativen Margins ist imho nicht praktikabel (s.o.). Ich würde dir eher den Einsatz von min- und max-width in Kombination mit einer relativen Größe für den Container empfehlen (em oder %). Horizontal kannst du das ganze dann über margin: 0 auto; zentrieren (die IEs <= 5.5 brauchen hier einen Workaround mit text-align: center).
Siehe http://www.bluerobot.com/web/css/center1.html

Die vertikale Zentrierung gehört zu den Schwächen von CSS (zumindest bis jetzt). Ich persönlich würde ganz darauf verzichten, da ich den praktischen 'Nährwert' dabei nicht sehe, und jede mir bekannte Methode problembehaftet ist.

Eine gute Quellensammlung findest du unter http://css-discuss.incutio.com/?page=CenteringBlockElement (ganz unten auf der Seite unter "Vertical Centering")

PS: Bildschirm-Auflösung mit DHTML feststellen und danach die Masse/Position des Containers ändern, will ich mir auf alle Fälle ersparen...

Javascript sollte man höchstens zur Anpassung eines Layouts verwenden, was für das vertikale Zentrieren durchaus eine Möglichkeit wäre, wobei dir wie gesagt die Auflösung nichts nützt, sondern wenn schon eher 'innerHeight'.

Gruß Gunther

[Detlef G.]

Hallo Peter

Gibt es dafür irgendeine Lösung, einen Container sowohl horizontal als auch vertikal zu zentrieren, aber bei kleinerer Auflösung trotzdem alles mit Scrollbars sichtbar zu machen?

Schau dir mal die Beispiele Center2 und Center3 an.

Auf Wiederlesen
Detlef