- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 28 Oct 2011 00:52:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv5015
Modified Files:
Overview.html Overview.src.html
Added Files:
clip2.png frame-src.html
Log Message:
Adding missing image
Correct grammar and spelling mistakes
Added source for example
--- NEW FILE: frame-src.html ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: clip2.png ---
(This appears to be a binary file; contents omitted.)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- Overview.html 28 Oct 2011 00:10:16 -0000 1.3
+++ Overview.html 28 Oct 2011 00:52:21 -0000 1.4
@@ -621,7 +621,7 @@
<li id=on-a-subsequent-page-or>on a subsequent page, or
- <li id=may-omit-it-alltogether.>may omit it alltogether.
+ <li id=may-omit-it-altogether.>may omit it altogether.
</ul>
<p class=note id=note-a-block-level-element-that-is-split> Note, a
@@ -1045,13 +1045,13 @@
<div class=example>
<p id=authors-may-use-fixed-positioning-to-cre> Authors may use fixed
- positioning to create following presentation:</p>
+ positioning to create the following presentation:</p>
<div class=figure>
<p id=nbspnbspnbspd-> <img alt="Example of frame layout" src=frame.png>
<span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/frame-desc.html"
- id=img-anon-block
+ id=img-frame
title="Long description for frame layout example">[D]</a></span></p>
</div>
@@ -1111,7 +1111,8 @@
</body>
</html>
</code></pre>
- </div>
+ <span class=slink> <a href=frame-src.html id=frame-source
+ title="Source code for frame layout example">[S]</a></span></div>
<!-- End section: Fixed positioning -->
<!-- End section: Positioning schemes -->
@@ -1119,9 +1120,9 @@
positioning scheme: ‘<a href="#position"><code
class=property>position</code></a>’ property</h3>
- <p id=the-position-property-determine-which-of> The ‘<a
+ <p id=the-position-property-determines-which-o> The ‘<a
href="#position"><code class=property>position</code></a>’ property
- determine which of the positioning algorithms is used to calculate the
+ determines which of the positioning algorithms is used to calculate the
position of a box.
<table class=propdef id=propdef-position>
@@ -1253,7 +1254,7 @@
rel=biblioentry>[CSS3-REGIONS]<!--{{!CSS3-REGIONS}}--></a>.</p>
<p class=issue id=there-have-been-some-discussions-about-t> There have
- been some discussions about the naming of the propery value name <a
+ been some discussions about the naming of the property value <a
href="#page" title="'position'!!''page''">‘<code
class=css>page</code>’</a>. If you have any suggestions please
email the mailing list.</p>
@@ -1306,14 +1307,13 @@
and ‘<a href="#left"><code class=property>left</code></a>’
properties. The box is vertically and horizontally centered within its <a
href="#containing-block0">containing block</a> and these properties
- specify offsets with respect to the box's centered position withing
+ specify offsets with respect to the box's centered position within
its <a href="#containing-block0">containing block</a>. Center positioned
boxes are taken out of the normal flow. This means they have no impact on
the layout of later siblings. Though center positioned boxes may have
margins, those margins do not <a
href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
with any other margins.
- <div class=issue> Need a better, more clear, defintion for center.</div>
</dl>
<p id=in-previous-versions-of-css-user-agents-> In previous versions of CSS
@@ -1337,7 +1337,7 @@
</tr>
<tr>
<th>Value:</th>
- <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>viewport</var> | <var>nth-parent()</var></td>
+ <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>viewport</var> | <var>nth-parent()</var> | <var>element()</var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -1398,12 +1398,20 @@
'nth-parent()'. Is this really a good concept?
</p>
</dd>
+ <dt><dfn title="'position-reference'!!''element()''">element()</dfn></dt>
+ <dd>
+
+ <p class="issue">
+ Inserting and removing elements from the tree may cause odd behavior with
+ 'element()'. Is this really a good concept?
+ </p>
+ </dd>
</dl>
-->
<p class=issue id=ideas-have-been-raised-to-allow-changing> Ideas have been
raised to allow changing the positioning containing block or allowing
- positioining and sizing to use different containing blocks.</p>
+ positioning and sizing to use different containing blocks.</p>
<!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
<h3 id=box-offsets-trbl><span class=secno>6.6. </span>Box offsets:
@@ -1485,12 +1493,12 @@
top edge of the box's <a href="#containing-block0">containing
block</a>. For relatively positioned boxes, the offset is with respect to
the top edges of the box itself (i.e., the box is given a position in the
- <a href="#normal-flow0">normal flow</a>, then offset from that position
- according to these properties). For page positioned boxes, the offset is
- with respect to the top edge of the <span>initial containing block</span>
- itself. For absolutely positioned elements whose containing block is based
- on a block-level element, these properties are an offset from the padding
- edge of that element.
+ <a href="#normal-flow0">normal flow</a>, and then offset from that
+ position according to these properties). For page positioned boxes, the
+ offset is with respect to the top edge of the <span>initial containing
+ block</span> itself. For absolutely positioned elements whose containing
+ block is based on a block-level element, these properties are an offset
+ from the padding edge of that element.
<table class=propdef id=propdef-right>
<tbody>
@@ -2699,8 +2707,7 @@
<div class=figure>
<p id=nbspnbspnbspd-0> <img
alt="Image illustrating the normal flow of text between parent and sibling boxes."
- src="http://www.w3.org/TR/CSS2/images/flow-generic.png"> <span
- class=dlink> <a
+ src=flow-generic.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-generic-desc.html"
id=img-flow-generic
title="Long description for normal flow example">[D]</a></span></p>
@@ -2741,8 +2748,7 @@
<div class=figure>
<p id=nbspnbspnbspd-1> <img
alt="Image illustrating the effects of relative positioning on a box's content."
- src="http://www.w3.org/TR/CSS2/images/flow-relative.png"> <span
- class=dlink> <a
+ src=flow-relative.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-relative-desc.html"
id=img-flow-relative
title="Long description for relative positioning example">[D]</a></span></p>
@@ -2778,8 +2784,7 @@
<div class=figure>
<p id=nbspnbspnbspd-2> <img
alt="Image illustrating the effects of floating a box."
- src="http://www.w3.org/TR/CSS2/images/flow-float.png"> <span
- class=dlink> <a
+ src=flow-float.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-float-desc.html"
id=img-flow-float
title="Long description of example illustrating floating">[D]</a></span></p>
@@ -2824,8 +2829,7 @@
<div class=figure>
<p id=nbspnbspnbspd-3> <img
alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box."
- src="http://www.w3.org/TR/CSS2/images/flow-clear.png"> <span
- class=dlink> <a
+ src=flow-clear.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear-desc.html"
id=img-flow-clear
title="Long description of example illustrating floating without clear">[D]</a></span>
@@ -2850,8 +2854,7 @@
<div class=figure>
<p id=nbspnbspnbspd-4> <img
alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element."
- src="http://www.w3.org/TR/CSS2/images/flow-clear2.png"> <span
- class=dlink> <a
+ src=flow-clear2.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear2-desc.html"
id=img-flow-clear2
title="Long description of example illustrating floating with clear">[D]</a></span>
@@ -2892,8 +2895,7 @@
<div class=figure>
<p id=nbspnbspnbspd-5> <img
alt="Image illustrating the effects of absolutely positioning a box."
- src="http://www.w3.org/TR/CSS2/images/flow-absolute.png"> <span
- class=dlink> <a
+ src=flow-absolute.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html"
id=img-flow-absolute
title="Long description for example illustrating absolute positioning">[D]</a></span>
@@ -2935,8 +2937,7 @@
<div class=figure>
<p id=nbspnbspnbspd-6> <img
alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block."
- src="http://www.w3.org/TR/CSS2/images/flow-abs-rel.png"> <span
- class=dlink> <a
+ src=flow-abs-rel.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-abs-rel-desc.html"
id=img-flow-abs-rel
title="Long description for example illustrating positioning with respect to a positioned ancestor">[D]</a></span>
@@ -2967,8 +2968,7 @@
<div class=figure>
<p id=nbspnbspnbspd-7> <img
alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent."
- src="http://www.w3.org/TR/CSS2/images/flow-static.png"> <span
- class=dlink> <a
+ src=flow-static.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
id=img-flow-static
title="Long description illustrating absolute positioning with respect to the initial containing block">[D]</a></span>
@@ -2994,8 +2994,7 @@
<div class=figure>
<p id=nbspnbspnbspd-8> <img
alt="Image illustrating the use of floats to create a changebar effect."
- src="http://www.w3.org/TR/CSS2/images/changebar.png"> <span
- class=dlink> <a
+ src=changebar.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/changebar-desc.html"
id=img-changebar
title="Long description for change bar example">[D]</a></span></p>
@@ -3047,10 +3046,9 @@
<div class=figure>
<p id=nbspnbspnbspd-9> <img
alt="Image illustrating the effects of absolutely positioning a box."
- src="http://www.w3.org/TR/CSS2/images/flow-absolute.png"> <span
- class=dlink> <a
+ src=flow-absolute.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html"
- id=img-flow-absolute
+ id=img-flow-absolute2
title="Long description for example illustrating absolute positioning">[D]</a></span>
</p>
</div>
@@ -3060,14 +3058,14 @@
Although the parent <em>outer box</em> is setting its ‘<a
href="#position"><code class=property>position</code></a>’ property
to <a href="#relative" title="'position'!!''relative''">‘<code
- class=css>relative</code>’</a> this <em>outer box</em> box does not
+ class=css>relative</code>’</a> this <em>outer box</em> does not
serve as the containing block for page positioned descendants. Since the
<em>inner</em> box is a page positioned element its <a
href="#containing-block0">containing block</a> is not the <a
href="#relative-positioning1" title="relative positioning">relative
- positioned</a> <em>outer box</em> box, page positioned elements are
- positioned from the <span>initial containing block</span>, in this case
- the top and left edges of the illustration itself.
+ positioned</a> <em>outer box</em>, page positioned elements are positioned
+ from the <span>initial containing block</span>, in this case the top and
+ left edges of the illustration itself.
<div class=example>
<pre><code class=css>
@@ -3090,10 +3088,9 @@
<div class=figure>
<p id=nbspnbspnbspd-10> <img
alt="Image illustrating the effects of page positioning a box with respect to the initial containing block."
- src="http://www.w3.org/TR/CSS2/images/flow-static.png"> <span
- class=dlink> <a
+ src=flow-static.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
- id=img-flow-static
+ id=img-flow-static2
title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
</p>
</div>
@@ -3121,10 +3118,9 @@
<div class=figure>
<p id=nbspnbspnbspd-11> <img
alt="Image illustrating the effects of page positioning a box with respect to the initial containing block."
- src="http://www.w3.org/TR/CSS2/images/flow-static.png"> <span
- class=dlink> <a
+ src=flow-static.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
- id=img-flow-static
+ id=img-flow-static3
title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
</p>
</div>
@@ -3255,10 +3251,9 @@
<div class=figure>
<p id=nbspnbspnbspd-12> <img alt="diagram of rect() vs inset-rect()"
- src="http://www.w3.org/TR/2002/WD-css3-box-20021024/clip.png"> <span
- class=dlink> <a
+ src=clip.png> <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/rect-inset-rect-desc.html"
- name=img-flow-static
+ id=img-clip
title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
</p>
@@ -3300,11 +3295,10 @@
delimited by the dashed lines in the following illustrations:</p>
<div class=figure>
- <p id=nbspnbspnbspd><img alt="Two clipping regions"
- src="http://www.w3.org/TR/CSS2/images/clip.png"> <span
- class=dlink> <a
+ <p id=nbspnbspnbspd><img alt="Two clipping regions" src="clip_002.png">
+ <span class=dlink> <a
href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html"
- name=img-clip
+ id="img-clip_002"
title="Long description for example of clipping region">[D]</a></span></p>
</div>
@@ -3319,11 +3313,9 @@
illustration:</p>
<div class=figure>
- <p id=d-><img alt="A clipping region"
- src="http://www.w3.org/TR/2001/WD-css3-box-20010726/clip2.png"> <span
- class=dlink><a
+ <p id=d-><img alt="A clipping region" src=clip2.png> <span class=dlink><a
href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html"
- name=img-clip
+ id=img-clip2
title="Long description for example of clipping region">[D]</a></span></p>
<p class=caption id=an-image-of-50-by-55-pixels-is-clipped-w>An image of
@@ -3515,7 +3507,7 @@
<dl>
<dt>Tree Order
- <dd> Preorder depth-first traversal of the <em>rendering</em> tree, in
+ <dd> The preorder depth-first traversal of the <em>rendering</em> tree, in
logical (not visual) order for bidirectional content, after taking into
account properties that move boxes around.
@@ -3554,10 +3546,10 @@
href="#viewport0">viewport</a> is anchored with its top left corner at the
canvas origin.
- <p id=the-painting-order-order-for-the-descend> The painting order order
- for the descendants of an element generating a stacking context (see the
- ‘<a href="#z-index"><code class=property>z-index</code></a>’
- property) is:
+ <p id=the-painting-order-for-the-descendants-o> The painting order for the
+ descendants of an element generating a stacking context (see the ‘<a
+ href="#z-index"><code class=property>z-index</code></a>’ property)
+ is:
<ol>
<li id=if-the-element-is-a-root-element-backgro>If the element is a root
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- Overview.src.html 28 Oct 2011 00:10:16 -0000 1.5
+++ Overview.src.html 28 Oct 2011 00:52:21 -0000 1.6
@@ -241,7 +241,7 @@
<ul>
<li>on the current page,</li>
<li>on a subsequent page, or</li>
- <li>may omit it alltogether.</li>
+ <li>may omit it altogether.</li>
</ul>
<p class="note">
Note, a block-level element that is split over several pages may have a different width
@@ -484,12 +484,12 @@
</p>
<div class="example">
<p>
- Authors may use fixed positioning to create following presentation:
+ Authors may use fixed positioning to create the following presentation:
</p>
<div class="figure">
<p>
<img src="frame.png" alt="Example of frame layout">
- <span class="dlink"> <a id="img-anon-block" href="http://www.w3.org/TR/CSS2/images/longdesc/frame-desc.html" title="Long description for frame layout example">[D]</a></span>
+ <span class="dlink"> <a id="img-frame" href="http://www.w3.org/TR/CSS2/images/longdesc/frame-desc.html" title="Long description for frame layout example">[D]</a></span>
</p>
</div>
<p>This might be achieved with the following HTML document and style rules:</p>
@@ -546,13 +546,14 @@
</body>
</html>
</code></pre>
+<span class="slink"> <a id="frame-source" href="frame-src.html" title="Source code for frame layout example">[S]</a></span>
</div>
<!-- End section: Fixed positioning -->
<!-- End section: Positioning schemes -->
<h3 id="position-property">Choosing a positioning scheme: 'position' property</h3>
<p>
- The 'position' property determine which of the positioning algorithms is used to
+ The 'position' property determines which of the positioning algorithms is used to
calculate the position of a box.
</p>
<table id="propdef-position" class="propdef">
@@ -651,7 +652,7 @@
of the CSS Regions Module [[!CSS3-REGIONS]].
</p>
<p class="issue">
- There have been some discussions about the naming of the propery value name <span title="'position'!!''page''">''page''</span>.
+ There have been some discussions about the naming of the property value <span title="'position'!!''page''">''page''</span>.
If you have any suggestions please email the mailing list.
</p>
</dd>
@@ -690,14 +691,11 @@
The box's position (and possibly size) is specified with the 'top', 'right',
'bottom', and 'left' properties. The box is vertically and horizontally centered
within its <span>containing block</span> and these properties specify offsets with respect to
- the box's centered position withing its <span>containing block</span>. Center
+ the box's centered position within its <span>containing block</span>. Center
positioned boxes are taken out of the normal flow. This means they have no impact on
the layout of later siblings. Though center positioned boxes may have margins, those
margins do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
with any other margins.
- <div class="issue">
- Need a better, more clear, defintion for center.
- </div>
</dd>
</dl>
<p>
@@ -718,7 +716,7 @@
</tr>
<tr>
<th>Value:</th>
- <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>viewport</var> | <var>nth-parent()</var></td>
+ <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>viewport</var> | <var>nth-parent()</var> | <var>element()</var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -779,11 +777,19 @@
'nth-parent()'. Is this really a good concept?
</p>
</dd>
+ <dt><dfn title="'position-reference'!!''element()''">element()</dfn></dt>
+ <dd>
+
+ <p class="issue">
+ Inserting and removing elements from the tree may cause odd behavior with
+ 'element()'. Is this really a good concept?
+ </p>
+ </dd>
</dl>
-->
<p class="issue">
Ideas have been raised to allow changing the positioning containing block or allowing
- positioining and sizing to use different containing blocks.
+ positioning and sizing to use different containing blocks.
</p>
<!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
@@ -839,7 +845,7 @@
This property specifies how far an absolutely positioned box's top margin edge is offset
below the top edge of the box's <span>containing block</span>. For relatively positioned boxes, the
offset is with respect to the top edges of the box itself (i.e., the box is given a
- position in the <span>normal flow</span>, then offset from that position according to these
+ position in the <span>normal flow</span>, and then offset from that position according to these
properties). For page positioned boxes, the offset is with respect to the top edge of
the <span>initial containing block</span> itself. For absolutely positioned elements whose containing
block is based on a block-level element, these properties are an offset from the padding
@@ -1604,7 +1610,7 @@
</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-generic.png" alt="Image illustrating the normal flow of text between parent and sibling boxes.">
+ <img src="flow-generic.png" alt="Image illustrating the normal flow of text between parent and sibling boxes.">
<span class="dlink"> <a id="img-flow-generic" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-generic-desc.html" title="Long description for normal flow example">[D]</a></span>
</p>
</div>
@@ -1636,7 +1642,7 @@
</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
+ <img src="flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
<span class="dlink"> <a id="img-flow-relative" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-relative-desc.html" title="Long description for relative positioning example">[D]</a></span>
</p>
</div>
@@ -1665,7 +1671,7 @@
</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-float.png" alt="Image illustrating the effects of floating a box.">
+ <img src="flow-float.png" alt="Image illustrating the effects of floating a box.">
<span class="dlink"> <a id="img-flow-float" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-float-desc.html" title="Long description of example illustrating floating">[D]</a></span>
</p>
</div>
@@ -1704,7 +1710,7 @@
</div>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-clear.png" alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box.">
+ <img src="flow-clear.png" alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box.">
<span class="dlink"> <a id="img-flow-clear" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear-desc.html" title="Long description of example illustrating floating without clear">[D]</a></span>
</p>
</div>
@@ -1722,7 +1728,7 @@
</div>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-clear2.png" alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.">
+ <img src="flow-clear2.png" alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.">
<span class="dlink"> <a id="img-flow-clear2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear2-desc.html" title="Long description of example illustrating floating with clear">[D]</a></span>
</p>
</div>
@@ -1754,7 +1760,7 @@
</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
+ <img src="flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
<span class="dlink"> <a id="img-flow-absolute" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute positioning">[D]</a></span>
</p>
</div>
@@ -1783,7 +1789,7 @@
<p>This results in something like the following:</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-abs-rel.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block.">
+ <img src="flow-abs-rel.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block.">
<span class="dlink"> <a id="img-flow-abs-rel" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-abs-rel-desc.html" title="Long description for example illustrating positioning with respect to a positioned ancestor">[D]</a></span>
</p>
</div>
@@ -1806,7 +1812,7 @@
</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-static.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent.">
+ <img src="flow-static.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent.">
<span class="dlink"> <a id="img-flow-static" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating absolute positioning with respect to the initial containing block">[D]</a></span>
</p>
</div>
@@ -1826,7 +1832,7 @@
<p>might result in something like:</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/changebar.png" alt="Image illustrating the use of floats to create a changebar effect.">
+ <img src="changebar.png" alt="Image illustrating the use of floats to create a changebar effect.">
<span class="dlink"> <a id="img-changebar" href="http://www.w3.org/TR/CSS2/images/longdesc/changebar-desc.html" title="Long description for change bar example">[D]</a></span>
</p>
</div>
@@ -1866,16 +1872,16 @@
</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
- <span class="dlink"> <a id="img-flow-absolute" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute positioning">[D]</a></span>
+ <img src="flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
+ <span class="dlink"> <a id="img-flow-absolute2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute positioning">[D]</a></span>
</p>
</div>
<p>
The following example shows a page positioned box that is a child of a relatively
positioned box. Although the parent <em>outer box</em> is setting its 'position'
- property to <span title="'position'!!''relative''">''relative''</span> this <em>outer box</em> box does not serve as the containing
+ property to <span title="'position'!!''relative''">''relative''</span> this <em>outer box</em> does not serve as the containing
block for page positioned descendants. Since the <em>inner</em> box is a page positioned
- element its <span>containing block</span> is not the <span title="relative positioning">relative positioned</span> <em>outer box</em> box, page
+ element its <span>containing block</span> is not the <span title="relative positioning">relative positioned</span> <em>outer box</em>, page
positioned elements are positioned from the <span>initial containing block</span>, in this case the
top and left edges of the illustration itself.
</p>
@@ -1896,8 +1902,8 @@
<p>This results in something like the following:</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
- <span class="dlink"> <a id="img-flow-static" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
+ <img src="flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
+ <span class="dlink"> <a id="img-flow-static2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
</p>
</div>
<p>If we do not position the <em>outer</em> box:</p>
@@ -1918,8 +1924,8 @@
</p>
<div class="figure">
<p>
- <img src="http://www.w3.org/TR/CSS2/images/flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
- <span class="dlink"> <a id="img-flow-static" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
+ <img src="flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
+ <span class="dlink"> <a id="img-flow-static3" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
</p>
</div>
<!-- End section: Page positioning -->
@@ -2021,8 +2027,8 @@
</p>
<div class="figure">
<p>
- <img alt="diagram of rect() vs inset-rect()" src="http://www.w3.org/TR/2002/WD-css3-box-20021024/clip.png">
- <span class="dlink"> <a name="img-flow-static" href="http://www.w3.org/TR/CSS2/images/longdesc/rect-inset-rect-desc.html" title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
+ <img alt="diagram of rect() vs inset-rect()" src="clip.png">
+ <span class="dlink"> <a id="img-clip" href="http://www.w3.org/TR/CSS2/images/longdesc/rect-inset-rect-desc.html" title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
</p>
<p class="caption">Diagram of the rectangles defined by ''rect()'' and ''inset()''.</p>
</div>
@@ -2056,8 +2062,8 @@
clipping regions delimited by the dashed lines in the following illustrations:
</p>
<div class="figure">
- <p><img src="http://www.w3.org/TR/CSS2/images/clip.png" alt="Two clipping regions">
- <span class="dlink"> <a name="img-clip" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span></p>
+ <p><img src="clip_002.png" alt="Two clipping regions">
+ <span class="dlink"> <a id="img-clip_002" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span></p>
</div>
<p>The following rule:</p>
<pre><code class="css">
@@ -2068,8 +2074,8 @@
following illustration:
</p>
<div class="figure">
- <p><img alt="A clipping region" src="http://www.w3.org/TR/2001/WD-css3-box-20010726/clip2.png">
- <span class="dlink"><a name="img-clip" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span>
+ <p><img alt="A clipping region" src="clip2.png">
+ <span class="dlink"><a id="img-clip2" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span>
</p>
<p class="caption">An image of 50 by 55 pixels is clipped with a clipping mask of 35 by 40 pixels.</p>
</div>
@@ -2222,7 +2228,7 @@
<dl>
<dt>Tree Order</dt>
<dd>
- Preorder depth-first traversal of the <em>rendering</em> tree, in logical (not
+ The preorder depth-first traversal of the <em>rendering</em> tree, in logical (not
visual) order for bidirectional content, after taking into account properties
that move boxes around.
</dd>
@@ -2257,7 +2263,7 @@
<span>viewport</span> is anchored with its top left corner at the canvas origin.
</p>
<p>
- The painting order order for the descendants of an element generating a stacking context
+ The painting order for the descendants of an element generating a stacking context
(see the 'z-index' property) is:
</p>
<ol>
Received on Friday, 28 October 2011 00:52:32 UTC