Home arrow Style Sheets arrow Page 3 - Template Presets for the Yahoo Grid CSS
STYLE SHEETS

Template Presets for the Yahoo Grid CSS


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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
August 22, 2007
TABLE OF CONTENTS:
  1. · Template Presets for the Yahoo Grid CSS
  2. · Using customized web page templates with the Yahoo Grid CSS framework
  3. · Building web pages with custom widths
  4. · Introducing the concept of web page presets

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Template Presets for the Yahoo Grid CSS - Building web pages with custom widths
(Page 3 of 4 )

In the previous section, I showed you how to build a 700px width custom web page by taking advantage of the remarkable capabilities offered by the Yahoo Grid CSS framework. Now I want to walk you through the development of another concrete example to illustrate how to extend this customization process further to create a web document of 1000px width.

As you might have guessed, the procedure for building this custom web page looks very similar to the one that I demonstrated in the previous section. It can be clearly illustrated by the following (X)HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Custom 1000px 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:76.92em;/* non-IE */
   *width:75.06em;/* 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 you can see, in the above example I simply defined a "custom-doc" ID, which came in handy for building a custom 1000px width web page. As I noted in the previous section, this process doesn't require much effort from you. You only need to create these specific styles, and then calculate the appropriate width values for both non-IE and IE browsers.

So far, so good, right? At this point, after studying all of the practical examples that I coded previously, you should have a much closer idea of how to use this helpful CSS framework to create custom web pages. Still, this library has some additional features that need to be properly reviewed, like the implementation of web page presets for building basic web page layouts very quickly,

Therefore, in the last section of this tutorial I'm going to introduce you to the utilization of web document presets. 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials