← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/docs/cssgrids/cssgrids-align.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

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