123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
- <style>
- .disc li { list-style-type: disc; }
- .circle li { list-style-type: circle; }
- .square li { list-style-type: square; }
- .image li { list-style-type: square; list-style-image:url(images/png.png)}
- .missing li { list-style-type: square; list-style-image:url(dummy.png)}
- .nobullet li { list-style-type: none;}
- .noimage li { list-style-type: none; list-style-image:url(dummy.png)}
- .bigimage li { list-style-type: square; list-style-image:url(images/dokuwiki-128.png)}
- .mindentimage li { list-style-type: square; list-style-image:url(images/png.png); margin-left:50px;}
- .mindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); margin-left:100px;}
- .pindentimage li { list-style-type: square; list-style-image:url(images/png.png); padding-left:50px;}
- .pindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); padding-left:100px;}
- .mindentsquare li { list-style-type: square; margin-left:50px;}
- .mindentsquare2 li { list-style-type: square; margin-left:100px;}
- .pindentsquare li { list-style-type: square; padding-left:50px;}
- .pindentsquare2 li { list-style-type: square; padding-left:100px;}
- </style>
- </head>
- <body>
- <ul>
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- <ul><li>Sub 1</li>
- <li>Sub 2</li>
- <li>Sub 3</li>
- </ul>
- </ul>
- <ul class="circle">
- <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
- odio vitae libero tempus convallis. Cum sociis natoque penatibus et
- magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
- mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
- massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
- adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
- facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
- turpis vel magna. Cras eu est. Integer porttitor ligula a
- tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
- leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
- justo. Ut pellentesque ante in neque.</li>
- <li>Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
- non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
- diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
- massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
- mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
- vel erat tempus purus molestie suscipit. Vestibulum odio lorem,
- sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
- ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
- rhoncus quis, semper nec, mi. Donec euismod enim vitae velit. Nulla
- sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
- adipiscing lorem, bibendum luctus nisl tortor vitae leo.</li>
- <li style="list-style-position: inside">Inside. Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
- volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
- amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
- felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
- eleifend in, porttitor in, malesuada non, neque. Etiam sed
- augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
- adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
- nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
- malesuada facilisis. Vestibulum porta, metus sit amet egestas
- interdum, urna justo euismod erat, id tristique urna leo quis
- nibh. Morbi non erat.</li>
- </ul>
- <ul class="disc">
- <li>Item 1 disc</li>
- <li>Item 2 disc</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 disc</li>
- </ul>
- <ul class="circle">
- <li>Item 1 circle</li>
- <li>Item 2 circle</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 circle</li>
- </ul>
- <ul class="square">
- <li>Item 1 square</li>
- <li>Item 2 square</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 square </li>
- </ul>
- <ul class="image">
- <li>Item 1 image</li>
- <li>Item 2 image</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 image</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-image:none">Item 7 noimage</li>
- <ul>
- <li>sub Item 1 image</li>
- <li>sub Item 2 image</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-image:none">sub Item 5 noimage</li>
- </ul>
- </ul>
- <ul class="missing">
- <li>Item 1 missing image - fallback square</li>
- <li>Item 2 missing image - fallback square</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 missing image - fallback square</li>
- </ul>
- <ul class="nobullet">
- <li>Item 1 nobullet</li>
- <li>Item 2 nobullet</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 nobullet</li>
- </ul>
- <ul class="noimage">
- <li>Item 1 missing image - fallback none</li>
- <li>Item 2 missing image - fallback none</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 missing image - fallback none</li>
- </ul>
- <ul class="bigimage">
- <li>Item 1 bigimage</li>
- <li>Item 2 bigimage</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>Item 4 bigimage</li>
- </ul>
- <ul class="mindentimage">
- <li>margin Item 1 image</li>
- <li>margin Item 2 image</li>
- <li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li>margin Item 4 image</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-image:none">margin Item 7 noimage</li>
- <ul class="mindentimage2">
- <li>margin sub Item 1 image</li>
- <li>margin sub Item 2 image</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <li style="list-style-image:none">margin sub Item 5 noimage</li>
- </ul>
- </ul>
- <ul class="pindentimage">
- <li>padding Item 1 image</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <ul class="pindentimage2">
- <li>padding sub Item 1 image</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- </ul>
- </ul>
- <ul class="mindentsquare">
- <li>margin Item 1 square</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <ul class="mindentsquare2">
- <li>margin sub Item 1 square</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- </ul>
- </ul>
- <ul class="pindentsquare">
- <li>padding Item 1 square</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- <ul class="pindentsquare2">
- <li>padding sub Item 1 square</li>
- <li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
- sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
- duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
- sanctus est Lorem ipsum dolor sit amet.</li>
- </ul>
- </ul>
- <h1>combined list attributes list-style</h1>
- <ul style="list-style:square inside url(dummy.png);">
- <li>list-style:square inside url(dummy.png);</li>
- <li style="list-style-position:outside;">list-style:outside;[overwrites only position]</li>
- </ul>
- <ul style="list-style:square inside url(images/png.png);">
- <li>list-style:square inside url(images/png.png);</li>
- <li style="list-style-position:outside;">list-style-position:outside;[overwrites only position]</li>
- <li style="list-style:outside;">list-style-position:outside;[overwrite attributes - firefox3: all; dompdf, internet explorer 8: only position]</li>
- <li style="list-style:none;">list-style:none; [resets both, bullet and image]</li>
- </ul>
- </body> </html>
|