Skip to content

Commit fd8cfc4

Browse files
author
Arron Eicholz
committed
Adding longdesc to proper place
1 parent 0cffa7c commit fd8cfc4

13 files changed

Lines changed: 507 additions & 0 deletions

‎css3-positioning/images/longdesc/changebar-desc.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for change bar example</title>
5+
</head>
6+
<body>
7+
<h1>Long description for change bar example</h1>
8+
<p>
9+
This diagram illustrates the use of absolute positioning to create a changebar effect.
10+
The changebar (represented by two hyphens in the image) appears in the 10px space to the
11+
left of the paragraph.
12+
</p>
13+
<p>
14+
The illustration shows a vertical line that represents the left edge of the paragraph's
15+
containing block. The paragraph text (in black) is shifted 10px from this edge (shown in
16+
the diagram). The change bars (two red hyphens) appear to the left of the word "THIS",
17+
which begins the fourth line of text.
18+
</p>
19+
<p>
20+
The following PRE element simulates the example. Vertical bars represent the left
21+
containing block edge.
22+
</p>
23+
<pre>
24+
| I used two red hyphens to serve
25+
| as a change bar. They will "float"
26+
| to the left of the line containing
27+
| --THIS word.
28+
</pre>
29+
<p><a href="../../Overview.html#img-changebar">Return to image.</a>
30+
</body>
31+
</html>

‎css3-positioning/images/longdesc/clip-desc.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for example of clipping region</title>
5+
</head>
6+
<body>
7+
<h1>Long description for example clipping region</h1>
8+
<p>
9+
This diagram illustrates two block boxes, one above the other, with rectangular clipping
10+
regions of different dimensions.
11+
</p>
12+
<p>
13+
The block boxes (generated for a P element) are identical and depicted with a thick
14+
black border and a gray background. A coordinate system has its origin at the upper left
15+
corner of each block box. The x-axis increases along the top edge of the P box, the
16+
y-axis down the left edge. Both axes depict increments of 5px.
17+
</p>
18+
<p>
19+
The clipping region of the first P box lies entirely within it, offset 5px from the top
20+
and left edges of the P box, and 10px from the right and bottom edges. The clipping
21+
region has a thick dashed border and a white background and is labeled "clip region".
22+
</p>
23+
<p>
24+
The clipping region of the second P box resembles that of the first in style and
25+
position, except that the right edge is 5px to the right of the P box's right edge.
26+
Thus, the clipping region lies partially outside the P box.
27+
</p>
28+
<p>
29+
Both block boxes have four red arrows representing the four offsets in the corresponding
30+
style rule: one short, vertical arrow labeled "top" goes from the top edge of the block
31+
box to the top of the clipping region; one longer vertical arrow labeled "bottom" goes
32+
from the top op the block box to the bottom of the clipping region; one short,
33+
horizontal arrow labeled "left" goes from the left edge of the block to the left edge of
34+
the clipping region; and one longer horizontal arrow labeled "right" goes from the left
35+
edge of the block to the right edge of the clipping region.
36+
</p>
37+
<p><a href="../../Overview.html#img-clipping">Return to image.</a></p>
38+
</body>
39+
</html>

‎css3-positioning/images/longdesc/flow-abs-rel-desc.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for example illustrating positioning with respect to a positioned ancestor</title>
5+
</head>
6+
<body>
7+
<h1>Long description for example illustrating positioning with respect to a positioned ancestor</h1>
8+
<p>
9+
This diagram illustrates the effects of absolutely positioning a box ("inner") with
10+
respect to a containing block established by a relatively positioned ancestor ("outer").
11+
</p>
12+
<p>
13+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and
14+
"outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been
15+
positioned relative to the top and left edges of the "outer" element's first inline box.
16+
</p>
17+
<p>
18+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
19+
beginning with the appropriate number. The reference edges for positioning the "inner"
20+
box are indicated in the diagram by thick dashed lines. The upper left coordinates of
21+
the "inner" box are labeled by (+200, -100). In the PRE element below, the reference
22+
edges for "inner" are indicated by vertical bars and equal signs. The offset of the
23+
"inner" box is given in square brackets. The lines of text, as they appear in the image,
24+
contain approximately:
25+
</p>
26+
<pre> ====
27+
|
28+
1 Beginning of body contents.|Start
29+
30+
2 of outer contents. End of outer
31+
32+
3 contents. End of body contents.
33+
34+
4 [(+200, -100)]
35+
36+
5 Inner
37+
38+
6 contents.
39+
40+
7
41+
42+
8
43+
</pre>
44+
<p>
45+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
46+
blue. "End of outer contents" is red.
47+
</p>
48+
<p><a href="../../Overflow.html#img-flow-abs-rel">Return to image.</a></p>
49+
</body>
50+
</html>

‎css3-positioning/images/longdesc/flow-absolute-desc.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for example illustrating absolute positioning</title>
5+
</head>
6+
<body>
7+
<h1>Long description for example illustrating absolute positioning</h1>
8+
<p>This diagram illustrates the effects of absolutely positioning a box.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All text
11+
outside the "outer" box has been flowed into lines 1 and 2.
12+
</p>
13+
<p>
14+
The "outer" box is positioned absolutely so that it occupies the lower right quadrant of
15+
the document window. All text in "outer" and its descendants occupies the second half of
16+
lines 5 through 8.
17+
</p>
18+
<p>
19+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
20+
beginning with the appropriate number. The lines, as they appear in the image, contain:
21+
</p>
22+
<pre>
23+
1 Beginning of body contents. End of
24+
25+
2 body contents.
26+
27+
3
28+
29+
4
30+
31+
5 Start of outer
32+
33+
6 contents. Inner
34+
35+
7 contents. End of
36+
37+
8 outer contents.
38+
</pre>
39+
<p>
40+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
41+
blue. "End of outer contents" is red.
42+
</p>
43+
<p><a href="../../Overview.html#img-flow-absolute">Return to image.</a></p>
44+
</body>
45+
</html>

‎css3-positioning/images/longdesc/flow-clear-desc.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description of example illustrating floating without clear</title>
5+
</head>
6+
<body>
7+
<h1>Long description of example illustrating floating without clear</h1>
8+
<p>
9+
This diagram illustrates the effects of floating a box ("inner") and how its "sibling"
10+
flows alongside it.
11+
</p>
12+
<p>
13+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the
14+
"inner" box has been floated to the right, all other text flows around it, including
15+
that of the "sibling" box (on lines 1 through 5).
16+
</p>
17+
<p>
18+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
19+
beginning with the appropriate number. Vertical bars represent the left edge of the
20+
floated box. The lines, as they appear in the image, contain:
21+
</p>
22+
<pre>
23+
1 Beginning of body contents. Start
24+
25+
2 of outer contents. | Inner
26+
27+
3 Sibling contents. End | contents.
28+
29+
4 of outer contents. End of body
30+
31+
5 contents.
32+
</pre>
33+
<p>
34+
The default text color is black. "Start of outer contents" is red. "Sibling contents" is
35+
red. "Inner contents" is blue. "End of outer contents" is red.
36+
</p>
37+
<p><a href="../../Overview.html#img-flow-clear">Return to image.</a></p>
38+
</body>
39+
</html>

‎css3-positioning/images/longdesc/flow-clear2-desc.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description of example illustrating floating with clear</title>
5+
</head>
6+
<body>
7+
<h1>Long description of example illustrating floating with clear</h1>
8+
<p>
9+
This diagram illustrates the effects of floating a box ("inner") and how its "sibling"
10+
is forced below it due to the 'clear' property.
11+
</p>
12+
<p>
13+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Text before
14+
the "inner" box flows on lines 1 and halfway on line 2. The "inner" box has been floated
15+
to the right and occupies the second half of lines 3 and 4. The sibling box flows on the
16+
following line (line 4) and is followed by the remainder of the text.
17+
</p>
18+
<p>
19+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
20+
beginning with the appropriate number. Vertical bars represent the left edge of the
21+
floated box. The lines, as they appear in the image, contain:
22+
</p>
23+
<pre>
24+
1 Beginning of body contents. Start
25+
26+
2 of outer contents. | Inner
27+
28+
3 | contents.
29+
30+
4 Sibling contents. End of outer
31+
32+
5 contents. End of body contents.
33+
</pre>
34+
<p>
35+
The default text color is black. "Start of outer contents" is red. "Sibling contents" is
36+
red. "Inner contents" is blue. "End of outer contents" is red.
37+
</p>
38+
<p><a href="../../Overview.html#img-flow-clear2">Return to image.</a></p>
39+
</body>
40+
</html>

‎css3-positioning/images/longdesc/flow-float-desc.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description of example illustrating floating</title>
5+
</head>
6+
<body>
7+
<h1>Long description of example illustrating floating</h1>
8+
<p>This diagram illustrates the effects of floating a box.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the
11+
"inner" box has been floated to the right, all other text flows around it (on lines 1
12+
through 4).
13+
</p>
14+
<p>
15+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
16+
beginning with the appropriate number. Vertical bars represent the left edge of the
17+
floated box. The lines, as they appear in the image, contain:
18+
</p>
19+
<pre>
20+
1 Beginning of body contents. Start
21+
22+
2 of outer contents. End | Inner
23+
24+
3 of outer contents. End | contents.
25+
26+
4 of body contents.
27+
</pre>
28+
<p>
29+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
30+
blue. "End of outer contents" is red.
31+
</p>
32+
<p><a href="../../Overview.html#img-flow-float">Return to image.</a></p>
33+
</body>
34+
</html>

‎css3-positioning/images/longdesc/flow-generic-desc.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for normal flow example</title>
5+
</head>
6+
<body>
7+
<h1>Long description for normal flow example</h1>
8+
<p>This diagram illustrates the normal flow of text between parent and sibling boxes.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Four lines
11+
of text are displayed, occupying line 1 through 4.
12+
</p>
13+
<p>
14+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
15+
beginning with the appropriate number. The lines, as they appear in the image, contain:
16+
</p>
17+
<pre>
18+
1 Beginning of body contents. Start
19+
20+
2 of outer contents. Inner contents.
21+
22+
3 End of outer contents. End of body
23+
24+
4 contents.
25+
</pre>
26+
<p>
27+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
28+
blue. "End of outer contents" is red.
29+
</p>
30+
<p><a href="../../Overview.html#img-flow-generic">Return to image.</a></p>
31+
</body>
32+
</html>

‎css3-positioning/images/longdesc/flow-page-desc.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for example illustrating page positioning</title>
5+
</head>
6+
<body>
7+
<h1>Long description for example illustrating page positioning</h1>
8+
<p>This diagram illustrates the effects of page positioning a box.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All text
11+
outside the "outer" box has been flowed into lines 1 and 2.
12+
</p>
13+
<p>
14+
The "outer" box is positioned absolutely so that it occupies the lower right quadrant of
15+
the document window. All text in "outer" and its descendants occupies the second half of
16+
lines 5 through 8.
17+
</p>
18+
<p>
19+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
20+
beginning with the appropriate number. The lines, as they appear in the image, contain:
21+
</p>
22+
<pre>
23+
1 Beginning of body contents. End of
24+
25+
2 body contents.
26+
27+
3
28+
29+
4
30+
31+
5 Start of outer
32+
33+
6 contents. Inner
34+
35+
7 contents. End of
36+
37+
8 outer contents.
38+
</pre>
39+
<p>
40+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
41+
blue. "End of outer contents" is red.
42+
</p>
43+
<p><a href="../../Overview.html#img-flow-page">Return to image.</a>
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)