Aus der Mitte entspringt ein … DIV?

Wie man sieht, gibts hier wieder ein paar Veränderungen. Der nächste Schritt zum finalen Layout ist gemacht. Zentrierung mit CSS ist durchaus nicht so einfach wie mit Tabellen. Ich habe nun 2 Spalten und 3 DIVs. Neu dazugekommen ist die Spalte rechts (wo später die neue Navigation plaziert wird) sowie das Menu oben am Kopf der Seite, später der Header. Beide Elemente haben ein eigenes DIV bekommen. Der nächste Schritt, war die Entscheidung für eine festgelegte Breite, also kein flüssiges Layout. Ich hatte nun 3 DIVs, eine feste Breite und den Wunsch das alles verpackt zu zentrieren. Wie eben geschrieben, muss man was zentriert weden soll, in ein neues extra DIV packen. Vereinfacht ungefähr so:

<div id="container">
<div id="header"> </div>
<div id="navigation"> <div>
<div id="content"> </div>
</div>

Bis hier hin alles kein Problem. Nun drängt sich die Frage auf, wie das Container DIV zentriert werden soll. Die einfachste Lösung wär ein text-align: center; im body der Seite. Nur leider kommt hier der IE Bug#2452564 ins Spiel, der eben genau das unbedingt braucht.. Mir blieb die Möglichkeit zu einem CSS Hack, speziell für den IE, allerdings nutze ich Hacks nur, wenn garnichts anderes mehr geht. Es musste also eine allgemeine Lösung her.

Negative Margins

Zuerst wird die gesamte Seite halbiert:

body  {
margin: 0 0 0 50%;
}

Um dies nun auszugleichen, bekommt das Container DIV einen negativen Margin Wert, und rückt so genau um die Hälfte seiner Breite nach links. Da das body-tag schon einen left-margin bekam, rückt das Container DIV nun genau in die Mitte

#container {
position: relative;
width: 724px;
border-right: 4px solid white;
border-left: 4px solid white;
margin-left: -366px; /* 724+(2*4)=732; 732/2=366 */
padding: 0;
}

Es ist auch möglich, dem Container DIV selbst ein left:50%; zu verpassen, so spart man sich den Eintrag im body, nur mir selbst schien die Lösung so logischer, als das DIV zwei mal in sich selbst zu verschieben. Dieser Trick funktioniert auf allen CSS2 fähigen Browsern. Vertikale Zentrierung, ist mir der gleichen Methode möglich.
Negative Margins ist nur eine Möglichkeit zu zentrieren. Mitlerweile gibt es eine viel einfachere Lösung.

margin: 0 auto;

Wieso schwer wenn es auch einfach geht. Jedes DIV, welches eine feste Breite bekommen hat, wird durch ein einfaches margin: 0 auto; horizontal zentriert. Einzig der Internet Explorer braucht zusätzlich ein text-align: center; im body. Jedem anderen CCS2 kompatiblen Browser genügt das margin: 0 auto;.

Spice up the Fox

Momentan führt einfach kein Weg mehr am Firefox Browser vorbei. Ich hatte sehr lange Zeit gute Erfahrungen mit dem Avant-Browsergemacht, welcher zwar durch Tabs und Mouse-Gestures immer noch begeistern kann, jedoch im Grunde nur ein IE Shell ist. Mozillas neuer Fuchs beeindruckt durch korrektes und schnelles Parsing, sowie sämtliche Features, die mir beim Avant gefallen haben. Allerdings ist auch der Fuchs nicht perfekt, aber es gibt Unmengen an Plugins, welche die Lücke zur Perfektion schließen.

Hier also der Weg zum perfekten Browser:
Als erstes muss ein ordentliches Äußeres her. Die vielen Safari-Skins für den Fuchs, erfordern komplizierte Installationen und sinnlose Skinprogs wie z.B. Windowsblinds, aber dieses hier nicht. Ein Plugin Namens Compact Menu ist Vorraussetzung für das Safari-Theme. PrefBar erlaubt das Abschalten von Flash/Java mit nur einem Click, das Ändern der Browser- und Font-Size wird damit zum Kinderspiel. SuperDrag&Go – nur, soviel der Name hält was er verspricht. Als letztes muss sich jeder Web Developer besorgen, es bietet unglaublich viele und sinnvolle Optionen, die einem beim Entwickeln von Websites unterstützen. Die reine Anzahl an Firefox Plugins ist beachtlich und zum Erstaunen, ist vieles davon durchaus brauchbar. Man darf gespannt sein, welche der vielen Plugin Ideen, dann im kommenden IE7 gestohlen sein werden.