W3C home > Mailing lists > Public > public-css-commits@w3.org > October 2011

csswg/css3-gcpm Overview.src.html,1.155,1.156

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 31 Oct 2011 05:53:46 +0000
To: public-css-commits@w3.org
Message-Id: <E1RKkoc-0007GV-VH@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv27913

Modified Files:
	Overview.src.html 
Log Message:


Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.155
retrieving revision 1.156
diff -u -d -r1.155 -r1.156
--- Overview.src.html	31 Oct 2011 05:25:40 -0000	1.155
+++ Overview.src.html	31 Oct 2011 05:53:44 -0000	1.156
@@ -2791,44 +2791,16 @@
 specified, the vertical offset is set to zero.
 
 <div class=example>
-
-<p>In this code, the 'float' property floats the element to the top
-left of the multi-column element, while the 'float-offset' property
-pushes it to the right so that it ends up in the column next to it:
-
-<pre>
-div.quote { 
-  float: top left multicol; 
-  float-offset: 2.5gr; 
-  width: 1gr }
+<pre>img { 
+  float: top left;
+  float-offset: 50% 50%;
+  width: 100%;
+}
 </pre>
 
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-
-<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-</div>
-
-<div style="position: absolute; left: 350px; top: 0px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-</div>
-
+The first rule in the code above floats images to the top left of its natural column. The second rule pushes the float in the opposite directions: to the right and downwards. The horizontal component (''50$'') means that the horizontal middle of the element should be in the middle of the gap between the left-most column and the one next to it. Vertically, element should be in the middle of the column. Here is a possible rendering:
 
-<div class=rep style="top: 0; left: 175px; width: 150px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
+<img src=11.png>
 
 <p>Assuming a three-column layout, the same rendering can be achieved
 by floating the element to the right instead:
@@ -2840,104 +2812,28 @@
   width: 1gr }
 </pre>
 
-</div>
-
-
-<div class="example">
-
-<pre>
-img { 
-  float: top left multicol;
-  float-offset: 1.5gr 50%;
-  width: 8em;
-}
-</pre>
-
-<p>The first rule in the code above floats images to the top left of
-the multi-column element. The second rule pushes the float in the
-opposite directions: to the right and downwards. The horizontal
-component (''1.5gr'') means that the horizontal middle of the element
-should be in the middle of the gap between the left-most column and
-the one next to it. Vertically, element should be in the middle of the
-column. Here is a possible rendering:
- 
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<br>Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi<br> tur et sapen. Fusce<br> sed ligula a turpis.
-
-<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<div style="margin-left: 100px">
-Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi</div>
-tur et sapen. Fusce
-<br>
-sed ligula a turpis.
-</div>
-
-<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-
-<div class=rep style="left: 50px; width: 220px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
 
 </div>
 
+<p>The floated element will never be pushed outside the content edges
+of the multicol element due to 'float-offset'.
 
 <div class="example">
 
-<p>Consider this code:
-
 <pre>
-img { 
-  float: top left multicol;
-  float-offset: 1.25gr 50%;
-  width: 6em;
+img {
+  float: top right multicol;
+  width: 3gr;
 }
 </pre>
 
-<p>The only difference between this and the previous example is the horizontal value on 'float-offset'. The value ''1.25gr'' means that a point 25% into the image in the inline direction will be aligned with a point 25% into the column gap. Here is a possible rendering:
- 
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<br>Sed imper di et<br>ris. Cur abi tur<br> et sapen. Fusce<br> sed ligula a sic<br> turpis.
-Lorem<br> ipsum dolor sit<br> amet. Namat jus.
-Sed<br> imper di et ris curit.
-
-
-
-<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<div style="margin-left: 100px">
-Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi</div>
-tur et sapen. Fusce
-<br>
-sed ligula a turpis.
-</div>
-
-<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-
-<div class=rep style="left: 120px; width: 150px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
+<p>The code above floats the element to the top right of the
+multi-column element. Further, it sets the width of images to the
+width of two columns plus the gap between them. Here is a possible
+rendering.
 
-</div>
 
+<img src=8.png>
 
 
 
Received on Monday, 31 October 2011 05:53:48 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 31 October 2011 05:53:48 GMT