Replace tables with DIVs and CSS


By now, most web designers are aware of the many benefits of using (CSS) to control the formatting and appearance of text elements within their web pages. Indeed, if applied properly, Cascading Style Sheets can substantially cut down the amount of code needed to present a web page in a polished and professional manner.

What few designers realise however, is that CSS is capable of so much more than just handling a page's text formatting. If used to its fullest capability, the Style Sheet is capable of controlling just about every aspect of page layout and presentation, even to the extent of replacing a Hyper-Text document's traditional table-based design structure.

Quite aside from saving the web developer a substantial amount of coding time, this approach also cuts down the amount of code needed to display a web page properly to an absolute minimum. So much so that in the recent redesign of one of our web sites, the use of CSS controlled HTML cut the average document size from 24kb to less than 5kb.

The key to designing CSS controlled web pages, rests in the use of DIV Tags and DIV IDs. For example, a traditional table structure would look something like this:






Example Text

Example Image

With CSS control, exactly the same look and feel can be achieved by the following two DIV Tags:

Example Text


Example Image

The DIV ID passes control of layout and appearance to the CSS, which handles it as follows:

#content {
position:absolute;
width: 560px;
height: 100px;
top: 10px;
left: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
}

#image {
position:absolute;
width: 240px;
height: 100px;
top: 10px;
left: 660px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
}

On the face of it, it may seem like this entails some extra work on the designer's part, but don't forget that at the same time as controlling the DIV Tag's position and appearance, the CSS also handles all text formatting, and that the above Style Sheet will only need to be written once in order to control an entire web site.
Then of course there is the fact that the above example is an immensely simple one. Imagine for a moment, the sheer amount of code which is saved by using CSS over the course of writing an in-depth web page.

The end result is an HTML document which has been stripped of all unnecessary code and is consequently extremely 'light-weight' and easily indexed by search engines.

Additionally, it is also possible to radically alter a page's appearance at the click of a button without ever changing any of its HTML code. This approach is very capably demonstrated at the CSS Zen Garden, where more information about the power of CSS controlled web design can be found.

Furthermore, like HTML, CSS is undergoing constant revisions and will doubtlessly grow to play an even more important part in web design during years to come. Therefore, now may be a good time to further acquaint yourself with the full functionality of this essential web design element.

Stumble
Delicious
Technorati
Twitter
Facebook

0 Comments:

Post a Comment

Related Posts with Thumbnails
 

Wallpapers And News Blog Copyright © 2010 Designed by Imran Yousaf, Sulman Yousaf