|
Emulate table layout using only CSS
Presents the common, self-centering, 3-panel layout produced using only CSS |
MarkFilipak
#:3595242
| 9:33 pm on Mar. 8, 2008 (utc 0) |
The following produces two emulations of self-centering, table layout but using only CSS. The top section centers three fixed width panels: NAV, ARTICLES, and ADVERTS. The bottom section automatically scales the three sections to fit the browser's window width. I have produced these to end the controversy over tables vs. CSS for positioning and sizing. CSS rules! Learn it. <!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]
|
Clark
#:3595319
| 11:13 pm on Mar. 8, 2008 (utc 0) |
You may want to edit it if you still can and stick the code inside a code tag.
|
mattur
#:3595758
| 7:18 pm on Mar. 9, 2008 (utc 0) |
On the basis of this code, I'd use a table ;)
|
MarkFilipak
#:3596002
| 5:11 am on Mar. 10, 2008 (utc 0) |
> On the basis of this code, I'd use a table ;) Did you try it? It's really 2 pages, one above and one below.
|
mattur
#:3596558
| 6:32 pm on Mar. 10, 2008 (utc 0) |
Yes, and though I broadly agree with you on CSS layouts, imho this code will not convince anyone because the equivalent layout table code is (much) simpler. 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.
|
swa66
#:3596838
| 9:59 pm on Mar. 10, 2008 (utc 0) |
I'm not sure all those div's to recreate a table are an improvement. 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.
|
|
