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

csswg/css3-positioning/images/longdesc changebar-desc.html,NONE,1.1 clip-desc.html,NONE,1.1 flow-abs-rel-desc.html,NONE,1.1 flow-absolute-desc.html,NONE,1.1 flow-clear-desc.html,NONE,1.1 flow-clear2-desc.html,NONE,1.1 flow-float-desc.html,NONE,1.1 flow-generic-desc.html,NONE,1.1 flow-page-desc.html,NONE,1.1 flow-page-desc2.html,NONE,1.1 flow-relative-desc.html,NONE,1.1 flow-static-desc.html,NONE,1.1 frame-desc.html,NONE,1.1

From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
Date: Wed, 09 Nov 2011 23:01:45 +0000
To: public-css-commits@w3.org
Message-Id: <E1ROH9N-000698-7j@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-positioning/images/longdesc
In directory hutz:/tmp/cvs-serv23612

Added Files:
	changebar-desc.html clip-desc.html flow-abs-rel-desc.html 
	flow-absolute-desc.html flow-clear-desc.html 
	flow-clear2-desc.html flow-float-desc.html 
	flow-generic-desc.html flow-page-desc.html 
	flow-page-desc2.html flow-relative-desc.html 
	flow-static-desc.html frame-desc.html 
Log Message:
Adding longdesc to proper place

--- NEW FILE: flow-relative-desc.html ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: frame-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description for frame layout example</title>
    </head>
    <body>
        <h1>Long description for frame layout example</h1>
        <p>This diagram illustrates a frame-like layout with 'position: fixed'.</p>
        <p>
            The illustration shows a four-panel frameset. The top panel ("header") covers the entire 
            width of the frameset and takes up 15% of the vertical space. Below it on the left is 
            the "sidebar", which is 10em wide; it's height is automatically calculated. To the right 
            of the sidebar and below the header is the "main" area, whose dimensions are computed 
            based on remaining available space. Finally, at the bottom, the "footer" area is 100px 
            high and covers the entire width of the frameset.
        </p>
        <p>Each area is labeled and dimensions that are not 'auto' are indicated.</p>
        <p><a href="../../Overview.html#img-frame">Return to image.</a></p>
    </body>
</html>
--- NEW FILE: flow-abs-rel-desc.html ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: flow-clear2-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description of example illustrating floating with clear</title>
    </head>
    <body>
        <h1>Long description of example illustrating floating with clear</h1>
        <p>
            This diagram illustrates the effects of floating a box ("inner") and how its "sibling" 
            is forced below it due to the 'clear' property.
        </p>
        <p>
            A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Text before 
            the "inner" box flows on lines 1 and halfway on line 2. The "inner" box has been floated 
            to the right and occupies the second half of lines 3 and 4. The sibling box flows on the 
            following line (line 4) and is followed by the remainder of the text.
        </p>
        <p>
            In the following PRE element, each 24 pixel line is simulated by two lines, the second 
            beginning with the appropriate number. Vertical bars represent the left edge of the 
            floated box. The lines, as they appear in the image, contain:
        </p>
        <pre>
1 Beginning of body contents. Start

2 of outer contents.     | Inner

3                        | contents.

4 Sibling contents. End of outer

5 contents. End of body contents.
</pre>
        <p>
            The default text color is black. "Start of outer contents" is red. "Sibling contents" is 
            red. "Inner contents" is blue. "End of outer contents" is red.
        </p>
        <p><a href="../../Overview.html#img-flow-clear2">Return to image.</a></p>
    </body>
</html>
--- NEW FILE: clip-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description for example of clipping region</title>
    </head>
    <body>
        <h1>Long description for example clipping region</h1>
        <p>
            This diagram illustrates two block boxes, one above the other, with rectangular clipping 
            regions of different dimensions.
        </p>
        <p>
            The block boxes (generated for a P element) are identical and depicted with a thick 
            black border and a gray background. A coordinate system has its origin at the upper left 
            corner of each block box. The x-axis increases along the top edge of the P box, the 
            y-axis down the left edge. Both axes depict increments of 5px.
        </p>
        <p>
            The clipping region of the first P box lies entirely within it, offset 5px from the top 
            and left edges of the P box, and 10px from the right and bottom edges. The clipping 
            region has a thick dashed border and a white background and is labeled "clip region".
        </p>
        <p>
            The clipping region of the second P box resembles that of the first in style and 
            position, except that the right edge is 5px to the right of the P box's right edge. 
            Thus, the clipping region lies partially outside the P box.
        </p>
        <p>
            Both block boxes have four red arrows representing the four offsets in the corresponding 
            style rule: one short, vertical arrow labeled "top" goes from the top edge of the block 
            box to the top of the clipping region; one longer vertical arrow labeled "bottom" goes 
            from the top op the block box to the bottom of the clipping region; one short, 
            horizontal arrow labeled "left" goes from the left edge of the block to the left edge of 
            the clipping region; and one longer horizontal arrow labeled "right" goes from the left 
            edge of the block to the right edge of the clipping region.
        </p>
        <p><a href="../../Overview.html#img-clipping">Return to image.</a></p>
    </body>
</html>
--- NEW FILE: flow-page-desc.html ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: flow-generic-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description for normal flow example</title>
    </head>
    <body>
        <h1>Long description for normal flow example</h1>
        <p>This diagram illustrates the normal flow of text between parent and sibling boxes.</p>
        <p>
            A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Four lines 
            of text are displayed, occupying line 1 through 4.
        </p>
        <p>
            In the following PRE element, each 24 pixel line is simulated by two lines, the second 
            beginning with the appropriate number. The lines, as they appear in the image, contain:
        </p>
        <pre>
1 Beginning of body contents. Start 

2 of outer contents. Inner contents.

3 End of outer contents. End of body

4 contents.
</pre>
        <p>
            The default text color is black. "Start of outer contents" is red. "Inner contents" is 
            blue. "End of outer contents" is red.
        </p>
        <p><a href="../../Overview.html#img-flow-generic">Return to image.</a></p>
    </body>
</html>
--- NEW FILE: flow-absolute-desc.html ---
(This appears to be a binary file; contents omitted.)

--- NEW FILE: flow-static-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description illustrating absolute positioning with respect to the initial containing block</title>
    </head>
    <body>
        <h1>Long description illustrating absolute positioning with respect to the initial containing block</h1>
        <p>
            This diagram illustrates the effects of absolutely positioning a box with respect to the 
            initial containing block.
        </p>
        <p>
            A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and 
            "outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been 
            positioned at "-100, 200" relative to the "0, 0" coordinates (the upper left corner of 
            the document window). Most of the "inner" box contents are therefore rendered outside 
            the document window.
        </p>
        <p>
            In the following PRE element, each 24 pixel line is simulated by two lines, the second 
            beginning with the appropriate number. The text that is to the left of the line numbers 
            lies outside the initial containing block. The lines, as they appear in the image, 
            contain approximately:
        </p>
        <pre>
      1 Beginning of body contents. [@]Start

      2 of outer contents. End of outer

      3 contents. End of body contents.

      4

Inner 5

Conte 6 nts

      7

      8
</pre>
        <p>
            The default text color is black. "Start of outer contents" is red. The "nts" in "Inner 
            contents" is blue. "End of outer contents" is red.
        </p>
        <p><a href="../../Overview.html#img-flow-static">Return to image.</a></p>
    </body>
</html>
--- NEW FILE: flow-float-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description of example illustrating floating</title>
    </head>
    <body>
        <h1>Long description of example illustrating floating</h1>
        <p>This diagram illustrates the effects of floating a box.</p>
        <p>
            A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the 
            "inner" box has been floated to the right, all other text flows around it (on lines 1 
            through 4).
        </p>
        <p>
            In the following PRE element, each 24 pixel line is simulated by two lines, the second 
            beginning with the appropriate number. Vertical bars represent the left edge of the 
            floated box. The lines, as they appear in the image, contain:
        </p>
        <pre>
1 Beginning of body contents. Start

2 of outer contents. End | Inner

3 of outer contents. End | contents.

4 of body contents.
</pre>
        <p>
            The default text color is black. "Start of outer contents" is red. "Inner contents" is 
            blue. "End of outer contents" is red.
        </p>
        <p><a href="../../Overview.html#img-flow-float">Return to image.</a></p>
    </body>
</html>
--- NEW FILE: changebar-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description for change bar example</title>
    </head>
    <body>
        <h1>Long description for change bar example</h1>
        <p>
            This diagram illustrates the use of absolute positioning to create a changebar effect. 
            The changebar (represented by two hyphens in the image) appears in the 10px space to the 
            left of the paragraph.
        </p>
        <p>
            The illustration shows a vertical line that represents the left edge of the paragraph's 
            containing block. The paragraph text (in black) is shifted 10px from this edge (shown in 
            the diagram). The change bars (two red hyphens) appear to the left of the word "THIS", 
            which begins the fourth line of text.
        </p>
        <p>
            The following PRE element simulates the example. Vertical bars represent the left 
            containing block edge.
        </p>
<pre>
|   I used two red hyphens to serve 
|   as a change bar. They will "float"
|   to the left of the line containing 
| --THIS word.
</pre>
        <p><a href="../../Overview.html#img-changebar">Return to image.</a>
    </body>
</html>

--- NEW FILE: flow-page-desc2.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description illustrating page positioning with respect to the initial containing block</title>
    </head>
    <body>
        <h1>Long description illustrating page positioning with respect to the initial containing block</h1>
        <p>
            This diagram illustrates the effects of page positioning a box with respect to the 
            initial containing block.
        </p>
        <p>
            A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and 
            "outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been 
            positioned at "-100, 200" relative to the "0, 0" coordinates (the upper left corner of 
            the document window). Most of the "inner" box contents are therefore rendered outside 
            the document window.
        </p>
        <p>
            In the following PRE element, each 24 pixel line is simulated by two lines, the second 
            beginning with the appropriate number. The text that is to the left of the line numbers 
            lies outside the initial containing block. The lines, as they appear in the image, 
            contain approximately:
        </p>
<pre>
      1 Beginning of body contents. [@]Start

      2 of outer contents. End of outer

      3 contents. End of body contents.

      4

Inner 5

Conte 6 nts

      7

      8
</pre>
        <p>
            The default text color is black. "Start of outer contents" is red. The "nts" in "Inner 
            contents" is blue. "End of outer contents" is red.
        </p>
        <p><a href="../../Overview.html#img-flow-page2">Return to image.</a></p>
    </body>
</html>
--- NEW FILE: flow-clear-desc.html ---
<!DOCTYPE html>
<html>
    <head>
        <title>Long description of example illustrating floating without clear</title>
    </head>
    <body>
        <h1>Long description of example illustrating floating without clear</h1>
        <p>
            This diagram illustrates the effects of floating a box ("inner") and how its "sibling" 
            flows alongside it.
        </p>
        <p>
            A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the 
            "inner" box has been floated to the right, all other text flows around it, including 
            that of the "sibling" box (on lines 1 through 5).
        </p>
        <p>
            In the following PRE element, each 24 pixel line is simulated by two lines, the second 
            beginning with the appropriate number. Vertical bars represent the left edge of the 
            floated box. The lines, as they appear in the image, contain:
        </p>
        <pre>
1 Beginning of body contents. Start

2 of outer contents.     | Inner

3 Sibling contents. End  | contents.

4 of outer contents. End of body

5 contents.
</pre>
        <p>
            The default text color is black. "Start of outer contents" is red. "Sibling contents" is 
            red. "Inner contents" is blue. "End of outer contents" is red.
        </p>
        <p><a href="../../Overview.html#img-flow-clear">Return to image.</a></p>
    </body>
</html>
Received on Wednesday, 9 November 2011 23:01:56 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 9 November 2011 23:01:56 GMT