source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/cssgrids/cssgrids-nesting-grids.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/cssgrids/cssgrids-nesting-grids.html@5259
Revision 5259, 10.4 KB checked in by domlowe, 11 years ago (diff)

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>YUI Library Examples: CSS Grids: Nesting Grids</title>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8">
6        <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
7
8<style>
9    /*Supplemental CSS for the YUI distribution*/
10    #custom-doc { width: 95%; min-width: 950px; }
11    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
12    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
13</style>
14
15<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
16
17<!--there is no custom header content for this example-->
18
19<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
20<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
21
22</head>
23<body id="yahoo-com" class=" yui-skin-sam">
24<div id="custom-doc" class="yui-t2">
25<div id="hd">
26        <div id="ygunav">
27                <p>
28            <em>
29                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> 
30            </em>
31                </p>
32                <form action="http://search.yahoo.com/search" id="sitesearchform">
33            <input name="vs" type="hidden" value="developer.yahoo.com">
34            <input name="vs" type="hidden" value="yuiblog.com">
35                    <div id="sitesearch">
36                        <label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
37                            <input type="text" id="searchinput" name="p">
38                            <input type="submit" value="Search" id="searchsubmit" class="ygbt">
39                    </div>
40                </form>
41    </div>
42        <div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
43        <div id="pagetitle"><h1>YUI Library Examples: CSS Grids: Nesting Grids</h1></div>
44</div>
45<div id="bd">
46
47        <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
48
49        <div id="yui-main">
50                <div class="yui-b">
51                  <div class="yui-ge">
52                          <div class="yui-u first example" id="main">
53
54        <h2>CSS Grids: Nesting Grids</h2>
55
56        <div id="example" class="promo">
57        <p>
58        <p>YUI CSS Grids provides a system for subdividing sections of your page with Nesting Grids. These Nesting Grids tell their child units how to divide space. Depending on the holder's class the children divide space differently.</p>
59<p>The default grid holder is <code>div.yui-g</code> which tells its two child units, <code>div.yui-u</code>, to evenly divide the available space. Several special grid holders are available for non-50%/50% splits.</p>      </p>   
60
61        <div class="module example-container  newWindow">
62                        <div id="example-canvas" class="bd">
63
64                <p class="newWindowButton yui-skin-sam">
65        <span id="newWindowLink">
66            <span class="first-child">
67                <a href="cssgrids-nesting-grids_source.html" target="_blank">View example in new window.</a>
68            </span>
69        </span> 
70    </p>
71       
72               
73                </div>
74        </div>                 
75        </div>
76               
77        <h3>YUI CSS Grids' Nesting Grids</h3>
78
79<p>By choosing a different class for the grid holder, child units divide space differently. This example shows all of the available Nesting Grids stacked in the same example.</p>
80
81<h4>Basis Markup Structure</h4>
82
83<textarea name="code" class="HTML" cols="60" rows="10">
84...
85<div class="yui-main">
86   <div class="yui-b">
87      <div class="yui-g">
88         <div class="yui-u first"></div>
89         <div class="yui-u"></div>
90      </div>
91   </div>
92</div>
93...
94</textarea>
95
96<h4>Available Nesting Grid Holders</h4>
97
98<table class="auto">
99        <thead>
100                <tr class="odd">
101                        <th>Class</th>
102                        <th>Description</th>
103                </tr>
104        </thead>
105        <tbody>
106                <tr>
107                        <td><code>.yui-gb</code></td>
108                        <td>1/3 - 1/3 - 1/3</td>
109                </tr>
110                <tr class="odd">
111                        <td><code>.yui-gc</code></td>
112                        <td>2/3 - 1/3</td>
113                </tr>
114                <tr>
115                        <td><code>.yui-gd</code></td>
116                        <td>1/3 - 2/3</td>
117                </tr>
118                <tr class="odd">
119                        <td><code>.yui-ge</code></td>
120                        <td>3/4 - 1/4</td>
121                </tr>
122                <tr>
123                        <td><code>.yui-gf</code></td>
124                        <td>1/4 - 3/4</td>
125                </tr>
126        </tbody>
127</table>
128
129<h5>Note:</h5>
130
131<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p>                         </div>
132                                <div class="yui-u sidebar">
133                                       
134                               
135                                        <div id="examples" class="mod box4">
136                        <div class="hd">
137                                                <h4>
138    CSS Grids Examples:</h4>
139                        </div>
140                                                <div class="bd">
141                                                        <ul>
142                                                                <li><a href='../cssgrids/cssgrids-width.html'>Available Page Widths</a></li><li><a href='../cssgrids/cssgrids-width-custom.html'>Customize the Page Width</a></li><li><a href='../cssgrids/cssgrids-presets.html'>Available Preset Templates</a></li><li class='selected'><a href='../cssgrids/cssgrids-nesting-grids.html'>Nesting Grids</a></li>                                                      </ul>
143                                                </div>
144                                        </div>
145                                       
146                                        <div class="mod box4">
147                        <div class="hd">
148                                                <h4>More CSS Grids Resources:</h4>
149                        </div>
150                        <div class="bd">
151                                                <ul>
152                                                        <!-- <li><a href="http://developer.yahoo.com/yui/cssgrids/">User's Guide</a> (external)</li> -->
153</ul>
154                        </div>
155                                        </div>
156                          </div>
157                </div>
158               
159                </div>
160        </div>
161
162
163<div class="yui-b toc3" id="tocWrapper">
164<!-- TABLE OF CONTENTS -->
165<div id="toc">
166       
167<ul>
168<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Base - Functional Examples" href="../../examples/base/index.html">Base</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="selected "><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
169</div>
170</div>
171        </div><!--closes bd-->
172
173        <div id="ft">
174        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
175        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
176            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
177            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
178            <a href="http://careers.yahoo.com/">Job Openings</a></p>
179        </div>
180</div>
181<script src="../../assets/dpSyntaxHighlighter.js"></script>
182<script language="javascript"> 
183dp.SyntaxHighlighter.HighlightAll('code'); 
184</script>
185</body>
186</html>
187<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:32 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.