Code It All - Lists



Menu - Home - Help Forum - CIA Topsite - Getting Started - HTML Tags - Links - Graphics - Text - Display Your Code - Site Formatting - CSS - PHP - Javascript - Guestbooks / Shoutbox - Lists - What is a List? - Ordered Lists - Unordered Lists - Using Both - E-mail - Extras - Site Tips Tools - Color Chart - Scrollbar Gen - ASCII Chart - HTML Cheat Sheet - MySpace Ad Remover - Xanga Ad Remover Contact Me Site Links - MySpace Icons - Your link here - More Affiliates...	Lists Lists can be useful at times. Technically you can make it by just numbering each part of the list. However, this code does it pretty much all for you. What is a List? A list is just a way of keeping order of a few ideas one below the other. Top Ordered Lists Ordered lists simply mean they're counted. Whether it be by number, letter or roman numeral. <OL> <LI>Code <LI>It <LI>All <LI>.com </OL> This ordered list counts starting at one. - See this code in action Code It All .com What if you wanted to start from a different number. That's easy, just add the line start="# you want to start from". <OL start="10"> <LI>Code <LI>It <LI>All <LI>.com </OL> This ordered list counts starting at ten. - See this code in action Code It All .com Counting by letter is just as easy. Instead of start you put type="A" and it will begin counting from A. <OL type="A"> <LI>Code <LI>It <LI>All <LI>.com </OL> This ordered list counts starting at A. - See this code in action Code It All .com Likewise for a roman numeral count place I within the quotes for type. <OL type="I"> <LI>Code <LI>It <LI>All <LI>.com </OL> This ordered list counts starting at I - See this code in action Code It All .com Top I just want bullets No worries. The UL command creates unordered lists. <UL> <LI>Code <LI>It <LI>All <LI>.com </UL> The default for unordered lists is a black dot. - See this code in action Code It All .com Don't like the black dot? Change the type to circle. <UL type="circle"> <LI>Code <LI>It <LI>All <LI>.com </UL> This unordered list uses hollow circles. - See this code in action Code It All .com Still not happy? Change the type to a square. <UL type="square"> <LI>Code <LI>It <LI>All <LI>.com </UL> This unordered list uses squares. - See this code in action Code It All .com If none of these suit your needs you can create your own bullet and link to it using the code below. style="list-style-image: url(yourfilename.gif)" <UL style="list-style-image: url(images/exampledot.gif)"> <LI>Code <LI>It <LI>All <LI>.com </UL> This unordered list uses an example image. - See this code in action Code It All .com Top Combining Ordered and Unordered Lists At first glance this might look complicated but bear with me and you'll get it soon enough. The first step is to start off with an ordered list. <ol> then <li> is the first of the ordered lists. However, underneath it you'd like to place bullets. Therefore you begin with <ul> an unordered list followed by as many <li> tags as you need bullets. Then don't forget to close the unordered list </ul>, this brings you back to the ordered list in which <li> continues counting. Under that one if you'd like to add more bullets just start a new unordered list <ul> with <li> for each bullet. When you're finished repeating this for each of your lists be sure to close the unordered list </ul> and the ordered list </ol> <ol> <li>First Category <ul> <li>one <li>two <li>three </ul> <li>Second Category <ul> <li>four <li>five <li>six <li>seven </ul> </ol> - See this code in action Top
Code It All - Copyright 2008