Viele meiner neueren Webseiten enthalten ein großes Hintergrundbild, vor dem positionierte Divs exakt eingefügt werden müssen.
Trotzdem soll die Webseite – egal mit welchem Browser oder Auflösung/Fenstergröße – horizontal immer mittig ausgerichtet sein.
Das funktioniert mit einem Div, das den gesamten Code (natürlich innerhalb von <body>) umschliesst und das relativ positioniert sein muß:
.back
{
position: relative;
top: 0px;
left: 0px;
width: 1242px; /* Hintergrundbildbreite */
height: auto;
margin-left: auto;
margin-right: auto;
text-align: left; /* fuer IE 6 */
}
Den BODY ändern wir für den IE 6 noch wie folgt:
BODY
{
background-color: #FDFCE8; /*benötigte Hintergrundfarbe */
text-align: center; /* fuer den IE 6 */
}
Jetzt können die zu positionierenden Divs absolut positioniert werden, denn sie sollen Childs von .back sein, z.B. für das Hintergrundbild jetzt:
.hintergrund
{
position: absolute;
top: 0px;
left: 0px;
width: 1242px;
height: auto;
}
und so fort.
Der HTML Code ist dann z.B. so:
…
<body>
<div class=“back“>
<div class=“hintergrund“><img src=“hintergrund.jpg“ width=“1242″ height=“768″></div>
… hier kommen alle anderen zu positionierenden Inhalte hinein
</div>
…
Ich habe das an allen mir zugänglichen Browsern unter Windows, Mac und Linux ausprobiert (inklusive dem IE 6 unter Windows) und es funktioniert einwandfrei.