- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 19 Jan 2012 18:15:27 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv11147
Modified Files:
Overview.html Overview.src.html
Log Message:
Markup tweak to some of the example.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.98
retrieving revision 1.99
diff -u -d -r1.98 -r1.99
--- Overview.html 19 Jan 2012 01:12:00 -0000 1.98
+++ Overview.html 19 Jan 2012 18:15:25 -0000 1.99
@@ -11,6 +11,15 @@
<style>
code.one-line { white-space: pre; }
+ .code-and-figure {
+ display: table;
+ margin: 0 auto;
+ border-spacing: 1em;
+ }
+ .code-and-figure > div {
+ display: table-cell;
+ vertical-align: middle;
+ }
</style>
<body>
@@ -949,8 +958,8 @@
class=property>flex-order</code></a>’ makes this trivial. For
example, take the following sketch of a page's code and desired layout:</p>
- <div style="display:table; border-spacing: 1em; margin:1em auto;">
- <div style="display:table-cell; vertical-align:middle;">
+ <div class=code-and-figure>
+ <div>
<pre>
<!DOCTYPE html>
<header>...</header>
@@ -962,8 +971,7 @@
<footer>...</footer></pre>
</div>
- <div style="display:table-cell; vertical-align:middle;"> <img height=360
- src="images/flex-order-page.svg" styl width=400></div>
+ <div><img height=360 src="images/flex-order-page.svg" width=400></div>
</div>
<p>This layout can be easily achieved with Flexbox:</p>
@@ -1435,21 +1443,29 @@
class=property>flex-align</code></a>’, we can emulate the
functionality of HTML's <code><center></code> element:</p>
- <pre><div>
- <div>foo foo foo foo</div>
- <div>bar bar<br>bar bar</div>
- <div>foo foo foo foo foo foo foo foo foo foo foo foo</div>
+ <div class=code-and-figure>
+ <div>
+ <pre>
+<div>
+ <p>foo foo foo foo</p>
+ <p>bar bar<br>bar bar</p>
+ <p>foo foo foo foo foo foo foo
+ foo foo foo foo foo</p>
</div>
<style>
- div {
- display: flexbox;
- flex-flow: column;
- flex-align: center;
- width: 200px;
- }
+ div {
+ display: flexbox;
+ flex-flow: column;
+ flex-align: center;
+ width: 200px;
+ }
</style></pre>
+ </div>
- <p><img alt="" src="images/basic-vertical-flexbox.png"></p>
+ <div>
+ <p><img alt="" src="images/basic-vertical-flexbox.png">
+ </div>
+ </div>
</div>
<p class=issue>More examples for the other alignment values!
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.98
retrieving revision 1.99
diff -u -d -r1.98 -r1.99
--- Overview.src.html 19 Jan 2012 01:12:00 -0000 1.98
+++ Overview.src.html 19 Jan 2012 18:15:25 -0000 1.99
@@ -7,6 +7,15 @@
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
<style>
code.one-line { white-space: pre; }
+ .code-and-figure {
+ display: table;
+ margin: 0 auto;
+ border-spacing: 1em;
+ }
+ .code-and-figure > div {
+ display: table-cell;
+ vertical-align: middle;
+ }
</style>
</head><body>
@@ -419,9 +428,8 @@
<div class='example'>
<p>Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it's desirable that the content come first in the page's source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns. 'flex-order' makes this trivial. For example, take the following sketch of a page's code and desired layout:</p>
- <div style="display:table; border-spacing: 1em; margin:1em auto;">
- <div style="display:table-cell; vertical-align:middle;">
- <pre>
+ <div class='code-and-figure'>
+ <div><pre>
<!DOCTYPE html>
<header>...</header>
<div id='main'>
@@ -429,11 +437,8 @@
<nav>...</nav>
<aside>...</aside>
</div>
-<footer>...</footer></pre>
- </div>
- <div style="display:table-cell; vertical-align:middle;">
- <img src="images/flex-order-page.svg" width=400 height=360 styl>
- </div>
+<footer>...</footer></pre></div>
+ <div><img src="images/flex-order-page.svg" width=400 height=360></div>
</div>
<p>This layout can be easily achieved with Flexbox:</p>
@@ -661,22 +666,25 @@
<div class=example>
<p>By using a vertical flexbox and 'flex-align', we can emulate the functionality of HTML's <code><center></code> element:</p>
-
- <pre><div>
- <div>foo foo foo foo</div>
- <div>bar bar<br>bar bar</div>
- <div>foo foo foo foo foo foo foo foo foo foo foo foo</div>
+
+ <div class='code-and-figure'>
+ <div><pre>
+<div>
+ <p>foo foo foo foo</p>
+ <p>bar bar<br>bar bar</p>
+ <p>foo foo foo foo foo foo foo
+ foo foo foo foo foo</p>
</div>
<style>
- div {
- display: flexbox;
- flex-flow: column;
- flex-align: center;
- width: 200px;
- }
-</style></pre>
-
- <p><img alt="" src="images/basic-vertical-flexbox.png"></p>
+ div {
+ display: flexbox;
+ flex-flow: column;
+ flex-align: center;
+ width: 200px;
+ }
+</style></pre></div>
+ <div><p><img alt="" src="images/basic-vertical-flexbox.png"></p></div>
+ </div>
</div>
<p class='issue'>More examples for the other alignment values!</p>
Received on Thursday, 19 January 2012 18:15:28 UTC