vertikale zentrierung + scrollen

[Peter Löffler]

hallo,
folgendes situation: ich habe auf meiner seite einen div container (730px hoch) vertical zentriert.
CSS:

#container {position: fixed; width: 100%; height: 730px; top: 50%; margin-top: -365px;}
funktioniert wie gewünscht. das problem ist bei kleinen bildschirmen oder einer verkleinerung des browserfensters werden oben und unten teile abgeschnitten. besteht die möglichkeit die vertikale zentrierung aufzuheben sobald der div container an den oberen bildschirmrand stösst? die seite sollte dann scrollbar sein.

[Der Martin]

Hi,

folgendes situation: ich habe auf meiner seite einen div container (730px hoch) vertical zentriert.

eigenartig, dafür position:fixed anstatt absolute zu verwenden.

#container {position: fixed; width: 100%; height: 730px; top: 50%; margin-top: -365px;}
funktioniert wie gewünscht. das problem ist bei kleinen bildschirmen oder einer verkleinerung des browserfensters werden oben und unten teile abgeschnitten. besteht die möglichkeit die vertikale zentrierung aufzuheben sobald der div container an den oberen bildschirmrand stösst? die seite sollte dann scrollbar sein.

Gib dem umgebenden Element einer Mindesthöhe von (in diesem Fall) 730px und steige wieder auf die für diesen Fall übliche absolute Positionierung um.

Ciao,
 Martin

[Peter Löffler]

Gut die Seite ist jetzt scrollbar. Jedoch verschiebt sich der container immer noch oberhalb aus dem browserfenster und ist somit übers scrollen nicht erreichbar. jemand einen praktischen lösungsansatz?

[Cheatah]

Hi,

#container {position: fixed; width: 100%; height: 730px; top: 50%; margin-top: -365px;}

warum position:fixed?

das problem ist bei kleinen bildschirmen oder einer verkleinerung des browserfensters werden oben und unten teile abgeschnitten.

Dieses Problem besteht bei position:fixed grundsätzlich.

besteht die möglichkeit die vertikale zentrierung aufzuheben sobald der div container an den oberen bildschirmrand stösst?

Meinst Du in der Theorie oder in der Praxis? Für die Theorie könntest Du Dich bei Media Queries umsehen, für die Praxis benutze einfach position:absolute.

Cheatah

[Peter Löffler]

Meinst Du in der Theorie oder in der Praxis? Für die Theorie könntest Du Dich bei Media Queries umsehen, für die Praxis benutze einfach position:absolute.

danke für die antwort!
das problem besteht aber bei absoluter positionierung. die seite ist nicht scrollbar?!

[Peter Löffler]

danke für die antwort!
das problem besteht aber bei absoluter positionierung. die seite ist nicht scrollbar?!

Ups doch nicht! hatte im body noch ein fixed..

[MudGuard]

Hi,

Meinst Du in der Theorie oder in der Praxis? Für die Theorie könntest Du Dich bei Media Queries umsehen, für die Praxis benutze einfach position:absolute.

Wie wär's mit table-cell und vertical-align?

cu,
Andreas

[Joachim]

Hi,

besteht die möglichkeit die vertikale zentrierung aufzuheben sobald der div container an den oberen bildschirmrand stösst? die seite sollte dann scrollbar sein.

Vertikale Zentrierung war - und ist - ein Stiefkind im Css, Du musst also ein bisschen tricksen oder mit Javascript arbeiten. Ich benutze einen kleinen Hack, bei dem ein Dummy-Element mit 100% Höhe zur vertikalen Ausrichtung genutzt wird. Schönheitsfehler ist besagtes "sinnloses" Element. Test siehe http://www.wendenburg.de/test/vertikal-zentrieren.html

Ansonsten nutze die Suche, es gibt andere Hacks die mit display: table-cell oder expressions arbeiten, wir hatten da schon ausführliche Diskussionen.

Von der Konzeption rate ich Dir übrigens von sowas ab: es ist typisches Designer-Layout mit grosser Angst vor flexiblen Anzeigebereichen. Auf grossen Bildschirmen verschenkst Du massig Platz, während der Container möglicherweise Scrollbalken bekommt.

Gruesse, Joachim