Archive for Dezember, 2010

Webseite horizontal zentrieren

Mittwoch, Dezember 22nd, 2010

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.