Archive für 22.12.2010

Webseite horizontal zentrieren

22.12.2010 von ponnath.

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.

Geschrieben in Allgemein | Keine Kommentare »

|