zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden IE min/max-width im Standard Modus

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 04.11.2005, 22:11
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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:
/* 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';
Das gesamte JavaScript-Teil kann natürlich ausgelagert werden.


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>
Für ein sauberes verhalten des Browser-Cache (Client-Caching) sollte gesorgt sein.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 06.11.2005, 19:09
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 07.12.2005, 23:58
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #14 (permalink)  
Alt 10.01.2006, 17:09
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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;
		 
	} 
}
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>
Mit Zitat antworten
  #15 (permalink)  
Alt 20.01.2006, 12:42
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>&lt;/head>&lt;body>&lt;div id="wrap">&lt;!--[if lte IE 6]>&lt;div onresize="location.href = location.href;" id="empx" style="width: 1em; position:absolute; top: -1000px; left: -1000px;">&lt;/div>&lt;script language="JavaScript" src="cc_ie_minmax_width.js" type="text/javascript">&lt;/script>&lt;![endif]--></code>
</div> 




</div></body></html>
__________________
</ulle>
Mit Zitat antworten
  #16 (permalink)  
Alt 26.11.2007, 17:21
Benutzerbild von Carolin
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.11.2007
Beiträge: 232
Carolin wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #17 (permalink)  
Alt 06.02.2011, 13:06
Benutzer
neuer user
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle Beitrag anzeigen
Folgende Überlegungen:
- min/max-width für den IE kleiner Version 7 soll realisiert werden
- mit Conditional Comments kann ich ja alles verstecken
- Expression ist JavaScript (leider nur einzeilig)
- Richtiges JavaScript - Okay ist ja ein Addon
Etwas Ähnliches habe ich auch hier bei ProjectSeven gefunden, vielleicht hilft es ja bei der einen oder anderen Anwendung.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:04 Uhr.