brynn Posted August 26, 2014 Share Posted August 26, 2014 Hi Friends, I was just looking at the HTML section about lists, but didn't see the kind of list I want. I did find an example of unordered nested list. But I need nested ordered list. I'll put an example below. 1. first item 2. second item 2a. whatever 2b. more stuff 2c. last of first level nest 3. third item 3a. new nest 3b. whatever 3b.1 2nd level nest 3b.2 whatever 4. fourth item etc. The numbering doesn't have to be exactly like that. But the spacing (indents) is important. Instead of 1. 2. 2a 2b 2c 3. 3a 3b 3b.1 3b.2 4. etc. It could be 1. 2. a. b. c. 3. a. b. b1 b2 4. I guess generally I'm looking for a typical outline type of nested, ordered list. Is it possible to do that with list tags/code? Or can it only be done with divs, spans and style stuff? Thanks for your help Link to comment Share on other sites More sharing options...
brynn Posted August 26, 2014 Author Share Posted August 26, 2014 (edited) OH! I think I figured it out on my own This is what I did, in case anyone else searches out this topic in the future. <ol><li>1st item</li><li>2nd item</li><ol type="a"><li>1st level nest</li><li>2nd 1st level nest</li></ol><li>3rd item</li><ol type="a"><li>3a</li><li>3b</li><ol><li>3b1</li><li>3b2</li></ol><li>3c</li></ol><li> no4</li></ol> And thanks anyway Edited August 26, 2014 by brynn Link to comment Share on other sites More sharing options...
brynn Posted August 26, 2014 Author Share Posted August 26, 2014 Actually, I do still have a question. Now it looks like the numbers might be important. Is there a way to make the numbers like this? 1. 2. 2.1 2.2 2.3 3. 3.1 3.2 3.21 3.22 3.3 4. Thanks again Link to comment Share on other sites More sharing options...
niche Posted August 26, 2014 Share Posted August 26, 2014 Why not just display an image? Link to comment Share on other sites More sharing options...
brynn Posted August 26, 2014 Author Share Posted August 26, 2014 Thanks for replying. I'm afraid I don't know what you mean. Link to comment Share on other sites More sharing options...
Ingolme Posted August 26, 2014 Share Posted August 26, 2014 <ol> and <ul> elements cannot have any other child elements other than <li>. To nest lists you have to put another list inside a list item: <ol> <li>Item 1 <ol> <li>Item 1a</li> <ol> </li></ol> You can adjust numbering using CSS counter properties: http://www.w3schools.com/cssref/pr_gen_counter-increment.asp http://www.w3schools.com/cssref/pr_gen_counter-reset.asp Also used is the :before selector and the content property. Link to comment Share on other sites More sharing options...
brynn Posted August 26, 2014 Author Share Posted August 26, 2014 Ok. Thanks Ingolme! I'll try those Link to comment Share on other sites More sharing options...
happycodings Posted August 28, 2014 Share Posted August 28, 2014 (edited) <?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <title>Unordered Lists</title></head><body><p>nested ordered list example:</p><ol type="I"> <li>apple</li> <li>pear</li> <li>pomegranate</li> <li> <ol type="a"> <li>watermelon</li> <li>banana</li> <li>cherry</li> </ol> </li> <li>mulberry</li></ol></body></html> Edited August 30, 2014 by Ingolme Advertising Link to comment Share on other sites More sharing options...
brynn Posted August 29, 2014 Author Share Posted August 29, 2014 Oohhh.... I see! You put the nested list inside a list item, instead of in between list items! Very nice. Thanks happycodings Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now