If you're looking for a fast way to set up a professional-looking web site, this series of articles may be just what you need. It shows you how to use Yahoo Grid CSS, a CSS library that will help you build web pages quickly.
Template Presets for the Yahoo Grid CSS - Using customized web page templates with the Yahoo Grid CSS framework (Page 2 of 4 )
As I explained at the beginning of this article, Yahoo's Grid CSS framework offers a decent level of flexibility for working with predefined web page templates; this is a point that I covered profusely in the previous tutorial. However, it's also possible to "tweak" these templates a bit to build web documents that have different widths from the ones defined by default.
Now that I have introduced this concept, please take a look at the signature of the following (X)HTML file. It defines a "custom-doc" main DIV on top of the file structure, which is handy for building a custom 700px width web page. The sample code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Grid CSS - Custom 700px width, centered</title> <!-- Source File --> <link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" /> <style> #custom-doc{ margin:auto;text-align:left;/* leave unchanged */ width:53.84em;/* non-IE */ *width:52.54em;/* IE */ min-width:600px;/* optional but recommended */ } </style> </head> <body> <div id="custom-doc"> <div id="hd"> <!-- header --> <h2>This is the header section</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p> </div> <div id="bd"> <!-- body --> <h2>This is the body section</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p> </div> <div id="ft"> <!-- footer --> <h2>This is the footer section</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p> </div> </div> </body> </html>
As demonstrated previously, building customized web pages using the Yahoo CSS framework is a pretty accessible process, since it only requires adding some additional CSS styles on top of the pertinent web document. You can see that I defined a "custom-doc" selector. The selector establishes the whole width of the web page, in this way creating a completely customized document.
Nonetheless, I have to admit that calculating the width of this custom web page isn't as straightforward as it seems, since this process requires some previous calculation, according to Yahoo's specifications.
For instance, suppose that you want to build a web document with a customized width. First you'll have to divide your desired pixel width by 13. Next, the result will be the width expressed in "ems" for all non-IE browsers, while the value you just calculated needs to be multiplied by .9759 to find the width in ems for IE.
I performed these calculations to obtain the 700px with that is shown in the previous example. I think that you won't have major problems defining other values for your own customized web pages.
Okay, at this point I firmly believe that you grasped the logic necessary for building completely customized web pages using the Yahoo Grid CSS framework. Nonetheless, it won't hurt at all if I show you some other practical examples of this customization process. So, in the following section of this article, I'll show you how to create some additional custom web documents using the functionality provided by this CSS package.
To learn these brand new hands-on examples, click on the link that appears below and keep reading.
Style Sheets 
/ 5 
Using Web Page Grids in Yahoo Grid CSS
