cssgrids-align-source.mustache revision fa99b3cab01c8622489456804078ff7814fac260
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <meta http-equiv="content-type" content="text/html; charset=utf-8">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/cssfonts.css" type="text/css">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/cssgrids.css" type="text/css">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo/* everything below is custom styling to demonstrate how to create a page layout using yui grid units */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo/* Fixed, Centered Layout */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin:auto; /* center in viewport */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo width: 970px; /* fix page width */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo background:#efefef;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#main .content {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin-right: 10px; /* gutter between center and right columns */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo.thumb-captions .yui3-u-1-3 {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo vertical-align: bottom;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#main .yui3-u-1-2,
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#more .yui3-u-1-4 {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo vertical-align: middle;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo.advertisement .yui3-g,
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo text-align: center; /* horizontally center content */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo text-align: left; /* reset for content */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo.advertisement .align-stub { /* empty stub used to fix the parent height and vertically align */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo height: 200px;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo.advertisement .yui3-u-1-2,
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo.advertisement .align-stub {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo vertical-align: middle; /* vertically center content */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo/* content presentation (completely arbitrary, remove or customize) */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#hd, .content, #more {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo border: 1px solid #000;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo font: bold 180% arial;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo padding: 1em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo border-top: 0;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo.content p, .content li, #nav li a {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo padding: 0.5em 1em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#nav li a, #extra li a, #more li a {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo display: block;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo padding: 0.25em 0;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo border: 1px dashed black;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo padding: 0.5em 1em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#nav .content {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo border-right: 0;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#main .thumb-captions {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo text-align: center;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#main .thumb-captions a {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo background: #ddd;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo border: 1px solid #000;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo display: block;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo padding: 5px;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin: 0 5px;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#main .thumb-captions img {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo border: 1px solid #000;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin: 0.5em auto;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo display: block;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#top-stories {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo background: #dcdcdc;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo border-bottom: 1px solid #000;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin-bottom: 1em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#top-stories ol {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo background: #dcdcdc;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin: 0 0 0 3.5em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#top-stories li {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo list-style-type: decimal;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#top-stories li a {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin-left: -1em; /* collapse some space between list marker and content */
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#extra .advertisement {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo background: #666;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo color: #fff;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo background: #ccc;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin-top: 1em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo padding: 0.5em 0;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo list-style-type: disc;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo margin: 0 0 0 2.5em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo#more li a {
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo font:83% tahoma;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo background: #999;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo font:80% verdana;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo padding: 1em;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo text-align: center;
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <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>
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <a href="#"><img width="80" height="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo Lorem ispum
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo Lorem ispum
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <a href="#"><img height="80" width="60" src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg">
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo Lorem ispum
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <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>
1ae0874509b6811fdde1dfd46f0d93fd09867a3fheppo <p>Suspendisse congue sapien a nibh venenatis sit amet aliquet elit suscipit. Vestibulum nulla enim, bibendum ut vestibulum at, laoreet a felis.</p>
<p class="yui3-u-1-2">Nulla venenatis ante in enim ornare dapibus. Integer placerat ligula diam.</p>