|
525
|
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 |
|