[Luvshining]

Hallo,

ich bin schon länger auf der Suche nach der Lösung eines kleinen Problems.




Wie man meiner Beispielgrafik entnehmen kann, möchte ich einen speziellen Hintergrund (mit einer festen Größe von einer Höhe 700 Pixeln) am Browserfenster ausrichten lassen. Der Hintergrund/ Der Inhaltsbereich mit Hintergrund soll immer horizontal und vertikal mittig im Browserfenster liegen. Egal wie ich es aber anstelle, ich bekomme es nicht nie so hin, dass sich der Container horizontal und vertikal am Browserfenster ausrichtet, zeitgleich die Gesamtbreite des Browserfensters (100%) einnimmt. Dann möchte ich, dass der "Rest" des Browserfensters zu 50% hinter dem Hintergrundbild nach oben mit der Farbe weiss hinterlegt ist und zu 50% nach unten mit der Farbe #8F8F8F belegt ist, damit das Gesamtbild harmonischer ist.
In der festen Größe von 850x570 Pixeln möchte ich dann den eigentlichen Inhalt der Internetseite horizontal und vertikal zentriert am Browserfenster ausrichten lassen- wohl das geringsten Problem.

Mein HTML Code:
<div id="container"><div id="color">
<div id="rahmen">
<div id="centerDiv">
</div></div>
</div></div>


Mein CSS Code:
html,body {
color: #000;
font-size: 81.25%;
font-family: Frutiger, Arial, Helvetica, Sans-Serif;
line-height: 1.6em;
overflow: hidden;
height:100%;
margin:0;
padding:0;
background-color:#8F8F8F;
}

#container {
position: absolute;
width:100%;
height:100%;
}

#color { /* für weisse Hintergrundfarbe oben */
position:absolute;
width:100%;
top:0px;
height:50%;
background:#fff;
}


#rahmen /* Rahmen 100% Breit und 600 Hoch ausgerichtet mit Hintergrundbild */
{
position: absolute;
left: 50%;
width: 100%;
margin-left: -50%;
top: 50%;
height: 700px;
margin-top: -350px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-position: top left;
}

#centerDiv { /* Rahmen für Seite */
position: absolute;
left: 50%;
width: 850px;
margin-left: -425%;
top: 50%;
height: 570px;
margin-top: -285px;
}

Aber es sieht einfach nicht so aus, wie ich es mir gewünscht hätte. Hat jemand von euch eine Ahnung wie ich es lösen könnte?

Vi[/img]elen Dank vorab!

Grüße
Nadine