Widescreens und flexible Breiten von Webdesign Layouts

Bei mir hat nun auch endlich ein neuer Monitor Einzug gehalten. Der Röhrentrümmer ist weg,  vor mir steht ein schnuckliger Asus Flatscreen -  und man gewöhnt sich doch sehr schnell und sehr gerne an das gefällige Format.  Das Arbeiten mit dem html Editor und mit dem Grafikprogramm ist nun sehr viel komfortabler als vorher.  Ich kann alle Zeilen ohne Umbruch sehen und dazu noch bequem eine Seitenleiste offenhalten. Auch auf der Oberfläche meines Grafikprogramm ist wesentlich mehr Platz und ich muss nicht dauernd scrollen. Fein, fein :-).

Und so wie man bei einem Seitendesign drauf achten sollte, dass es sich zusammenschieben lässt, so kann es bei manchen Layouts ebenso erforderlich sein, die Breite für einen Widescreen sinnvoll zu begrenzen. In modernen Browsern setzt man hier die css-Eigenschaften min- und max-width ein und kombinert Größen in px und % . Eine Breite von z.B. bis zu 90% ergibt bei Auflösungen bis 1280 Pixel eine gut nutzbare Breite. Besonders die Größen unter 1280 Pixel profitieren von einer prozentualen Begrenzung, da hier dann ein Maximum an Platz für den Inhalt zur Verfügung steht. 90% sind jedoch für alle Auflösungen über 1280 Pixel oftmals zu breit. Hier kann man max-width in Pixel oder em einsetzen um die Breite zu begrenzen.

So weit so gut, aber da man den IE6 noch nicht vernachlässigen kann, dieser aber die beiden css-Eigenschaften nicht versteht,  zieht sich im IE6 das Layout über die ganze Monitorbreite – bei einem 24Zoll Gerät bzw. 1920 x 1200 Pixel Auflösung ist das dannschon  ziiiiemlich breit. Das Layout ist in diesem Fall zwar immer noch bedien- und benutzbar,  aber je nachdem ob es sich um ein zwei- drei oder mehrspaltiges Layout handelt, können Textzeilen,  über die empfohlene Breite von 600-700 Pixel hinausgehen und damit außerhalb des Augenwinkels liegen,  mit welchem man noch Lesen kann ohne die Zeile zu verlieren.

Etwas Abhilfe schaffen .css expressions. Expressions sind auf Javascript basierende MS proprietäre Eigenschaften, die nur vom InternetExplorer verstanden werden. Da das .css dadurch nicht mehr validiert, sollte man Expressions in die conditionel comments setzen.

Ein Codebeispiel, welches sowohl min- width als auch max-width für den IE6 sinnvoll festlegt ist bei Webdesign JeenaParadies zu finden.
Herzlichen Dank, hat geholfen !