Einzelnen Beitrag anzeigen
  #13 (permalink)  
Alt 07.12.2005, 23:58
ulle ulle ist offline
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