- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 31 Oct 2011 05:53:46 +0000
- To: public-css-commits@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 UTC