1120431-2-ref.html (8220B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <style> 6 .container-ext { 7 padding-left: 180px; 8 padding-right: 180px; 9 } 10 11 .headline { 12 line-height: 30px; 13 text-shadow: 1px 1px rgba(255, 255, 255, 0.3); 14 } 15 16 ul { 17 list-style: none; 18 } 19 20 .headline-left { 21 left: 30px; 22 } 23 24 .headline-right { 25 top: 20px !important; 26 /*bottom:370px !important;*/ 27 right: 20px; 28 } 29 30 .headline-active { 31 position: fixed; 32 top: 100px; 33 } 34 35 .list-author:before, 36 .list-author:after { 37 content: "\200e"; 38 display: table; 39 } 40 .list-author:after { 41 clear: both; 42 } 43 44 .list-author-vocal { 45 float: left; 46 margin-right: 10px; 47 } 48 49 .ff { position: fixed; } 50 </style> 51 </head> 52 <body> 53 <div class="container-ext"> 54 55 <div class="headline headline-left headline-active"> 56 <ul class="list-author"> 57 <li class="list-author-vocal"> 58 A 59 </li> 60 <li class="list-author-vocal"> 61 B 62 </li> 63 <li class="list-author-vocal"> 64 C 65 </li> 66 <li class="list-author-vocal"> 67 D 68 </li> 69 <li class="list-author-vocal"> 70 E 71 </li> 72 </ul> 73 <ul class="list-author"> 74 <li class="list-author-vocal"> 75 F 76 </li> 77 <li class="list-author-vocal"> 78 G 79 </li> 80 <li class="list-author-vocal"> 81 H 82 </li> 83 <li class="list-author-vocal"> 84 I 85 </li> 86 <li class="list-author-vocal"> 87 J 88 </li> 89 </ul> 90 <ul class="list-author"> 91 <li class="list-author-vocal"> 92 K 93 </li> 94 <li class="list-author-vocal"> 95 L 96 </li> 97 <li class="list-author-vocal"> 98 M 99 </li> 100 <li class="list-author-vocal"> 101 N 102 </li> 103 <li class="list-author-vocal"> 104 O 105 </li> 106 </ul> 107 <ul class="list-author"> 108 <li class="list-author-vocal active"> 109 P 110 </li> 111 <li class="list-author-vocal"> 112 R 113 </li> 114 <li class="list-author-vocal"> 115 S 116 </li> 117 <li class="list-author-vocal"> 118 T 119 </li> 120 <li class="list-author-vocal"> 121 V 122 </li> 123 </ul> 124 <ul class="list-author"> 125 <li class="list-author-vocal"> 126 W 127 </li> 128 <li class="list-author-vocal"> 129 Y 130 </li> 131 <li class="list-author-vocal"> 132 Z 133 </li> 134 </ul> 135 <div class="ff" style="left: 69px; top: 115px; width: 3px; height: 3px; background: blue;"></div> 136 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> 137 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> 138 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> 139 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> 140 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> 141 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div> 142 <div class="ff" style="left: 69px; top: 145px; width: 3px; height: 3px; background: blue;"></div> 143 <div class="ff" style="left: 69px; top: 161px; width: 3px; height: 3px; background: blue;"></div> 144 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> 145 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> 146 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> 147 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> 148 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> 149 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div> 150 <div class="ff" style="left: 69px; top: 191px; width: 3px; height: 3px; background: blue;"></div> 151 <div class="ff" style="left: 69px; top: 207px; width: 3px; height: 3px; background: blue;"></div> 152 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> 153 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> 154 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> 155 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> 156 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> 157 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div> 158 <div class="ff" style="left: 69px; top: 237px; width: 3px; height: 3px; background: blue;"></div> 159 <div class="ff" style="left: 69px; top: 253px; width: 3px; height: 3px; background: blue;"></div> 160 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> 161 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> 162 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> 163 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> 164 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> 165 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div> 166 <div class="ff" style="left: 69px; top: 283px; width: 3px; height: 3px; background: blue;"></div> 167 <div class="ff" style="left: 69px; top: 299px; width: 3px; height: 3px; background: blue;"></div> 168 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> 169 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> 170 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> 171 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div> 172 <div class="ff" style="left: 69px; top: 329px; width: 3px; height: 3px; background: blue;"></div> 173 <div class="ff" style="left: 69px; top: 345px; width: 3px; height: 3px; background: blue;"></div> 174 <div class="ff" style="left: 68px; top: 352px; width: 41px; height: 19px; background: blue;"></div> 175 <div class="ff" style="left: 68px; top: 382px; width: 41px; height: 19px; background: blue;"></div> 176 <div class="ff" style="left: 68px; top: 412px; width: 41px; height: 19px; background: blue;"></div> 177 <div class="ff" style="left: 68px; top: 442px; width: 41px; height: 19px; background: blue;"></div> 178 <div class="ff" style="left: 69px; top: 465px; width: 3px; height: 3px; background: blue;"></div> 179 <div class="ff" style="left: 69px; top: 469px; width: 3px; height: 3px; background: blue;"></div><!-- only needed after whitespace opt --> 180 <div class="ff" style="left: 69px; top: 473px; width: 3px; height: 3px; background: blue;"></div><!-- only needed after whitespace opt --> 181 182 <ul class="list-author"> 183 <li> 184 Word 185 </li> 186 <li> 187 Word 188 </li> 189 <li> 190 Word 191 </li> 192 <li> 193 Word 194 </li> 195 </ul> 196 </div> <!-- headline headline-left headline-active --> 197 198 <div style="position:relative;"> 199 <div style="height: 4000px; background: red;"> 200 </div> 201 </div> 202 </div> <!-- container-ext --> 203 </body> 204 </html>