Jump to content

nested ordered list like this....


brynn
 Share

Recommended Posts

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 :Pleased:

Link to comment
Share on other sites

OH! I think I figured it out on my own :dirol:

 

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 :Pleased:

Edited by brynn
Link to comment
Share on other sites

<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

<?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 by Ingolme
Advertising
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...