@heiko_rs - ja ist mir bekannt, trotzdem Danke
@klopfdreh - es soll aber im Standard Modus funktionieren!
_______________
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
Wichtig -> es soll ein RESIZE des Window und der Schriftgrad behandelt werden. Es gibt bestimmt eine Menge Scripts die dies können, aber einlesen, einfach benutzen wollte ich nicht. Leider bin ich mit JavaScript ungefähr genauso im Dialog wie mit einem Japaner
. Ich würde es auch gar nicht einsetzen, aber ich bin die Erklärungen an die IE-Nutzer leid.
Nach 2 Tagen "try and error" habe ich folgende Lösung für umschliessende Container. Diese sind mit der Einheit EM definiert um den Schriftgrad zu berücksichtigen. In der Annahme das sehschwache Nutzer auch einen großeren Bildschirm benutzen, aber nicht müssen (scrollbalken).
Um den Schriftgrad zu erkennen habe ich einen Container als Referenz zusätzlich eingesetzt, dieser ist 1em hoch bzw. breit und wird ins Nirvana verschoben. Somit ist der Bezug von einem EM in Pixel gegeben und die Berechnung für die Eigenschaften min/max-width möglich. Gleichzeitig wird dieser zusätzlich Container auf RESIZE überwacht, das wäre eine Schriftgradveränderung, und reagiert.
Die berechneten Werte werden beim Laden des Dokuments gesetzt.
Ich habe meinen Develop-Alert noch im Script gelassen, somit ist ein einfacheres Nachvollziehen bzw. Testen möglich. Evtl. gibt es ja jemand der JavaScript besser beherrscht und das Script verbesseren kann. Das gesamte "Teil" wird am Ende des Dokuments eingesetzt, Container-ID und min/max-Werte sind einzustellen:
Zitat:
/* set min-width / max-width in (em) by hand
*/
var min = 45.3;
var max = 56;
/* set boxModel Values from BODY and IDs (addition)
*/
var boxModelFix = 12; // Pixel
var boxModelRelativ = 2; // EM
/* set all #id
*/
idList[0] = 'idname1';
idList[1] = 'idname2';
idList[2] = 'idname3';
|
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: 5px;
background-color: #AAAAAA;
}
#idname1,
#idname2,
#idname3 {
margin: 0 auto 1em;
border: 1px solid #FF0000;
padding: 1em;
background-color: #FFFFFF;
max-width: 56em;
min-width: 45.3em;
}
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 / max-width in (em) by hand
*/
var min = 45.3;
var max = 56;
/* set boxModel Values from BODY and IDs (addition)
*/
var boxModelFix = 12; // Pixel
var boxModelRelativ = 2; // EM
/* set all #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(handle) {
var em = document.getElementById("em-lenght").offsetWidth
boxModelValues = Math.ceil(em * boxModelRelativ) + boxModelFix;
maximal = Math.ceil(em * max);
minimal = Math.ceil(em * min);
beginbody = document.body.offsetWidth;
var value = 'auto';
if (document.body.offsetWidth > (maximal + boxModelValues) ) {
value = maximal+'px';
}
maxv = value;
if (document.body.offsetWidth <= (minimal + boxModelValues) ) {
value = minimal+'px';
}
minv = value;
for (var i=0 ; i < idList.length; i++) {
document.getElementById(idList[i].id).style.width = value;
}
alert ( 'Handle: ' + handle +'\n'
+'- - - - - - - - - - -\n'
+'body(begin): ' + beginbody +'\n'
+'em: ' + em +'\n'
+'- - - - - - - - - - -\n'
+'maximal: '+ (maximal + boxModelValues) + ' / '+max+'em ' + '+ boxModel\n'
+'value(max): ' + maxv +'\n'
+'- - - - - - - - - - -\n'
+'minimal: '+ (minimal + boxModelValues) + ' / '+min+'em ' + '+ boxModel\n'
+'value(min): ' + minv +'\n'
);
return;
}
/* Set width value
*/
checkBodyWidth('load/Markup');
/* 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>