|
|||
![]()
Begründungen für den GHOST-Scrollbalken im Gecko, bitte an entsprechender Stelle diskutieren.
Diskussion Mozialla-Zucken wegen Scrollbalken ______________________________ FINAL Nach weiteren mühsamen Tests habe ich nun folgende Lösung für ein vernüftigen min-width / max-width einer WEBpage, auch im IE kleiner Version 7. Warum min-width ? => Damit die Page auch bei größerem Schriftgrad darstellbar bleibt. Realisiert mit einem min-width im BODY. Warum max-width ? => Damit die Page auch bei sehr breiten Auflösungen des Bildschirms lesbar bleibt, sprich nicht aus dem Ruder läuft. Realisiert mit einem max-width in allen umschliessenden Container ( zb. top, content und footer) Warum keine fest Breite ? => Warum sollte die Page nicht eine verfügbare vernüftige Breite nutzen, bzw. warum sollte die Page evtl. mehr horizontale Scrollbalken erzeugen als notwendig. Ideal für mich ist ein => liquid design Einstellungen des Scripts: Zitat:
Hier das TEST-Case: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; border-collapse:collapse; border-spacing: 0; } html[xmlns] { height : 100%; padding-bottom : .005em; } html, body { color: #000000; background: #DDDDDD; line-height: 1.45; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 6px; /* boxModelFix */ background-color: #AAAAAA; min-width: 47.3em; /* minWidthBody */ } #idname1, #idname2, #idname3 { margin: 0 auto 1em; border: 1px solid #FF0000; /* boxModelFix */ padding: 1em; /* boxModelRelativ */ background-color: #FFFFFF; max-width: 65em; /* maxWidthIDs */ } p { font-size: .8em; background-color: #BBBB00; } /*]]>*/ </style> </head><body> <div id="idname1"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <div id="idname2"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <div id="idname3"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <!--[if lt IE 7]> <div onresize="window.history.go(0);" id="em-lenght" style="width: 1em; height: 1em; position:absolute; top: -1000px; left: -1000px;"></div> <script type='text/javascript'> idList = new Array(); /* set min-width BODY / max-width ID in (em) by hand */ var minWidthBody = 47.3; var maxWidthIDs = 65; /* set boxModel Values (relative EM and fix PX) from BODY and IDs (addition) */ var boxModelFix = 14; // Pixel var boxModelRelativ = 2; // EM /* set all Containing no-wrap-Blocks #id */ idList[0] = 'idname1'; idList[1] = 'idname2'; idList[2] = 'idname3'; function Element (id) { this.id = id; } for (var cnt=0 ; cnt < idList.length; cnt++) { idList[cnt] = new Element (idList[cnt]); } function checkBodyWidth() { var em = document.getElementById("em-lenght").offsetWidth boxModelValues = Math.ceil(em * boxModelRelativ) + boxModelFix; browserBorder = 9; maximal = Math.ceil(em * maxWidthIDs) + browserBorder; minimal = Math.ceil(em * minWidthBody) + browserBorder; var value = 'auto'; if (document.body.offsetWidth > (maximal + boxModelValues) ) { value = maximal+'px'; } if (document.body.offsetWidth <= minimal ) { value = (minimal - boxModelValues)+'px'; } for (var i=0 ; i < idList.length; i++) { document.getElementById(idList[i].id).style.width = value; } return; } /* Set width value */ checkBodyWidth(); /* Control window.onresize */ function windowSize() { if (document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } function newLoad () { if (windowSizeSave != windowSize() ) { window.history.go(0); } } if (!window.windowSizeSave && document.body.offsetWidth) { window.onresize = newLoad; windowSizeSave = windowSize(); } </script> <![endif]--> </body></html> ![]()
__________________
</ulle> |
Sponsored Links |
|
|||
![]()
Hinweis:
Ein Kröte gibt es mit dem Einsatz des JavaScript zu schlucken. Da die Breite der umschliessenden Container evtl. durch das Script definiert werden, je nach Breite des Viewport und eingestelltem Schriftgrad, dies nach einlesen eines Print-CSS, so hat dies natürlich Auswirkung auf das Print-Layout. Im zweifel ist es zu Breit und der Text wird abgeschnitten. Sieht man übrigens sehr oft auf schlecht gemachten WEBpages, die kein extra Print-Style verwenden und Fixe Breiten jenseits der DinA4 Breite anlegen ![]() Der beschriebene Effekt tritt natürlich bei allen nachträglich über JS bzw. Expression definierten Breiten auf. Es ist also keine Problem des vorgestellten IE-Addon. Siehe auch max-width über Expression und die daraus entstehenden Probleme. Maßnahme: Alle Elemente die im Druckstyle nicht ausgeschlossen werden, also evtl. ganze Container innerhalb der "Wrapper" oder nur Element-Typen wie Absatz (p) oder Überschriften (h), einfach mit einer definierten Breite versehen. Ich benutze dazu eine width: 170mm;, diese entspricht ca. einem Standard Hochformat im IE (also ohne veränderte Abstände zum Papierrand). Das extra Print-Style für den IE natürlich auch mit CC vor guten Browsern verstecken ![]() ________________ Falls jemand dieses JavaScript (Addon) für den IE verwendet und negative Erfahrungen bei der Darstellung der Sites bekommt, so möge er diese doch hier mitteilen.
__________________
</ulle> |
Sponsored Links |
|
|||
![]()
Korrektur
Hallo, falls jemand dieses Script eingesetzt hat und dabei einige Unklarheiten aufgefallen sind, so habe ich nun die verbesserte Lösung. Leider ist mir in der ersten Lösung ein Denkfehler unterlaufen. Es ist ja auch nicht ganz so einfach den [min-width] des BODY auf ein innenliegenden Container abzubilden. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; border-collapse:collapse; border-spacing: 0; } html[xmlns] { height : 100%; padding-bottom : .005em; } html, body { color: #000000; background-color: #FFFFFF; line-height: 1.45; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; min-width: 46.25em; /* minBody */ padding: 0 10px; /* boxBodyfix = 20px */ background-color: #FFFF00; } #id-1 { margin: 0 auto; border: 2px solid #FF0000; /* boxIDsFix = 4px */ padding: 1em; /* boxIDsRelative = 2em */ background-color: #AADDFF; max-width: 59em; /* maxIDs */ } p { font-size: .8em; background-color: #55CCFF; } /*]]>*/ </style> </head><body> <div id="id-1"> textfluss...</p> <p style="text-align: right;">...textfluss</p> </div> <!--[if lte IE 6]> <div onresize="window.history.go(0);" id="em-lenght" style="width: 1em; height: 1em; position:absolute; top: -1000px; left: -1000px;"></div> <script type='text/javascript'> idList = new Array(); /* set [body] values by hand */ var minBody = 46.25; //min-width var boxBodyFix = 20; //BoxModel (Pixel) (left+right) var boxBodyRelative = 0; //BoxModel (EM) (left+right) /* set [#id] values by hand */ var maxIDs = 59; //max-width var boxIDsFix = 4; //BoxModel (Pixel) (left+right) var boxIDsRelative = 2; //BoxModel (EM) (left+right) /* set all [#id] width max-width by hand */ idList[0] = 'id-1'; //idList[1] = 'id-2'; //idList[2] = 'id-3'; /**** END EDIT **************************************/ function Element (id) { this.id = id; } for (var cnt=0 ; cnt < idList.length; cnt++) { idList[cnt] = new Element (idList[cnt]); } function checkBodyWidth() { var em = document.getElementById("em-lenght").offsetWidth var boxBodyValues = Math.ceil(em * boxBodyRelative) + boxBodyFix; var boxIDsValues = Math.ceil(em * boxIDsRelative) + boxIDsFix; var IEcorrection = 4; // Pixel weniger Platz zu Firefox maxWidth = Math.ceil(em * maxIDs); minWidth = Math.ceil(em * minBody) - IEcorrection; var value = 'auto'; if ( document.body.offsetWidth > (maxWidth + boxIDsValues + boxBodyValues) ) { value = maxWidth+'px'; } if (document.body.offsetWidth < (minWidth + boxBodyValues) ) { value = (minWidth - boxIDsValues)+'px'; } for (var i=0 ; i < idList.length; i++) { document.getElementById(idList[i].id).style.width = value; } return; } /* Set width value */ checkBodyWidth(); /* Control window.onresize */ function windowSize() { if (document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } function newLoad () { if (windowSizeSave != windowSize() ) { window.history.go(0); } } if (!window.windowSizeSave && document.body.offsetWidth) { window.onresize = newLoad; windowSizeSave = windowSize(); } </script> <![endif]--> </body></html>
__________________
</ulle> |
|
|||
![]()
Update -> Script
Code:
<!--[if lte IE 6]> <div onresize="location.href = location.href;" id="em-lenght" style="width: 1em; height: 1em; position:absolute; top: -1000px; left: -1000px;"></div> : : : : function newLoad () { if (windowSizeSave != windowSize() ) { //window.history.go(0); // gesicherter RELOAD aus dem Browser Cache location.href = location.href; } } Bewirkt einen Neuaufbau der angezeigten Page nur aus dem Browser-Cache, sofern die Page eine "statische" Dateiendung besitzt (.htm, .html). Bei Endungen die auf dynamische WEBpages (z.B. .php) schliessen lassen ist der IE bisher nicht davon abzubringen noch mal den WEBserver um Rat zu fragen. window.history.go(0); Bewirkt unter Umständen, d.h. bei Dokumenten mit E-Tag im Datei-Header, ein Reload vom WEB-Server. Es wird zwar nur ein "304" übertragen, trotzdem ist durch den Zeitfaktor ein "Flickern" sichtbar. Code:
127.0.0.1 - - [10/Jan/2006:15:56:53 +0100] "GET /_test-case.htm HTTP/1.1" 304 -
__________________
</ulle> |
|
|||
![]()
liquid-Design...
Artikel zum Thema: bs-markup/BLOG => Herausforderung elastische Layouts ______ Nachdem ich weitere Probleme mühsam lösen mußte und das ganze eine riesen Rechnerei mit dem bisherigen Ansatz ist, habe ich mich nun mit einem weiteren umschliessenden Container beholfen. Dieser erlaubt eine min-max-Width Berechnung und Festlegung, für den IE umgerechnet von EM (Schriftgrad) in Pixel, während die Page aufgebaut wird. Dieser gezeigte CODE hat folgende Feature für den IE nachgebildet]][*]Print-Style in Format "portrait"; [url=http][/list] Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de" id="fitness-in-motion"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>wrap</title> <style type="text/css" media="screen"> /*<![CDATA[*/ * { margin: 0; padding: 0; } body { font-size: 100.01%; } /* -------------------------------------------------------- * [#wrap]min-max-width * * margin- , padding- , border-left/right * in [#wrap] nicht moeglich wegen * JavaScript-Function checkBodyWidth(); !! */ #wrap { /* min-width => 47.75em ~ 764px */ min-width: 47.75em; /* var minWidth = 47.75; siehe JavaScript */ max-width: 65em; /* var maxWidth = 65; siehe JavaScript */ /* zentriert */ margin: 0 auto; /* TEST * symmetrie verschoben!! */ padding: 35px 0 6px 0; } #site { /* TEST * symmetrie verschoben!! */ margin: 0 14px 0 69px; } /* -------------------------------------------------------- * END /min-max-width */ /* -------------------------------------------------------- * #site * Hauptcontainer umschliesst alle Inhalte * Ausnahme: #orga-Menu und #signatur */ #site { /* initial Containing Block */ position: relative; min-height: 28em; /* min-height workaround IE */ height: auto !important; height: 28em; border: 1px solid #000000; padding: 1em; background-color: #FFFFFF; } h1,p { padding-bottom: 1.5em; } /*]]>*/ </style> <style type="text/css" media="print"> /*<![CDATA[*/ /* -------------------------------------------------------- * @print [#wrap]-Inhalt für IE auf 17cm (portrait) */ #wrap * { width: auto !important; /* IE wegen #wrap [width]-SCRIPT */ width: 170mm; float: none !important; } #wrap * * { width: auto !important; /* IE wegen #wrap [width]-SCRIPT */ width: auto; } /* -------------------------------------------------------- * END @print */ /*]]>*/ </style> </head><body><div id="wrap" style="background-color: #2299FF;"> <!--[if lte IE 6]> <div onresize="location.href = location.href;" id="empx" style="width: 1em; position: absolute; top: -1000px; left: -1000px;"></div> <script type="text/javascript"> /* [#wrap] min/max-width in EM * * by ulle */ var minWidth = 47.75; var maxWidth = 65; function checkBodyWidth() { var empx = document.all.empx.offsetWidth; var viewport = document.body.offsetWidth; var IEcorrection = 4; // Pixel weniger Platz zu Firefox minWidth = Math.ceil(empx * minWidth) - IEcorrection; maxWidth = Math.ceil(empx * maxWidth); var value = "auto"; if ( viewport < minWidth ) { value = minWidth+"px"; } if ( viewport > maxWidth ) { value = maxWidth+"px"; } document.all.wrap.style.width = value; return; } /* Set width value */ checkBodyWidth(); /* Control window.onresize */ function windowSize() { if (document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } function newLoad () { if (windowSizeSave != windowSize() ) { location.href = location.href; } } if (!window.windowSizeSave && document.body.offsetWidth) { window.onresize = newLoad; windowSizeSave = windowSize(); } </script> <![endif]--> <div id="site"> <h1>liquid-Design</h1> Reduktion auf eine CODE-Zeile mit ausgelagerten JavaScript (Ladezeit/Übersicht)</p> <code></head><body><div id="wrap"><!--[if lte IE 6]><div onresize="location.href = location.href;" id="empx" style="width: 1em; position:absolute; top: -1000px; left: -1000px;"></div><script language="JavaScript" src="cc_ie_minmax_width.js" type="text/javascript"></script><![endif]--></code> </div> </div></body></html>
__________________
</ulle> |
|
||||
![]()
Auch wenn das Thema 1. schon alt ist und 2. auch schon ein Link zu dieser Seite vorhanden ist, würde ich doch gerne noch darauf verweisen, eben weil sich dieser Artikel in der Knowledge Base befindet und hier sicherlich Leute auch aktuell nach Tipps suchen.
Für eine variable Seitenbreite, die auch im IE (Standardmodus) funktioniert. stu nicholls | CSS PLaY | min width layout |
|
|||
![]() Zitat:
|
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Menü | FuFi | CSS | 1 | 05.01.2015 16:46 |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
Media Querys - Layout geht wird über den Displayrand angezeigt | DarkNemesis84 | CSS | 9 | 05.05.2013 23:00 |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |