[3019] | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
---|
| 2 | <html> |
---|
| 3 | <head> |
---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> |
---|
| 5 | <style> |
---|
| 6 | .disc li { list-style-type: disc; } |
---|
| 7 | .circle li { list-style-type: circle; } |
---|
| 8 | .square li { list-style-type: square; } |
---|
| 9 | .image li { list-style-type: square; list-style-image:url(images/png.png)} |
---|
| 10 | .missing li { list-style-type: square; list-style-image:url(dummy.png)} |
---|
| 11 | .nobullet li { list-style-type: none;} |
---|
| 12 | .noimage li { list-style-type: none; list-style-image:url(dummy.png)} |
---|
| 13 | .bigimage li { list-style-type: square; list-style-image:url(images/dokuwiki-128.png)} |
---|
| 14 | .mindentimage li { list-style-type: square; list-style-image:url(images/png.png); margin-left:50px;} |
---|
| 15 | .mindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); margin-left:100px;} |
---|
| 16 | .pindentimage li { list-style-type: square; list-style-image:url(images/png.png); padding-left:50px;} |
---|
| 17 | .pindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); padding-left:100px;} |
---|
| 18 | .mindentsquare li { list-style-type: square; margin-left:50px;} |
---|
| 19 | .mindentsquare2 li { list-style-type: square; margin-left:100px;} |
---|
| 20 | .pindentsquare li { list-style-type: square; padding-left:50px;} |
---|
| 21 | .pindentsquare2 li { list-style-type: square; padding-left:100px;} |
---|
| 22 | </style> |
---|
| 23 | </head> |
---|
| 24 | |
---|
| 25 | <body> |
---|
| 26 | <ul> |
---|
| 27 | <li>Item 1</li> |
---|
| 28 | <li>Item 2</li> |
---|
| 29 | <li>Item 3</li> |
---|
| 30 | <ul><li>Sub 1</li> |
---|
| 31 | <li>Sub 2</li> |
---|
| 32 | <li>Sub 3</li> |
---|
| 33 | </ul> |
---|
| 34 | </ul> |
---|
| 35 | |
---|
| 36 | <ul class="circle"> |
---|
| 37 | <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at |
---|
| 38 | odio vitae libero tempus convallis. Cum sociis natoque penatibus et |
---|
| 39 | magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus |
---|
| 40 | mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla |
---|
| 41 | massa quis velit. Curabitur metus massa, semper mollis, molestie vel, |
---|
| 42 | adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus |
---|
| 43 | facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis |
---|
| 44 | turpis vel magna. Cras eu est. Integer porttitor ligula a |
---|
| 45 | tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis |
---|
| 46 | leo. Nulla pellentesque molestie ante. Quisque vestibulum est id |
---|
| 47 | justo. Ut pellentesque ante in neque.</li> |
---|
| 48 | <li>Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo |
---|
| 49 | non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis |
---|
| 50 | diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi |
---|
| 51 | massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus |
---|
| 52 | mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam |
---|
| 53 | vel erat tempus purus molestie suscipit. Vestibulum odio lorem, |
---|
| 54 | sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis |
---|
| 55 | ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at, |
---|
| 56 | rhoncus quis, semper nec, mi. Donec euismod enim vitae velit. Nulla |
---|
| 57 | sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa |
---|
| 58 | adipiscing lorem, bibendum luctus nisl tortor vitae leo.</li> |
---|
| 59 | <li style="list-style-position: inside">Inside. Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque |
---|
| 60 | volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit |
---|
| 61 | amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed |
---|
| 62 | felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros, |
---|
| 63 | eleifend in, porttitor in, malesuada non, neque. Etiam sed |
---|
| 64 | augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer |
---|
| 65 | adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a, |
---|
| 66 | nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem |
---|
| 67 | malesuada facilisis. Vestibulum porta, metus sit amet egestas |
---|
| 68 | interdum, urna justo euismod erat, id tristique urna leo quis |
---|
| 69 | nibh. Morbi non erat.</li> |
---|
| 70 | </ul> |
---|
| 71 | |
---|
| 72 | <ul class="disc"> |
---|
| 73 | <li>Item 1 disc</li> |
---|
| 74 | <li>Item 2 disc</li> |
---|
| 75 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 76 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 77 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 78 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 79 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 80 | <li>Item 4 disc</li> |
---|
| 81 | </ul> |
---|
| 82 | |
---|
| 83 | <ul class="circle"> |
---|
| 84 | <li>Item 1 circle</li> |
---|
| 85 | <li>Item 2 circle</li> |
---|
| 86 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 87 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 88 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 89 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 90 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 91 | <li>Item 4 circle</li> |
---|
| 92 | </ul> |
---|
| 93 | |
---|
| 94 | <ul class="square"> |
---|
| 95 | <li>Item 1 square</li> |
---|
| 96 | <li>Item 2 square</li> |
---|
| 97 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 98 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 99 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 100 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 101 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 102 | <li>Item 4 square </li> |
---|
| 103 | </ul> |
---|
| 104 | |
---|
| 105 | <ul class="image"> |
---|
| 106 | <li>Item 1 image</li> |
---|
| 107 | <li>Item 2 image</li> |
---|
| 108 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 109 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 110 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 111 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 112 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 113 | <li>Item 4 image</li> |
---|
| 114 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 115 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 116 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 117 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 118 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 119 | <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 120 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 121 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 122 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 123 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 124 | <li style="list-style-image:none">Item 7 noimage</li> |
---|
| 125 | |
---|
| 126 | <ul> |
---|
| 127 | <li>sub Item 1 image</li> |
---|
| 128 | <li>sub Item 2 image</li> |
---|
| 129 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 130 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 131 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 132 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 133 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 134 | <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 135 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 136 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 137 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 138 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 139 | <li style="list-style-image:none">sub Item 5 noimage</li> |
---|
| 140 | </ul> |
---|
| 141 | |
---|
| 142 | </ul> |
---|
| 143 | |
---|
| 144 | <ul class="missing"> |
---|
| 145 | <li>Item 1 missing image - fallback square</li> |
---|
| 146 | <li>Item 2 missing image - fallback square</li> |
---|
| 147 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 148 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 149 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 150 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 151 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 152 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 153 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 154 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 155 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 156 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 157 | <li>Item 4 missing image - fallback square</li> |
---|
| 158 | </ul> |
---|
| 159 | |
---|
| 160 | <ul class="nobullet"> |
---|
| 161 | <li>Item 1 nobullet</li> |
---|
| 162 | <li>Item 2 nobullet</li> |
---|
| 163 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 164 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 165 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 166 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 167 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 168 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 169 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 170 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 171 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 172 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 173 | <li>Item 4 nobullet</li> |
---|
| 174 | </ul> |
---|
| 175 | |
---|
| 176 | <ul class="noimage"> |
---|
| 177 | <li>Item 1 missing image - fallback none</li> |
---|
| 178 | <li>Item 2 missing image - fallback none</li> |
---|
| 179 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 180 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 181 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 182 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 183 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 184 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 185 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 186 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 187 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 188 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 189 | <li>Item 4 missing image - fallback none</li> |
---|
| 190 | </ul> |
---|
| 191 | |
---|
| 192 | <ul class="bigimage"> |
---|
| 193 | <li>Item 1 bigimage</li> |
---|
| 194 | <li>Item 2 bigimage</li> |
---|
| 195 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 196 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 197 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 198 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 199 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 200 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 201 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 202 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 203 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 204 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 205 | <li>Item 4 bigimage</li> |
---|
| 206 | </ul> |
---|
| 207 | |
---|
| 208 | <ul class="mindentimage"> |
---|
| 209 | <li>margin Item 1 image</li> |
---|
| 210 | <li>margin Item 2 image</li> |
---|
| 211 | <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 212 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 213 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 214 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 215 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 216 | <li>margin Item 4 image</li> |
---|
| 217 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 218 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 219 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 220 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 221 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 222 | <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 223 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 224 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 225 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 226 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 227 | <li style="list-style-image:none">margin Item 7 noimage</li> |
---|
| 228 | |
---|
| 229 | <ul class="mindentimage2"> |
---|
| 230 | <li>margin sub Item 1 image</li> |
---|
| 231 | <li>margin sub Item 2 image</li> |
---|
| 232 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 233 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 234 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 235 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 236 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 237 | <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 238 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 239 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 240 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 241 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 242 | <li style="list-style-image:none">margin sub Item 5 noimage</li> |
---|
| 243 | </ul> |
---|
| 244 | |
---|
| 245 | </ul> |
---|
| 246 | |
---|
| 247 | <ul class="pindentimage"> |
---|
| 248 | <li>padding Item 1 image</li> |
---|
| 249 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 250 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 251 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 252 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 253 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 254 | <ul class="pindentimage2"> |
---|
| 255 | <li>padding sub Item 1 image</li> |
---|
| 256 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 257 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 258 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 259 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 260 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 261 | </ul> |
---|
| 262 | </ul> |
---|
| 263 | |
---|
| 264 | <ul class="mindentsquare"> |
---|
| 265 | <li>margin Item 1 square</li> |
---|
| 266 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 267 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 268 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 269 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 270 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 271 | <ul class="mindentsquare2"> |
---|
| 272 | <li>margin sub Item 1 square</li> |
---|
| 273 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 274 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 275 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 276 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 277 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 278 | </ul> |
---|
| 279 | </ul> |
---|
| 280 | |
---|
| 281 | <ul class="pindentsquare"> |
---|
| 282 | <li>padding Item 1 square</li> |
---|
| 283 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 284 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 285 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 286 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 287 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 288 | <ul class="pindentsquare2"> |
---|
| 289 | <li>padding sub Item 1 square</li> |
---|
| 290 | <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, |
---|
| 291 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna |
---|
| 292 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo |
---|
| 293 | duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata |
---|
| 294 | sanctus est Lorem ipsum dolor sit amet.</li> |
---|
| 295 | </ul> |
---|
| 296 | </ul> |
---|
| 297 | |
---|
| 298 | <h1>combined list attributes list-style</h1> |
---|
| 299 | |
---|
| 300 | <ul style="list-style:square inside url(dummy.png);"> |
---|
| 301 | <li>list-style:square inside url(dummy.png);</li> |
---|
| 302 | <li style="list-style-position:outside;">list-style:outside;[overwrites only position]</li> |
---|
| 303 | </ul> |
---|
| 304 | <ul style="list-style:square inside url(images/png.png);"> |
---|
| 305 | <li>list-style:square inside url(images/png.png);</li> |
---|
| 306 | <li style="list-style-position:outside;">list-style-position:outside;[overwrites only position]</li> |
---|
| 307 | <li style="list-style:outside;">list-style-position:outside;[overwrite attributes - firefox3: all; dompdf, internet explorer 8: only position]</li> |
---|
| 308 | <li style="list-style:none;">list-style:none; [resets both, bullet and image]</li> |
---|
| 309 | </ul> |
---|
| 310 | |
---|
| 311 | |
---|
| 312 | </body> </html> |
---|