{"id":3650,"date":"2008-06-27T19:00:59","date_gmt":"2008-06-27T17:00:59","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2008\/06\/27\/widescreens-und-flexible-breiten-von-webdesign-layouts\/"},"modified":"2017-12-03T11:06:38","modified_gmt":"2017-12-03T09:06:38","slug":"widescreens-und-flexible-breiten-von-webdesign-layouts","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2008\/06\/widescreens-und-flexible-breiten-von-webdesign-layouts\/","title":{"rendered":"Widescreens und flexible Breiten von Webdesign Layouts"},"content":{"rendered":"<p>Bei mir hat nun auch endlich ein neuer Monitor Einzug gehalten. Der R\u00f6hrentr\u00fcmmer ist weg,\u00c2\u00a0 vor mir steht ein schnuckliger Asus Flatscreen -\u00c2\u00a0 und man gew\u00f6hnt sich doch sehr schnell und sehr gerne an das gef\u00e4llige Format.\u00c2\u00a0 Das Arbeiten mit dem html Editor und mit dem Grafikprogramm ist nun sehr viel komfortabler als vorher.\u00c2\u00a0 Ich kann alle Zeilen ohne Umbruch sehen und dazu noch bequem eine Seitenleiste offenhalten. Auch auf der Oberfl\u00e4che meines Grafikprogramm ist wesentlich mehr Platz und ich muss nicht dauernd scrollen. Fein, fein :-).<\/p>\n<p>Und so wie man bei einem Seitendesign drauf achten sollte, dass es sich zusammenschieben l\u00e4sst, so kann es bei manchen Layouts ebenso erforderlich sein, die Breite f\u00fcr einen Widescreen sinnvoll zu begrenzen. In modernen Browsern setzt man hier die css-Eigenschaften min- und max-width ein und kombinert Gr\u00f6\u00dfen in px und % . Eine Breite von z.B. bis zu 90% ergibt bei Aufl\u00f6sungen bis 1280 Pixel eine gut nutzbare Breite. Besonders die Gr\u00f6\u00dfen unter 1280 Pixel profitieren von einer prozentualen Begrenzung, da hier dann ein Maximum an Platz f\u00fcr den Inhalt zur Verf\u00fcgung steht. 90% sind jedoch f\u00fcr alle Aufl\u00f6sungen \u00fcber 1280 Pixel oftmals zu breit. Hier kann man max-width in Pixel oder em einsetzen um die Breite zu begrenzen.<\/p>\n<p>So weit so gut, aber da man den IE6 noch nicht vernachl\u00e4ssigen kann, dieser aber die beiden css-Eigenschaften nicht versteht,\u00c2\u00a0 zieht sich im IE6 das Layout \u00fcber die ganze Monitorbreite &#8211; bei einem 24Zoll Ger\u00e4t bzw. 1920 x 1200 Pixel Aufl\u00f6sung ist das dannschon\u00c2\u00a0 ziiiiemlich breit. Das Layout ist in diesem Fall zwar immer noch bedien- und benutzbar,\u00c2\u00a0 aber je nachdem ob es sich um ein zwei- drei oder mehrspaltiges Layout handelt, k\u00f6nnen Textzeilen,\u00c2\u00a0 \u00fcber die empfohlene Breite von 600-700 Pixel hinausgehen und damit au\u00dferhalb des Augenwinkels liegen,\u00c2\u00a0 mit welchem man noch Lesen kann ohne die Zeile zu verlieren.<\/p>\n<p>Etwas Abhilfe schaffen .css expressions. Expressions sind auf Javascript basierende MS propriet\u00e4re Eigenschaften, die nur vom InternetExplorer verstanden werden. Da das .css dadurch nicht mehr validiert, sollte man Expressions in die conditionel comments setzen.<\/p>\n<p>Ein Codebeispiel, welches sowohl min- width als auch max-width f\u00fcr den IE6 sinnvoll festlegt ist bei <a href=\"http:\/\/jeenaparadies.net\/weblog\/2007\/mar\/min-max-width-expression\">Webdesign JeenaParadies zu finden<\/a>.<br \/>\nHerzlichen Dank, hat geholfen !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bei mir hat nun auch endlich ein neuer Monitor Einzug gehalten. Der R\u00f6hrentr\u00fcmmer ist weg,\u00c2\u00a0 vor mir steht ein schnuckliger Asus Flatscreen -\u00c2\u00a0 und man gew\u00f6hnt sich doch sehr schnell und sehr gerne an das gef\u00e4llige Format.\u00c2\u00a0 Das Arbeiten mit dem html Editor und mit dem Grafikprogramm ist nun sehr viel komfortabler als vorher.\u00c2\u00a0 Ich  &#8230; <a title=\"Widescreens und flexible Breiten von Webdesign Layouts\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2008\/06\/widescreens-und-flexible-breiten-von-webdesign-layouts\/\" aria-label=\"Mehr Informationen \u00fcber Widescreens und flexible Breiten von Webdesign Layouts\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,143],"yst_prominent_words":[],"class_list":["post-3650","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-css-xhtml"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3650"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3650\/revisions"}],"predecessor-version":[{"id":4037,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3650\/revisions\/4037"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3650"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}