Build Web interfaces with YUI Grids CSS

chetan1 · 05-12-2008, 05:58 AM

YUI Grids CSS
The use of the YUI Grids CSS feature of the YUI Library added another level of acceptance via a tested solution. YUI Grids CSS provides a CSS solution for delivering page layouts that divide the page into areas.

A great aspect of the YUI Grids CSS feature is its A-level browser support, which provides the highest support level in terms of browsers. This means you don't have to worry about the quirks in different browsers when using CSS for layout.
CSS layout
YUI Grids CSS offers preset page widths and templates, along with the ability to nest and stack layouts to generate what you need. Yahoo boasts the capability to deliver more than 1,000 layout combinations with it. YUI Grids CSS is part of the YUI Library download.

We used the following features of the YUI Grids CSS feature:

* The 100% page width is employed via the doc3 id attribute assigned to the overall <DIV> container.
* The entire page is divided into three rows using three <DIV> elements. The YUI Grids CSS standard id attributes for header (hd), body (bd), and footer (ft) are used.
* The header has three rows using two <P> elements and a
element. The
includes another
that uses YUI Grids CSS features. This includes the 100% page width (doc3 attribute), as well as a preset template that has two columns with the narrower column on the left with a width of 180 pixels. The narrower column is assigned the class id of yui-b with the larger column assigned the yui-main attribute. The two columns are used to ensure the breadcrumb appears above the content area of the page.
<title>Reworked with YUI Grids CSS
<link rel="stylesheet" type="text/css"
href="grids.css" mce_href="grids.css">
</head>
<body>
<div id="doc3">
<div id="hd">
<p class="header1">

<p class="header3">
<span>Text
<span class="logo">
</p>
<div>
<div id="doc3" class="yui-t2">
<div class="yui-b">
<div id="yui-main">
<div class="yui-b">Breadcrumb
</div>
</div>
</div>
</div>
<div id="bd">
<div id="doc3" class="yui-t2">
<div class="yui-b">
<ul class="nav">
<li class="main">Menu
<li class="sub">Nav Link
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
Content goes here
</div>
</div>
</div>
</div>
<div id="ft">
<div id="doc3" class="yui-t2">
<div class="yui-b">
</div>
<div id="yui-main">
<div class="yui-b"> Footer
</div> </div> </div> </div> </div> </body>
You may cringe at the sight of so many <DIV> elements, but this is much easier to follow compared to its table counterpart. Also, the CSS approach allows you to easily modify the layout by editing the CSS or changing what YUI Grids CSS features are used.

05-12-2008, 05:58 AM	#1 (permalink)
chetan1 Status: Member Join Date: Apr 2008 Posts: 43 Trader Rating: (0) TD$: 310.00 Donate	Build Web interfaces with YUI Grids CSS YUI Grids CSS The use of the YUI Grids CSS feature of the YUI Library added another level of acceptance via a tested solution. YUI Grids CSS provides a CSS solution for delivering page layouts that divide the page into areas. A great aspect of the YUI Grids CSS feature is its A-level browser support, which provides the highest support level in terms of browsers. This means you don't have to worry about the quirks in different browsers when using CSS for layout. CSS layout YUI Grids CSS offers preset page widths and templates, along with the ability to nest and stack layouts to generate what you need. Yahoo boasts the capability to deliver more than 1,000 layout combinations with it. YUI Grids CSS is part of the YUI Library download. We used the following features of the YUI Grids CSS feature: * The 100% page width is employed via the doc3 id attribute assigned to the overall <DIV> container. * The entire page is divided into three rows using three <DIV> elements. The YUI Grids CSS standard id attributes for header (hd), body (bd), and footer (ft) are used. * The header has three rows using two <P> elements and a element. The includes another that uses YUI Grids CSS features. This includes the 100% page width (doc3 attribute), as well as a preset template that has two columns with the narrower column on the left with a width of 180 pixels. The narrower column is assigned the class id of yui-b with the larger column assigned the yui-main attribute. The two columns are used to ensure the breadcrumb appears above the content area of the page. <title>Reworked with YUI Grids CSS <link rel="stylesheet" type="text/css" href="grids.css" mce_href="grids.css"> </head> <body> <div id="doc3"> <div id="hd"> <p class="header1"> <p class="header3"> <span>Text <span class="logo"> </p> <div> <div id="doc3" class="yui-t2"> <div class="yui-b"> <div id="yui-main"> <div class="yui-b">Breadcrumb </div> </div> </div> </div> <div id="bd"> <div id="doc3" class="yui-t2"> <div class="yui-b"> <ul class="nav"> <li class="main">Menu <li class="sub">Nav Link </ul> </div> <div id="yui-main"> <div class="yui-b"> Content goes here </div> </div> </div> </div> <div id="ft"> <div id="doc3" class="yui-t2"> <div class="yui-b"> </div> <div id="yui-main"> <div class="yui-b"> Footer </div> </div> </div> </div> </div> </body> You may cringe at the sight of so many <DIV> elements, but this is much easier to follow compared to its table counterpart. Also, the CSS approach allows you to easily modify the layout by editing the CSS or changing what YUI Grids CSS features are used.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How hard is it to build your own PC?	ALINA	Promotion Techniques	3	05-16-2008 11:37 AM
Help me build social networking portal	hermione	Reviews and Critiques	0	08-30-2007 07:55 AM