Seitencontainer bei zu kleinem Fenster weglassen

freezer8510

Hallo zusammen,
nachdem das das letzte Mal so gut geklappt hab als ich mich an euch gewendet habe, versuche ich es Heute nochmal.

Ich würde gerne das gleiche Prinzip wie auf dieser Seite umsetzt:
http://www.expo2010-deutschland.de

D.h. bei Vollbild werden die Seitencontainer angezeigt und wenn nicht genug Platz da ist, wird nur der Header alles was darunter ist angezeigt.
Finde das ist ein sehr nützlicher Effekt, hab aber keine Ahnung wie das funktioniert und finde im Seitenquelltext auch nicht die passende Stelle.

Gruß,
Freezer

sejuma

Vom Grundaufbau her ist das eine horizontal zentrierte Seite, bei der der Mittelteil eine fixe Breite hat. Das erreichst du damit.

Dann ist vermutlich dem body eine sehr breite Headergrafik zugewiesen und html eine sich horizontal kachelnde Verlaufsgrafik sowie eine Hintergrundfarbe, in welche die Grafik übergeht.
Technisch lässt sich das ähnlich wie hier machen:
http://www.ohne-css.gehts-gar.net/0049.php
http://www.ohne-css.gehts-gar.net/0038.php

freezer8510

Vielen Dank für die schnelle Antwort und die nützlichen Links. Die Seite gefällt mir super und werde sie mir merken.

Also mit dem Seite zentrieren ist super und auch schon umgesetzt.
Aber jetzt versteh ich immer noch nicht ganz, wie die Seiten verschwinden sollen, wenn das Fenster von Vollbild (genug platz) auf ein kleineres Fenster geändert wird.

Habe die Hintergrundgrafik fertig und in viele Teile geteilt.

Wäre klasse wenn du da nochmal drauf eingehen könntest.

Gruß und ein wunderschönen guten Morgen nach Deutschland ...

Freezer8510

freezer8510

Noch mal kurz auf den Effekt zusprechen zu kommen, den ich meine.

Wenn man auf der oben genannten Seite das Fenster maximiert, dann ist der Bildschirm voll ausgefüllt mit der Hintergrundgrafik. Wenn mann ihn jetzt langsam vertikal verkleiner, verschwinden gleichmäßig die Randteile. Das geht solange bis nur noch die zentrierte Box mit dem Inhalt da ist. Dann kommt ein Scrollbalken.

Der Kopf der Hintergrundgrafik bleibt die ganze Zeit.

Finde das ist ein mega starke Effekt. Ich persönlich mag diese Seiten nicht, die nur von Top/Left 0 ausgehend aufgebaut sind und nach der halben (vertikal) Seite fertig sind um auch jaaaa jedem Bildschirm zu gefallen. Da ist einfach zu viel Platz verschwendet und das ganze sieht irgendwie leer aus.

sejuma

Ich habe mir den Quelltext jetzt nicht angeschaut.
Vermute aber, dass es eben eine sehr breite Hintergrundgrafik ist, die das Gros der Fenstertgrößen abdeckt. Bei kleineren Fenstern wird dann eben links und rechts ein Teil dieser Grafik verdeckt.
Sie wird dann entweder html oder body zugewiesen und mit

Code

background-position: 50 % 0;

zentriert.
Teste das mal aus, indem du dir eine Grafik mit z.B. 2.000px Breite mit einem Motiv in der Mitte anfertigst.

freezer8510

Boah sieht das cool aus! Vielen Dank für den Gedankenanstoß.

Hab es letztendlich etwas anders gemacht aber mit Hilfe deines ersten Links!

Wie schließt mein ein Thema?

Gruß Freezer8510

Tags