Webseite horizontal zentrieren

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.

Comments are closed.