Website für Monitoauflösung 800 x 600 Pixel anlegen und mittig ausrichten

Wollen Sie eine Website im Format 800 x 600 Pixel anfertigen und diese mittig im Browserfenster ausrichten, damit Sie auch auf großen Monitoren nicht so verloren wirkt ist eine genaue Planung und etwas Rechenarbeit von Nöten. Der Einfachheit halber haben wir in diesem Beispiel die Maßeinheit Pixel verwendet, weil diese auch bei der Auflösung von Monitoren verwendet wird. Bedenken Sie aber, wenn Sie Ihre Website direkt für einen Monitor der Größe 800 x 600 Pixel anlegen möchten, dass Sie den mittig auszurichtenden Bereich noch um die Scrolleiste und die Toolbars verkleinern müssen, also höchstens 760x440 Pixel zur Verfügung haben.

Zuerst legen Sie sich also eine Klasse (wir nennen sie .m1) an, die später in einem div-container eingebettet, der äußere Rahmen für Ihre Website sein wird. In diesen div-container können Sie alle weiteren Html-Elemente einbauen.

.m1 		{width:740px; height:420px; padding:10px;
		position:absolute; left:50%; top:50%; 
		margin-left:-380px; margin-top:-220px;
		border-width:1px; border-color:#F3F1B4; border-style:solid; }

Wenn Sie sich die Klasse .m1 genau anschauen werden Sie feststellen, dass der äußere Rahmen keineswegs mit 760 x 440 Pixeln angegeben ist. Der Rahmen ist aber exakt 760 x 440 Pixel groß. Hervorgerufen wird diese Differenz durch die Angabe padding:10px. Addieren Sie diese 10 Pixel je 2x zur Höhe und zur Breite haben Sie Ihre 760 x 440 Pixel große Website.

Mit position:absolut; left:50%; top:50%; legen Sie die absolute Position für die linke obere Ecke Ihrer Website in der Mitte des Browserfensters fest.

Jetzt müssen Sie nur noch mit margin-left:-380px;- der halben Breite und margin-top:-220px; - der halben Höhe Ihrer Website mit jeweils einem Minuszeichen davor, dafür sorgen, dass sich jetzt der Mittelpunkt Ihrer Website in der Mitte des Browserfensters befindet.