|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
5 <title>YUI 3.x: CSS Grids Align Example</title> |
|
6 <link rel="stylesheet" href="../../build/cssreset/cssreset.css" type="text/css"> |
|
7 <link rel="stylesheet" href="../../build/cssfonts/cssfonts.css" type="text/css"> |
|
8 <link rel="stylesheet" href="../../build/cssgrids/cssgrids.css" type="text/css"> |
|
9 <script src="../../build/yui/yui-min.js"></script> |
|
10 |
|
11 <style> |
|
12 /* everything below is custom styling to demonstrate how to create a page layout using yui grid units */ |
|
13 |
|
14 /* Fixed, Centered Layout */ |
|
15 |
|
16 #doc { |
|
17 margin:auto; /* center in viewport */ |
|
18 width: 970px; /* fix page width */ |
|
19 background:#efefef; |
|
20 } |
|
21 |
|
22 #main .content { |
|
23 margin-right: 10px; /* gutter between center and right columns */ |
|
24 } |
|
25 |
|
26 .thumb-captions .yui3-u-1-3 { |
|
27 vertical-align: bottom; |
|
28 } |
|
29 |
|
30 #main .yui3-u-1-2, |
|
31 #more .yui3-u-1-4 { |
|
32 vertical-align: middle; |
|
33 } |
|
34 |
|
35 .advertisement .yui3-g, |
|
36 #more { |
|
37 text-align: center; /* horizontally center content */ |
|
38 } |
|
39 |
|
40 #more ul { |
|
41 text-align: left; /* reset for content */ |
|
42 } |
|
43 |
|
44 .advertisement .align-stub { /* empty stub used to fix the parent height and vertically align */ |
|
45 height: 200px; |
|
46 } |
|
47 |
|
48 .advertisement .yui3-u-1-2, |
|
49 .advertisement .align-stub { |
|
50 vertical-align: middle; /* vertically center content */ |
|
51 } |
|
52 |
|
53 /* content presentation (completely arbitrary, remove or customize) */ |
|
54 |
|
55 #hd, .content, #more { |
|
56 border: 1px solid #000; |
|
57 } |
|
58 |
|
59 #hd h1 { |
|
60 font: bold 180% arial; |
|
61 padding: 1em; |
|
62 } |
|
63 |
|
64 .content { |
|
65 border-top: 0; |
|
66 } |
|
67 |
|
68 .content p, .content li, #nav li a { |
|
69 padding: 0.5em 1em; |
|
70 } |
|
71 |
|
72 #nav li a, #extra li a, #more li a { |
|
73 display: block; |
|
74 padding: 0.25em 0; |
|
75 } |
|
76 |
|
77 #nav li a { |
|
78 border: 1px dashed black; |
|
79 padding: 0.5em 1em; |
|
80 } |
|
81 |
|
82 #nav .content { |
|
83 border-right: 0; |
|
84 } |
|
85 |
|
86 #main .thumb-captions { |
|
87 text-align: center; |
|
88 } |
|
89 |
|
90 #main .thumb-captions a { |
|
91 background: #ddd; |
|
92 border: 1px solid #000; |
|
93 display: block; |
|
94 padding: 5px; |
|
95 margin: 0 5px; |
|
96 } |
|
97 |
|
98 #main .thumb-captions img { |
|
99 border: 1px solid #000; |
|
100 margin: 0.5em auto; |
|
101 display: block; |
|
102 } |
|
103 |
|
104 |
|
105 #top-stories { |
|
106 background: #dcdcdc; |
|
107 border-bottom: 1px solid #000; |
|
108 margin-bottom: 1em; |
|
109 } |
|
110 |
|
111 #top-stories ol { |
|
112 background: #dcdcdc; |
|
113 margin: 0 0 0 3.5em; |
|
114 } |
|
115 |
|
116 #top-stories li { |
|
117 list-style-type: decimal; |
|
118 } |
|
119 |
|
120 #top-stories li a { |
|
121 margin-left: -1em; /* collapse some space between list marker and content */ |
|
122 } |
|
123 |
|
124 #extra .advertisement { |
|
125 background: #666; |
|
126 color: #fff; |
|
127 } |
|
128 |
|
129 #more { |
|
130 background: #ccc; |
|
131 margin-top: 1em; |
|
132 } |
|
133 |
|
134 #more ul { |
|
135 padding: 0.5em 0; |
|
136 } |
|
137 |
|
138 #more li { |
|
139 list-style-type: disc; |
|
140 margin: 0 0 0 2.5em; |
|
141 } |
|
142 |
|
143 #more li a { |
|
144 font:83% tahoma; |
|
145 } |
|
146 |
|
147 #ft { |
|
148 background: #999; |
|
149 font:80% verdana; |
|
150 padding: 1em; |
|
151 text-align: center; |
|
152 } |
|
153 </style> |
|
154 |
|
155 </head> |
|
156 <body id="doc"> |
|
157 <div id="hd"> |
|
158 <h1>Page Layout Example</h1> |
|
159 </div> |
|
160 |
|
161 <div class="yui3-g"> |
|
162 <div class="yui3-u-1-5" id="nav"> |
|
163 <div class="content"> |
|
164 <ul> |
|
165 <li><a href="#">lorem ipsum dolor</a></li> |
|
166 <li><a href="#">lorem ipsum dolor</a></li> |
|
167 <li><a href="#">lorem ipsum dolor</a></li> |
|
168 <li><a href="#">lorem ipsum dolor</a></li> |
|
169 <li><a href="#">lorem ipsum dolor</a></li> |
|
170 <li><a href="#">lorem ipsum dolor</a></li> |
|
171 <li><a href="#">lorem ipsum dolor</a></li> |
|
172 <li><a href="#">lorem ipsum dolor</a></li> |
|
173 <li><a href="#">lorem ipsum dolor</a></li> |
|
174 <li><a href="#">lorem ipsum dolor</a></li> |
|
175 </ul> |
|
176 </div> |
|
177 </div> |
|
178 |
|
179 <div class="yui3-u-2-5" id="main"> |
|
180 <div class="content"> |
|
181 <p>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis. Aliquam nec cursus lorem. Sed aliquet hendrerit sem, et consectetur dolor condimentum quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse congue sapien a nibh venenatis sit amet aliquet elit suscipit. Curabitur gravida magna ut diam pellentesque et luctus metus auctor. Nam quis hendrerit enim. Donec tincidunt libero a dolor hendrerit at tempus quam venenatis. In quis tempus ipsum. Vestibulum nulla enim, bibendum ut vestibulum at, laoreet a felis.</p> |
|
182 <div class="yui3-g thumb-captions"> |
|
183 <div class="yui3-u-1-3"> |
|
184 <a href="#"><img width="80" height="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg"> |
|
185 Lorem ispum |
|
186 </a> |
|
187 </div> |
|
188 <div class="yui3-u-1-3"> |
|
189 <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg"> |
|
190 Lorem ispum |
|
191 </a> |
|
192 </div> |
|
193 <div class="yui3-u-1-3"> |
|
194 <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg"> |
|
195 Lorem ispum |
|
196 </a> |
|
197 </div> |
|
198 </div> |
|
199 |
|
200 <div class="yui3-g"> |
|
201 <div class="yui3-u-1-2"> |
|
202 <p>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis. Aliquam nec cursus lorem. Sed aliquet hendrerit sem, et consectetur dolor condimentum quis. Curabitur gravida magna ut diam pellentesque et luctus metus auctor. Nam quis hendrerit enim. </p> |
|
203 </div> |
|
204 <div class="yui3-u-1-2"> |
|
205 <p>Suspendisse congue sapien a nibh venenatis sit amet aliquet elit suscipit. Vestibulum nulla enim, bibendum ut vestibulum at, laoreet a felis.</p> |
|
206 </div> |
|
207 </div> |
|
208 </div> |
|
209 </div> |
|
210 |
|
211 <div class="yui3-u-2-5" id="extra"> |
|
212 <div class="content"> |
|
213 <div class="yui3-g"> |
|
214 <div id="top-stories"> |
|
215 <div class="yui3-u-1-2"> |
|
216 <ol> |
|
217 <li><a href="#">lorem ipsum dolor</a></li> |
|
218 <li><a href="#">lorem ipsum dolor</a></li> |
|
219 <li><a href="#">lorem ipsum dolor</a></li> |
|
220 <li><a href="#">lorem ipsum dolor</a></li> |
|
221 <li><a href="#">lorem ipsum dolor</a></li> |
|
222 </ol> |
|
223 </div> |
|
224 |
|
225 <div class="yui3-u-1-2"> |
|
226 <ol start="6"> |
|
227 <li><a href="#">lorem ipsum dolor</a></li> |
|
228 <li><a href="#">lorem ipsum dolor</a></li> |
|
229 <li><a href="#">lorem ipsum dolor</a></li> |
|
230 <li><a href="#">lorem ipsum dolor</a></li> |
|
231 </ol> |
|
232 </div> |
|
233 </div> |
|
234 </div> |
|
235 <div class="advertisement"> |
|
236 <div class="yui3-g"> |
|
237 <div class="yui3-u align-stub"></div> |
|
238 <p class="yui3-u-1-2">Nulla venenatis ante in enim ornare dapibus. Integer placerat ligula diam.</p> |
|
239 </div> |
|
240 </div> |
|
241 </div> |
|
242 </div> |
|
243 </div> |
|
244 |
|
245 |
|
246 <div id="more"> |
|
247 <div class="yui3-g"> |
|
248 <ul class="yui3-u-1-4"> |
|
249 <li><a href="#">lorem</a></li> |
|
250 <li><a href="#">ipsum</a></li> |
|
251 <li><a href="#">dolor</a></li> |
|
252 </ul> |
|
253 |
|
254 <ul class="yui3-u-1-4"> |
|
255 <li><a href="#">lorem</a></li> |
|
256 <li><a href="#">ipsum</a></li> |
|
257 <li><a href="#">dolor</a></li> |
|
258 </ul> |
|
259 |
|
260 <ul class="yui3-u-1-4"> |
|
261 <li><a href="#">lorem</a></li> |
|
262 <li><a href="#">ipsum</a></li> |
|
263 </ul> |
|
264 </div> |
|
265 </div> |
|
266 |
|
267 <div id="ft"> |
|
268 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu arcu, volutpat vel volutpat vel, varius ac odio.</p> |
|
269 </div> |
|
270 </body> |
|
271 </html> |
|
272 |
|
273 |
|
274 <script> |
|
275 YUI.Env.Tests = { |
|
276 examples: [], |
|
277 project: '../assets', |
|
278 assets: '../assets/cssgrids', |
|
279 name: 'cssgrids-align', |
|
280 title: 'CSS Grids Alignment Example', |
|
281 newWindow: '', |
|
282 auto: false |
|
283 }; |
|
284 YUI.Env.Tests.examples.push('cssgrids-units'); |
|
285 YUI.Env.Tests.examples.push('cssgrids-fixed'); |
|
286 YUI.Env.Tests.examples.push('cssgrids-fluid'); |
|
287 YUI.Env.Tests.examples.push('cssgrids-align'); |
|
288 YUI.Env.Tests.examples.push('cssgrids-magazine'); |
|
289 YUI.Env.Tests.examples.push('menunav-leftnav'); |
|
290 YUI.Env.Tests.examples.push('node-menunav-2'); |
|
291 YUI.Env.Tests.examples.push('node-menunav-3'); |
|
292 YUI.Env.Tests.examples.push('node-menunav-4'); |
|
293 YUI.Env.Tests.examples.push('node-menunav-5'); |
|
294 YUI.Env.Tests.examples.push('node-menunav-6'); |
|
295 YUI.Env.Tests.examples.push('node-menunav-7'); |
|
296 |
|
297 </script> |
|
298 <script src="../assets/yui/test-runner.js"></script> |
|
299 |