CSS, XHTML, Standards du web, Tutoriaux, Techniques Web, Astuces. Eniris : Post-it™ on line

le header de l'exemple :

<link rel=STYLESHEET href=stylesmall.css type=text/css>
<link rel=STYLESHEET href=stylebig.css type=text/css>
<link rel=STYLESHEET href=stylehuge.css type=text/css>

<script language="JavaScript">
<!--

function dynamicStyle() {
//var w = (d.all) ? d.body.clientWidth : innerWidth;
//alert(w)
var screenW = (document.body) ? document.body.clientWidth : innerWidth
var theStyle = (screenW > 1250) ? 'huge' : (screenW > 1000) ? 'big' : 'small';
//alert(screenW + ' ' + document.body.clientWidth)
var i, a;
for (i = 0; a = document.getElementsByTagName('link')[i]; i++) {
if (a.getAttribute('href').indexOf(theStyle) != -1) {
a.disabled = false;
} else {
a.disabled = true;
}
}
}

window.onload = window.onresize = dynamicStyle;

//-->
</script>
<style>
#primary {padding: 250px 0 475px 0; text-align:center; border:2px solid #cccccc;}
#box {padding: 50px 0; text-align:center;}
#box2 {padding: 50px 0; text-align:center;}
</style>
</head>

le body de l'exemple :

<div id="primary">Main Content Area : Fixed Width (750px wide) </div>

<div id="secondary">

<div id="box"> Content Area </div>

<div id="box"> Content Area </div>

<div id="box"> Content Area </div>

<div id="box2"> Content Area </div>

<div id="box2"> Content Area </div>

<div id="box2"> Content Area </div>

</div>

<div id="tertiary"><strong>About the Author</strong><br>

Mike Madaio claims to publish witty musings on user experience, usability and
emerging technologies at <a href="http://mikemadaio.com">his blog</a>.
During the few waking hours he spends away from an internet connection, he enjoys eating
sandwiches and spending time at the <a href="http://philadelphiacurlingclub.org">local
curling club</a>. </div>