Absolut zentrieren – vertikal und horizontal – ohne Javascript und Fehlerfrei

Beispiel: http://www.tomislav.net/center.html

Manchmal gibt es immer noch den Kunden Wunsch dei Seite absolut zu zentrieren. Es gibt da diese Workarrounds mit dem Absoluten Layer mit left 50% und top 50% und dann jeweils einen negativen Margin von der halben Höhe und halben Breite des Inhalts. Doch Wenn man das Fenster dann kleiner schiebt, dann verschwinden Teile des Contents nach Links ins nirwana und oder gleichfalls nach oben.  Meine Version, leicht abgewandelt, getestet ab IE7 und allen gängigen Browsern erlaubt sogar ein Background Image, dass über den Content hinaus geht.

Angenommen man hat einen Content breite 1000px und höhe 550px. Dafür aber ein Hintergrundbild (hier das bg_center.jpg ) das breiter ist: Hier 1042px x 550px. Dann verpasst man am besten dem body Tag dieses Hintergundbild. Doch passiert dann genau das selbe mit dem Hintergrundbild, wie mit dem Content, wenn man das Fenster kleiner Zieht  es verschwindet jeweils nach oben und / oder nach links..

Darum habe ich mir dafür einen Workarround ausgedacht, das es sogar erlaubt hinter diesem Body BG Bild eine Kachelung einzubauen, die fix ist. Das Kachelbild bekommt dann der HTML Tag.

Hinzu kommt, dass ich den Browser dazu zwinge scrollbalken Platzhalter zu zeigen, egal, ob nun gescrollt werden muss oder nicht.

Das ganze noch auf Basis XHTML 1.0 Transitional und W3C konform und ohne Javascript mit ein wenig CSS auch W3C.

Ich habe nun keine Zeit gehabt das ganez im HTML 5 auszuprobieren, aber ich denke, dass das dort genauso funktioniert.

Hier ein Beispiel:  http://www.tomislav.net/center.html

 

Den Code bitte der Seite entnehmen.

Wer sich mit (X)HTML und CSS auskennt wird erkennen warum es funktioniert:

 

Schreibe einen Kommentar