|
1 | | - |
2 | | -<html> |
| 1 | +<html lang="en"> |
3 | 2 | <head> |
4 | 3 | <title>Relative Locators</title> |
5 | 4 | <style> |
|
10 | 9 | td { |
11 | 10 | border: solid; |
12 | 11 | } |
13 | | - .small-rectangle { |
| 12 | + #center { |
| 13 | + width: 100px; |
| 14 | + } |
| 15 | + #rectangles { |
| 16 | + position: relative; |
| 17 | + } |
| 18 | + #rectangles div { |
| 19 | + position: absolute; |
| 20 | + border: 1px solid black; |
| 21 | + height: 50px; |
| 22 | + width: 50px; |
| 23 | + } |
| 24 | + #a { |
| 25 | + left: 25px; |
| 26 | + top: 0; |
| 27 | + } |
| 28 | + #b { |
| 29 | + left: 78px; |
| 30 | + top: 30px; |
| 31 | + } |
| 32 | + #c { |
| 33 | + left: 131px; |
| 34 | + top: 60px; |
| 35 | + } |
| 36 | + #d { |
| 37 | + left: 0; |
| 38 | + top: 53px; |
| 39 | + } |
| 40 | + #e { |
| 41 | + left: 53px; |
| 42 | + top: 83px; |
| 43 | + } |
| 44 | + #f { |
| 45 | + left: 106px; |
| 46 | + top: 113px; |
| 47 | + } |
| 48 | + #proximity .small { |
14 | 49 | border: 1px solid black; |
15 | 50 | width: 100px; |
16 | 51 | height: 50px; |
17 | 52 | margin: 5px 25px; |
18 | 53 | } |
19 | | - .big-rectangle { |
| 54 | + #proximity .big { |
20 | 55 | border: 1px solid black; |
21 | 56 | width: 150px; |
22 | | - height: 400px; |
| 57 | + height: 400px; |
| 58 | + } |
| 59 | + #rect3 { |
| 60 | + margin: 60px 25px; |
23 | 61 | } |
24 | 62 | </style> |
25 | 63 | </head> |
26 | 64 | <body> |
27 | 65 | <h1>Relative Locator Tests</h1> |
28 | | -<p id="above">This text is above. |
29 | | -<p id="mid">This is a paragraph of text in the middle. |
30 | | -<p id="below">This text is below. |
31 | | - |
| 66 | +<section id="paragraphs"> |
| 67 | + <p id="above">This text is above.</p> |
| 68 | + <p id="mid">This is a paragraph of text in the middle.</p> |
| 69 | + <p id="below">This text is below.</p> |
| 70 | +</section> |
32 | 71 |
|
33 | 72 | <table> |
34 | 73 | <tr> |
35 | | - <td id="first">1</td> |
36 | | - <td id="second" style="width: 100px">2</td> |
37 | | - <td id="third">3</td> |
| 74 | + <td id="topLeft">1</td> |
| 75 | + <td id="top">2</td> |
| 76 | + <td id="topRight">3</td> |
38 | 77 | </tr> |
39 | 78 | <tr> |
40 | | - <td id="fourth">4</td> |
| 79 | + <td id="left">4</td> |
41 | 80 | <td id="center">5</td> |
42 | | - <td id="sixth">6</td> |
| 81 | + <td id="right">6</td> |
43 | 82 | </tr> |
44 | 83 | <tr> |
45 | | - <td id="seventh">7</td> |
46 | | - <td id="eighth">8</td> |
47 | | - <td id="ninth">9</td> |
| 84 | + <td id="bottomLeft">7</td> |
| 85 | + <td id="bottom">8</td> |
| 86 | + <td id="bottomRight">9</td> |
48 | 87 | </tr> |
49 | 88 | </table> |
50 | 89 |
|
51 | | -<div class="small-rectangle" id="rect1"> |
52 | | - Rectangle 1 |
53 | | -</div> |
54 | | -<div class="big-rectangle" id="rect2"> |
55 | | - Rectangle 2, which is near Rectangle 1 |
56 | | -</div> |
| 90 | +<section id="rectangles"> |
| 91 | + <div id="a">El-A</div> |
| 92 | + <div id="b">El-B</div> |
| 93 | + <div id="c">El-C</div> |
| 94 | + <div id="d">El-D</div> |
| 95 | + <div id="e">El-E</div> |
| 96 | + <div id="f">El-F</div> |
| 97 | +</section> |
57 | 98 |
|
58 | | -<div class="small-rectangle" style="margin:60px 25px" id="rect3"> |
59 | | - Rectangle 3 |
60 | | -</div> |
61 | | -<div class="big-rectangle" id="rect4"> |
62 | | - Rectangle 4, which is not near Rectangle 2 because it is more than 50 px away |
63 | | -</div> |
| 99 | +<section id="proximity"> |
| 100 | + <div class="small" id="rect1">Rectangle 1</div> |
| 101 | + <div class="big" id="rect2">Rectangle 2, which is near Rectangle 1</div> |
| 102 | + <div class="small" id="rect3">Rectangle 3</div> |
| 103 | + <div class="big" id="rect4"> |
| 104 | + Rectangle 4, which is not near Rectangle 2 because it is more than 50 px away |
| 105 | + </div> |
| 106 | +</section> |
64 | 107 |
|
65 | 108 | </body> |
66 | 109 | </html> |
0 commit comments