Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"/>
<html>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = ISO-8859-1'>
<meta http-equiv = 'Content-Language' content = 'en'>
<meta http-equiv = 'Content-Script-Type' content = 'text/javascript'>
<meta http-equiv = 'Content-Style-Type' content = 'text/css'>
<meta http-equiv = 'Expires' content = 'Thu, 01 Jan 1970 00:00:00 GMT'>
<meta http-equiv = 'Pragma' content = 'no-cache'>
<meta http-equiv = 'Cache-Control' content = 'no-cache'>
<style>
*.ctr,*.fix,*.fix1,*.fix2,*.fix3{position:absolute}
*.ctr{left:0;top:0;height:50%;width:100%}
*.fix{position:relative;width:600px;margin-left:auto;margin-right:auto}
*.fix,*.fix1,*.fix2,*.fix3{height:100%}
*.fix1{left:0;width:120px}
*.fix2{left:120px;width:360px}
*.fix3{left:480px;width:120px}
*.fix1,*.fix3{background-color:violet} *.fix2{background-color:cyan}
*.fit{position:absolute;top:50%;height:50%}
*.fit1{left:0;width:20%}
*.fit2{left:20%;width:60%}
*.fit3{left:80%;width:20%}
*.fit1,*.fit3{background-color:pink} *.fit2{background-color:lightblue}
*.fix1,*.fix2,*.fix3,*.fit1,*.fit2,*.fit3
{border:solid black 1px}/***** FIXUPs FOR INTERNET EXPLORER *****/
*.fit,*.fix,*.fix1,*.fix2,*.fix3
{height:expression(parseInt(document.documentElement.offsetHeight*0.5)+'px')}
*.fit1,*.fit3
{width: expression(parseInt(document.documentElement.offsetWidth*0.2)+'px')}
*.fit2
{width: expression(parseInt(document.documentElement.offsetWidth*0.6)+'px')}
*.fit
{top: expression(parseInt(document.documentElement.offsetHeight*0.5)+'px')}
*.fix
{position:expression('absolute')}
*.fix
{left: expression(parseInt(((document.documentElement.scrollWidth > 600 ? document.documentElement.scrollWidth:600)-600)*0.5)+'px')}
</style>
</head>
<body>
<div class='ctr'>
<div class='fix'>
<div class='fix1'>NAV</div>
<div class='fix2'>ARTICLES</div>
<div class='fix3'>ADVERTS</div>
</div>
</div>
<div class='fit fit1'>NAV</div>
<div class='fit fit2'>ARTICLES</div>
<div class='fit fit3'>ADVERTS</div>
</body>
</html>
[edited by: SuzyUK at 4:04 pm (utc) on Mar. 13, 2008]
[edit reason] Tried to fix side-scroll [/edit]
Did you try it? It's really 2 pages, one above and one below.
And, to be honest, the CSS is a bit of a coding horror. I personally wouldn't accept a CSS design with this many expressions.
I'd rather see something that eventualy will get replaced in e.g. (x)html 5 with their new tags and use a few divs there for now.
something like in html:
<div id="menu">...</div>
<p>content...</p>
<div id="ads">...</div>
As long as we need extra stuff in the html we're not where we should be. The goal should be that we can completely change layout without touching the html.
As for the expressions: I'm not sure either that's a solution. The solution would be for MSFT to issue a patch to fix their bugs, but that's as likely as hell freezing over and pigs flying combined.
