← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/cssgrids/cssgrids-align.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/cssgrids/cssgrids-align.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Aligning Grid Units</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Aligning Grid Units</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
    <p>YUI Grids makes it easy to align units in various ways, using basic CSS properties.</p>
22
 
</div>
23
 
 
24
 
<div class="example newwindow">
25
 
    <a href="cssgrids-align-example.html" target="_blank" class="button">
26
 
        View Example in New Window
27
 
    </a>
28
 
</div>
29
 
 
30
 
<h3>Horizontal Alignment</h3>
31
 
<p>Sometimes is it desirable for  units to be horizontally centered when taking up less than 100% of the width of the containing grid.  Rather than setting the alignment for all grids, we will add an <code>ID</code> to target the specific content being aligned.  For this example, the <code>ID</code> "demo" is used, but this should be tailored to your specific content.</p>
32
 
 
33
 
<pre class="code prettyprint">&lt;div class=&quot;yui3-g&quot; id=&quot;demo&quot;&gt;
34
 
    &lt;div class=&quot;yui3-u-1-3&quot;&gt;&lt;p&gt;I take up 1&#x2F;3 of my container.&lt;&#x2F;p&gt;&lt;&#x2F;div&gt;
35
 
    &lt;div class=&quot;yui3-u-1-3&quot;&gt;&lt;p&gt;I take up 1&#x2F;3 of my container.&lt;&#x2F;p&gt;&lt;&#x2F;div&gt;
36
 
&lt;&#x2F;div&gt;</pre>
37
 
 
38
 
 
39
 
<p>Using the CSS <code>text-align</code> property on the containing grid tells the units inside of a grid how to align.  We will also reset the centering so that subsequent content is left-aligned.</p>
40
 
 
41
 
<pre class="code prettyprint">&lt;style&gt;
42
 
#demo {
43
 
    text-align: center;
44
 
}
45
 
 
46
 
#demo .yui3-u-1-3 {
47
 
    text-align: left;
48
 
}
49
 
&lt;&#x2F;style&gt;</pre>
50
 
 
51
 
 
52
 
<h3>Vertical Alignment</h3>
53
 
<p>Vertical alignment tells mixed height units how they should align relative to one another, so at least 2 units are required.</p>
54
 
 
55
 
<pre class="code prettyprint">&lt;div class=&quot;yui3-g thumb-captions&quot;&gt;
56
 
    &lt;div class=&quot;yui3-u-1-3&quot;&gt;
57
 
        &lt;a href=&quot;#&quot;&gt;&lt;img width=&quot;80&quot; height=&quot;60&quot; src=&quot;museum.jpg&quot;&gt;
58
 
            Lorem ispum
59
 
        &lt;&#x2F;a&gt;
60
 
    &lt;&#x2F;div&gt;
61
 
    &lt;div class=&quot;yui3-u-1-3&quot;&gt;
62
 
        &lt;a href=&quot;#&quot;&gt;&lt;img height=&quot;80&quot; width=&quot;60&quot; src=&quot;museum.jpg&quot;&gt;
63
 
            Lorem ispum
64
 
        &lt;&#x2F;a&gt;
65
 
    &lt;&#x2F;div&gt;
66
 
    &lt;div class=&quot;yui3-u-1-3&quot;&gt;
67
 
        &lt;a href=&quot;#&quot;&gt;&lt;img height=&quot;80&quot; width=&quot;60&quot; src=&quot;museum.jpg&quot;&gt;
68
 
            Lorem ispum
69
 
        &lt;&#x2F;a&gt;
70
 
    &lt;&#x2F;div&gt;
71
 
&lt;&#x2F;div&gt;</pre>
72
 
 
73
 
 
74
 
<p>Each unit needs to be told how it should align using the CSS <code>vertical-align</code> property.  In this case, we want them all to be bottom aligned.</p>
75
 
 
76
 
<pre class="code prettyprint">&lt;style&gt;
77
 
.thumb-captions .yui3-u-1-3 {
78
 
    vertical-align: bottom;
79
 
}
80
 
&lt;&#x2F;style&gt;</pre>
81
 
 
82
 
 
83
 
<h3>Vertically Center a Single Unit</h3>
84
 
<p>Its possible to vertically center a single unit, although a second stub unit is required for it to align with.</p>
85
 
 
86
 
<pre class="code prettyprint">&lt;div class=&quot;yui3-g&quot; id=&quot;demo&quot;&gt;
87
 
    &lt;div class=&quot;yui3-u align-stub&quot;&gt;&lt;&#x2F;div&gt;
88
 
    &lt;div class=&quot;yui3-u-1-3&quot;&gt;
89
 
        &lt;p&gt;Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis.&lt;&#x2F;p&gt;
90
 
    &lt;&#x2F;div&gt;
91
 
&lt;&#x2F;div&gt;</pre>
92
 
 
93
 
 
94
 
<p>Setting the height of the stub to the desired height of the container allows the content to align with the middle of the stub, vertically centered in the container.  Setting the <code>vertical-align</code> CSS property for both units tells them how to behave with repsect to the other units.</p>
95
 
 
96
 
<pre class="code prettyprint">&lt;style&gt;
97
 
#demo .align-stub {
98
 
    height: 200px;
99
 
}
100
 
 
101
 
#demo .align-stub,
102
 
#demo .yui-u-1-3 {
103
 
    vertical-align: middle;
104
 
}
105
 
&lt;&#x2F;style&gt;</pre>
106
 
 
107
 
 
108
 
<h5>Note:</h5>
109
 
<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>
110
 
</div>
111
 
        </div>
112
 
 
113
 
        <div id="sidebar" class="yui3-u">
114
 
            
115
 
 
116
 
            
117
 
                <div class="sidebox">
118
 
                    <div class="hd">
119
 
                        <h2 class="no-toc">Examples</h2>
120
 
                    </div>
121
 
 
122
 
                    <div class="bd">
123
 
                        <ul class="examples">
124
 
                            
125
 
                                
126
 
                                    <li data-description="Each unit has a className that provides its percentage width.">
127
 
                                        <a href="cssgrids-units.html">Using Grid Units</a>
128
 
                                    </li>
129
 
                                
130
 
                            
131
 
                                
132
 
                                    <li data-description="This is a template for creating fixed-width layouts.">
133
 
                                        <a href="cssgrids-fixed.html">Fixed Page Template</a>
134
 
                                    </li>
135
 
                                
136
 
                            
137
 
                                
138
 
                                    <li data-description="This is a template for creating fluid layouts.">
139
 
                                        <a href="cssgrids-fluid.html">Fluid Page Template</a>
140
 
                                    </li>
141
 
                                
142
 
                            
143
 
                                
144
 
                                    <li data-description="Basic CSS properties are leveraged to horizontally and vertically align units.">
145
 
                                        <a href="cssgrids-align.html">Aligning Grid Units</a>
146
 
                                    </li>
147
 
                                
148
 
                            
149
 
                                
150
 
                            
151
 
                                
152
 
                            
153
 
                                
154
 
                            
155
 
                                
156
 
                            
157
 
                                
158
 
                            
159
 
                                
160
 
                            
161
 
                                
162
 
                            
163
 
                        </ul>
164
 
                    </div>
165
 
                </div>
166
 
            
167
 
 
168
 
            
169
 
                <div class="sidebox">
170
 
                    <div class="hd">
171
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
172
 
                    </div>
173
 
 
174
 
                    <div class="bd">
175
 
                        <ul class="examples">
176
 
                            
177
 
                                
178
 
                            
179
 
                                
180
 
                            
181
 
                                
182
 
                            
183
 
                                
184
 
                            
185
 
                                
186
 
                                    <li data-description="Creating left navigation using the MenuNav Node Plugin.">
187
 
                                        <a href="../node-menunav/menunav-leftnav.html">Basic Left Nav</a>
188
 
                                    </li>
189
 
                                
190
 
                            
191
 
                                
192
 
                                    <li data-description="Creating top navigation using the MenuNav Node Plugin">
193
 
                                        <a href="../node-menunav/node-menunav-2.html">Basic Top Nav</a>
194
 
                                    </li>
195
 
                                
196
 
                            
197
 
                                
198
 
                                    <li data-description="Creating menu button navigation using the MenuNav Node Plugin">
199
 
                                        <a href="../node-menunav/node-menunav-3.html">Menu Button Top Nav</a>
200
 
                                    </li>
201
 
                                
202
 
                            
203
 
                                
204
 
                                    <li data-description="Creating split button navigation using the MenuNav Node Plugin">
205
 
                                        <a href="../node-menunav/node-menunav-4.html">Split Button Top Nav</a>
206
 
                                    </li>
207
 
                                
208
 
                            
209
 
                                
210
 
                                    <li data-description="Adding shadows to submenus of a left nav using the MenuNav Node Plugin">
211
 
                                        <a href="../node-menunav/node-menunav-5.html">Left Nav with Submenus with Shadows</a>
212
 
                                    </li>
213
 
                                
214
 
                            
215
 
                                
216
 
                                    <li data-description="Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin">
217
 
                                        <a href="../node-menunav/node-menunav-6.html">Left Nav With Submenus With Rounded Corners</a>
218
 
                                    </li>
219
 
                                
220
 
                            
221
 
                                
222
 
                                    <li data-description="Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr">
223
 
                                        <a href="../node-menunav/node-menunav-7.html">Skinning Menus Created Using the MenuNav Node Plugin</a>
224
 
                                    </li>
225
 
                                
226
 
                            
227
 
                        </ul>
228
 
                    </div>
229
 
                </div>
230
 
            
231
 
        </div>
232
 
    </div>
233
 
</div>
234
 
 
235
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
236
 
<script>prettyPrint();</script>
237
 
 
238
 
</body>
239
 
</html>