Box immer zu oberst (Bildschirmauflösung)

[parafi]

Guten Tag

Ich arbeite gerade an einer Homepage.
Mein Idee war es mit verschiedenen Boxen eine Art Raum zu gestalten.
In diesem Raum soll sich aber im Vordergrund eine weitere Box (Hauptbox) befinden, in der danach das wesentliche der Homepage dargestellt wird. (Home, Kontakt, etc)

Nun habe die Hauptbox in meinem CSS so formatiert, dass sie immer in der Mitte angezeigt wird.

#hauptbox {
  background-color: black;
  position: absolute;
  filter:alpha(opacity=65);
    opacity:0.65;
  vertical-align: bottom;
  text-align: center;
  height:500px;
  width:900px;
  margin:-250px 0px 0px -450px;
  top: 50%;
  left: 50%;

Und alle anderen Boxen habe ich ebenfalls so formatiert.
Nun habe ich meine Homepage auf meinem Laptop geöffnet (mit kleinerem Bildschirm natürlich) und auf einmal ist nicht mehr alles ersichtlich. Was mir ja auch Sinn ergibt.

Habt ihr eine Idee wie ich darum herumkomme? Was muss ich ändern?

Hier ein Beispiel Bild: (die Page ist erst in Arbeit und auch die Hintergrund-Bildern dienen erst als Grobskizze)

http://yfrog.com/48bildip

Grüsse parafi

 

[leveler]

AW: Box immer zu oberst (Bildschirmauflösung)

moin, weiss nicht , ob ich Dein Anliegen jetzt richtig verstanden habe, aber evt hilft Dir der "z-index" weiter

 

[parafi]

AW: Box immer zu oberst (Bildschirmauflösung)

Nein damit habe ich kein Problem.
Mein Problem liegt darin, dass wenn ich meine Homepage mit meinem 15'' Laptop öffne sehe ich zum Beispiel das Logo "Butti" im Hintergrund nicht mehr, da es zu weit oben ist.
Wenn ich jedoch die Homepage mit meinem 17'' Monitor öffne, erscheint alles schön.

Ich nehme an, wenn ich meine Homepage auf einem 22'' Monitor öffne wird das ganze zu weit unten sein auf dem Bildschirm.

Meine Frage ist, ob ich irgendwie einstellen kann, dass das Ganze immer (egal ob 15'' oder 22'' Monitor) zu oberst erscheint.

 

[sokie]

AW: Box immer zu oberst (Bildschirmauflösung)

dann musst du deine Elemente einfach relativ anordnen.
den Hintergrund (Raum) zentrierst du (background: center top no-repeat) und sorgst dafür, dass es in jedem fall eine scrollbar gibt (html {height: 101%}) damit es bei kleineren Bildschirmen im gegesatz zu grösseren keine unterschiedlichen Darstellungen gibt.
Dann erstellst du einfach einen äusseren Container, der die ganze Seite zentriert (width: xxxpx; margin: 0 auto) und legst die Inhalte darin an, si wie du es brauchst.