SunQuest
 
       Style Sheets
  Home arrow Style Sheets arrow Using Yahoo Grid CSS
IBM developerWorks
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Actuate Whitepapers 
Moblin 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Using Yahoo Grid CSS
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 8
    2007-08-21

    Table of Contents:
  • Using Yahoo Grid CSS
  • Building some predefined web page layouts
  • Using another web page template
  • Completing the utilization of the predefined templates

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT

    Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here

    Using Yahoo Grid CSS


    (Page 1 of 4 )

    Are you looking for a way to save time when building professional-looking web sites? You're in luck. Yahoo just released Yahoo Grid CSS. This series will show you how to use it to create the templates you need to make your web pages look attractive and appropriately complement your content.

    Introduction

    Any web designer knows that building professional-looking web sites can be a rather daunting task. The creation process requires the interaction of different disciplines, such as creating the decorative images that will comprise the web site along with the corresponding CSS styles and its structural (X)HTML markup.

    Of course, some processes like designing the web site's images should be completely delegated to one or more graphic designers, so this task shouldn't be hard to tackle. However, things get a bit harsh when it comes to creating the pertinent web page's layout.

    And logically, questions that have to be asked include: do I have to use a three-column layout with liquid widths? Or wouldn't be it better to build a fixed, two-column schema? As you might guess, deciding what kind of web page layout best fits a particular web project may not be as intuitive as it seems at first glance.

    However, if you're currently going through this rather painful experience, the subject of this series might bring good news to you. Yahoo's web designers have recently released a pretty neat framework, called "Yahoo Grid CSS," which among other things, lets you easily build different types of DIV-based web page layouts by using only a few simple templates which also accept a decent level of customization.

    In the course of this three-article series, I'm going to show you how to put the "Yahoo Grid CSS" framework to work for you. You'll find it quite useful in those cases where you don't want to spend your precious time designing a specific web page layout on your own.

    As with every framework that exists today on the web, there are some conventions and directives that need to be followed to get the Grid CSS working seamlessly. I believe that these predefined rules are actually pretty straightforward, and they shouldn't be a major problem to you.

    All right, having introduced the subject of this series, it's time to learn together how to build different kinds of DIV-based web page layouts using the Yahoo Grid CSS framework. Let's get started now!

    More Style Sheets Articles
    More By Alejandro Gervasio


       · If you’re a web designer who needs to build complex web page layouts very quickly...
     

    STYLE SHEETS ARTICLES

    - Creating Gradients for Individual Containers...
    - Creating Gradients for Web Page Headers with...
    - SEO Scrolling Frames Problem Solved
    - Building Cross-Browser Background Effects wi...
    - CSS: Pseudo
    - Using PNG Images to Build Background Effects
    - CSS: Continuing the Clarification of CSS Cla...
    - CSS: Top Secret Classification
    - CSS: Dimensions
    - CSS: Margins and Padding
    - CSS: Crossing the Border
    - CSS: Text, Fonts, and Tables
    - CSS: Working with Text
    - CSS: Backgrounds
    - CSS for the Newbie







    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway