- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 09 Nov 2011 23:01:45 +0000
- To: public-css-commits@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 UTC