[Workshop] 3 Spalten Web Design mit CSS und ohne die Verwendung von Tabellen.

*Christian* · *Last edited by Christian : 05.12.2005 at 22:23.*

In diesem Workshop möchte ich euch kurz und knapp erklären, wie man pixelgenaues Web Design ohne Tabellen mittels CSS erstellen kann.

Vorab:
Jeder der selber schon mal versucht hat, ein 2 oder 3 Spalten Web Design zu erstellen, wird sicherlich festgestellt haben, dass dies durchaus immer Probleme bereitet, wenn das Layout in alle Richtungen flexibel bleiben soll ohne das linke oder rechte Menüboxen über den Footer hinausfließen, wenn der mittlere Content mal zu kurz ist. Generell kann man pixelgenaues Web Design sehr gut mit absoluten Positionierungen erreichen, aber das hat eben den o.g. Nachteil. Deshalb wende ich mich in diesem Workshop an die Methode mittels float und margin, um die entsprechenden Boxen zu positionieren. Hierbei tritt aber ein anderes Problem auf was ich später nach etwas genauer Definieren werde.

Zur Sache:
Also, es geht darum ein portaltypisches Web Design, mit 3 Spalten zu erstellen, ohne die Verwendung von unsichtbaren Tabellen und mit floatenden DIV Containern.

Ich will euch nicht mit zu vielen Einzelheiten belasten und fange direkt mit der Testseite an, die im Grundsatz richtig ist, aber beim Internet Explorer den bekannten 3 Pixel Bug auslöst.

Link zur Testseite: Testseite mit fehlerhaften IE Interpretationen

Nun schauen wir uns die Seite mal im IE und im Firefox an und es wird klar, dass das so nicht Funktioniert. Warum Funktioniert das so nicht? Ganz einfach, der Internet Explorer interpretiert bei floatenden Boxen grundsätzlich 3 Pixel zu den floatenden Boxen zu, das ist ein Bug der schon mehrere Jahre bekannt ist und leider bis heute nicht behoben worden ist. Dafür hab ich mir einen kleinen CSS Hack geschrieben, der das Problem löst.

Die Lösung:
Wir schreiben nun in die CSS Definition einen extra Hack den nur der Internet Explorer versteht und das geht mittels „* html,“ diese Kennzeichnung versteht nur der Internet Explorer und ist Ideal, um unseren kleinen Hack einzufügen.

Nun zu unserem Hack. Wir pflegen jetzt folgendes ein:

HTML Code:

       /* IE CSS Hack by vbdesigns.de */

       * html #left { 
            margin-right: -3px; 
       } 

       * html #right { 
            margin-left: -3px; 
       } 
  
       * html #middle { 
            margin: 0 177px 0 177px;
            display:inline-block; 
       } 

       /* Ende IE CSS Hack by vbdesigns.de */

Schauen wir uns das Ergebnis an:

Link zur Testseite: Testseite mit korrekter IE Interpretation

Und siehe da alles Funktioniert Perfekt. Nun was ist jetzt anders werden sich einige Fragen und ich werde dies noch mal kurz erläutern. Wie ihr sehen könnt habe ich zu der Definition #left und #right (margin -3px) hinzugefügt, bei der Definition „middle“ habe ich das margin auf 177px verändert und nicht 180px. Dies führt dazu, dass die Schrift direkt an die linke- und rechte Box anschließt, ohne das dort 3 Pixel Abstand sind. Dies allein reicht aber nicht, um die Schrift gradlinig nach unten verlaufen zu lassen, dafür müssen wir für den Internet Explorer noch (display:inline-block

deklarieren. Nun haben wir dem Internet Explorer verständlich gemacht, wie wir unser 3 Spalten Web Design haben wollen und wir wollen es Pixelgenau.

Ich hoffe, dass ich euch mit diesem kleinen Workshop ein wenig unter die Arme greifen konnte und dass wir so ein wenig mehr tabellenloses Web Design in Zukunft sehen können.

Viel Spaß beim testen.

Synoxis

Sehr schönes Tutorial

Bei mir sehen zwar beide Seiten gleich aus da ich FF verwende aber so kapiert man doch recht leicht wie man mit CSS Ausrichtet

Gruss,
Synoxis