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.
Next: Building web pages with custom widths >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 5 
