/pcq/media/agency_attachments/L8pkS8gpnodJThOdAfv1.jpg)
Follow UsSometime before March 2003, the W3C (World Wide Web Consortium) that develops models, standards and strategies for Web application development, proposed the use of layers in place of tables in designing Web pages as smaller-screen browsing devices, such as PDA and cellphones, suffer from wasted screen-space lost to tabular alignments. The only reason they could offer an alternative was that CSS2 (the next generation standard for Cascading Style Sheets) has already been approved. One major problem in implementing the W3C suggestion was that there was no browser around-IE, Mozilla, etc-that offered CSS2 support. And, you cannot implement this idea, if the browser doesn't support CSS2. Come 2005, we still don't have a browser that supports CSS2.
Thanks to people like Dominique Hazaël-Massieux, Dean Edwards ( http://dean.edwards.name/IE7
) and Eric Meyers ( http://www.meyerweb.com/eric
), such a thing has become possible. No, they have not written a brand new Web browser. Dominique has made a few recommendations and sample code on how to do this without any scripting. The latter two have combined JavaScript techniques and browser behaviors to enhance modern browsers and 'activate' their CSS2 support.
Pure CSS
The Dominique technique is to create CSS classes with layers (DIV tags) in mind. In these classes, you would define absolute positioning coordinates and sizes. Later, in the HTML, you would position this where appropriate on the page. This is very simple to understand and implement, though you would need to have some prior knowledge of coordinates. However, this is also the most cross compatible of the two ideas. Non-CSS browsers or those with CSS disabled, would automatically downgrade and show the items one below the other according to HTML layout rules.
|
Most Web pages have a three-column layout, with menus on the left, advertising or links on the right and the content in the middle. We show the HTML to do this using TABLES below:
Menu comes here
Content comes here
Ads or links go here
CSS-only equivalent is as follows.
.MenuColumn {
Position: absolute;
Left: 10px;
Top: 5px;
Width: 200px;
}
.BodyColumn {
Margin-left: 199px;
Margin-Right: 199px;
}
.LinksColumn {
Position: absolute;
Right: 10px;
Top: 5px;
Width: 200px;
}...
IE 7
IE 7 is not out yet. It's a project from Dean Edwards on SourceForge. The script here is quite long and complicated. To use it you will need to download a ZIP file with some JavaScript files (.js) from
www.dean.
edwards.name. You then have to copy atleast one of these files to a location on your website's directory tree and call it from your script. You need not modify your own code in anyway, except to add CSS2-compatible tags, directives and attributes.
There are a few bugs and it's quite early yet (Dean says it is Alpha 0.7.3 in its version!), you can nonetheless use the script to get some stunning effects and layouts. One small comment at this point is that most of his Web pages will tell you that these scripts won't work with MSIE, but they work perfectly well with IE 6.
One of the interesting additions is that IE 7 allows you to add to your CSS classes something called the 'CSS selectors'. These look like:
li:hover > ul {display: block;}
This style adds a 'hover' attribute to a list-item (LI) with a display value of 'block', only if it is placed inside an un-numbered list (UL). So, LI tags inside a numbered (OL) list are not affected. This is a powerful way to apply styles, and this is a purely CSS2 behavior.
One step higher would be to use commented directive blocks to apply styles to only those browsers that understand them. Of course, at this point of time, only MSIE understands commented directives. The example below applies the style we discussed above to only MSIE 5.0 and higher.
An example of using IE 7 in an HTML page to display a menu is shown in the below code.
...