Jump to content

Nested Ordered Lists Selectors


holmedwa04

Recommended Posts

Hello All,

 

I've been pulling my hair out over a seemingly simple issue. I'd like to create something as follows:

1. Question 1
	a. Question 1 a				b. Question 1 b				c. Question 1 c
		i. Question 1 a i			i. Question 1 b i			i. Question 1 c i
		ii. Question 1 a ii			ii. Question 1 b ii			ii. Question 1 c ii
		iii. Question 1 a iii		        iii. Question 1 b iii		        iii. Question 1 c iii

2. Question 2
	etc.

Now, I'm perfectly happy to nest either ordered or unordered lists in the HTML, but what I can seem to get working is using the correct selector so that I can use:

list-style-type:decimal;
list-style-type:lower-alpha;
list-style-type:lower-roman;

To format the different levels of the list.

 

Also, I can't fully remember how to make the list for the second level go left to right instead of top to bottom.

 

Any help would be much appreciated.

 

Kind Regards

 

Edward

Link to comment
Share on other sites

Hi Dsonesuk

 

Thank you for your reply. I can't believe how simple the selector is! I knew it mustn't of been something too complicated!

 

I have that bit working, but when I try either float:left or display:inline-block everything seems to go wrong.

 

This is the CSS code:

/* unclicked style div.more */
div.more i {
	float:left;
	cursor:pointer;
	color:#085fc9;
	font-size:10pt;
	font-weight:bold;
	text-decoration:none;
	font-style:normal;
	}
	
div.more i:hover {
	float:left;
	cursor:pointer;
	color:#085fc9;
	font-size:10pt;
	font-weight:bold;
	text-decoration:underline overline;
	font-style:normal;
	}
	
div.more i.hide {
	display:none;
	}
	
div.more p {
	display:none;
	}
	
div.more ol {
	display:none;
	}

/* clicked style div.click */
div.click i.show {
	display:none;
	}
	
div.click i.hide {
	display:block;
	}
	
div.click p {
	display:block;
	}
	
div.click ol {
	display:block;
	}
	
div.click ol li {
	list-style-type:decimal;
	}
	
div.click ol ol li {
	list-style-type:lower-alpha;
	width:120px
	}
	
div.click ol ol ol li {
	list-style-type:lower-roman;
	width:120px;
	}

This is the HTML:

<div id="outer">
<div class="more">

<i class="show">Click here to reveal the answers</i>
<i class="hide">Click here to hide the answers</i>.

<br />
<p>These are the answers to the quiz.</p>

<ol>
<li>Answer to first question</li>
    <ol>
    <li>Sub Item a</li>
        <ol>
        <li>Sub Sub Item i</li>
        <li>Sub Sub Item ii</li>
        <li>Sub Sub Item iii</li>
        </ol>
    <li>Sub Item b</li>
    	<ol>
        <li>Sub Sub Item i</li>
        <li>Sub Sub Item ii</li>
        <li>Sub Sub Item iii</li>
        </ol>
    <li>Sub Item c</li>
        <ol>
        <li>Sub Sub Item i</li>
        <li>Sub Sub Item ii</li>
        <li>Sub Sub Item iii</li>
        </ol>
    </ol>
<li>Answer to second question</li>
<li>Answer to third question</li>
<li>Answer to fourth question</li>
</ol>

</div> <!-- end of more -->
</div> <!-- end of outer -->

And also live example: https://staffordscuba.co.uk/test.php

 

Kind Regards

 

Edward

Link to comment
Share on other sites

THAT! is not the correct structure for a ordered list layout. An ol element cannot be a direct child of ol, only a LI element

<ol>
<li>Answer to first question
    <ol>
    <li>Sub Item a
        <ol>
        <li>Sub Sub Item i</li>
        <li>Sub Sub Item ii</li>
        <li>Sub Sub Item iii</li>
        </ol>
    </li>
    <li>Sub Item b
    	<ol>
        <li>Sub Sub Item i</li>
        <li>Sub Sub Item ii</li>
        <li>Sub Sub Item iii</li>
        </ol>
    </li>
    <li>Sub Item c
        <ol>
        <li>Sub Sub Item i</li>
        <li>Sub Sub Item ii</li>
        <li>Sub Sub Item iii</li>
        </ol>
    </li>
    </ol>
</li>
</ol>
Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Ah ha, so that's why the display:inline-block wasn't working correctly!

 

I've made this change and added the display:inline-block to the second level of lists in the CSS, but the list letters and numerals are disappearing now.

 

Kind Regards

 

Ed

Link to comment
Share on other sites

Seems display: inline-block does not work well if you want to see list type styles, float however works, and i don't know how expect list styling to work with classes that do not exist?

        <div id="outer">
            <div class="more">

                <i class="show">Click here to reveal the answers</i>
                <i class="hide">Click here to hide the answers</i>.

                <br />
                <p>These are the answers to the quiz.</p>

                <ol>
                    <li>Answer to first question
                        <ol>
                            <li>Sub Item a
                                <ol>
                                    <li>Sub Sub Item i</li>
                                    <li>Sub Sub Item ii</li>
                                    <li>Sub Sub Item iii</li>
                                </ol>

                            </li>
                            <li>Sub Item b
                                <ol>
                                    <li>Sub Sub Item i</li>
                                    <li>Sub Sub Item ii</li>
                                    <li>Sub Sub Item iii</li>
                                </ol>

                            </li>
                            <li>Sub Item c
                                <ol>
                                    <li>Sub Sub Item i</li>
                                    <li>Sub Sub Item ii</li>
                                    <li>Sub Sub Item iii</li>
                                </ol>

                            </li>
                        </ol>


                    </li>
                    <li>Answer to second question</li>
                    <li>Answer to third question</li>
                    <li>Answer to fourth question</li>
                </ol>
            </div> <!-- end of more -->
        </div> <!-- end of outer -->
       ol ol {width: 50%; overflow: hidden;}

            ol ol li {width: 33%; float: left; }
            ol ol ol li {width: auto; }

            ol {
                list-style-type: decimal;
            }

            ol ol {
                list-style-type: lower-alpha;
                /* width:120px*/
            }

            ol ol ol {
                list-style-type: lower-roman;
                /*width:120px;*/
            }
Link to comment
Share on other sites

Dsonesuk, the classes are related to the fact that the content is hidden and then appears when you click the text. There is a JS file with the following code in it:

clickMenu = function(menu,element,cname) {
	var getEls = document.getElementById(menu).getElementsByTagName(element);

	for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
			if ((this.className.indexOf(cname))!=-1)
			{
			if ((this.className.indexOf('click'))!=-1) {
				this.className=this.className.replace("click", "");;
				}
				else {
				this.className+=" click";
				}
			}
		}
	}
}

I've got to be honest, I don't know how it works, I just got it from another website and tweaked the CSS slightly to give the desired result.

 

When I try to implement the CSS that you have given me, both as is and also with the div.class added to each selector, non of the list shows up.

 

Kind Regards

 

Ed

Link to comment
Share on other sites

That's because your css is hiding them, and your js code does not make sense? to me, the only clickable elements will be the <i> elements, so you want to apply class to these? but the css shows a div element has a click class. :crazy:

Edited by dsonesuk
Link to comment
Share on other sites

The only way i could get this to work, is to target <i> elements parent <div class="more"> NOT the element clicked <i>, 'this' as in this.className means target the element that triggered the event, meaning it would get the class 'click' but because its a sibling element, and not a parent and not a div as used in cs it won't do anything.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript">
            clickMenu = function(menu, element, cname) {
                var getEls = document.getElementById(menu).getElementsByTagName(element);

                for (var i = 0; i < getEls.length; i++) {
                    getEls[i].onclick = function() {

                        if ((this.parentNode.className.indexOf(cname)) !== -1)
                        {
                            if ((this.parentNode.className.indexOf('click')) !== -1) {
                                this.parentNode.className = this.parentNode.className.replace("click", "");

                            }
                            else {
                                this.parentNode.className += " click";
                            }
                        }
                    };
                }
            };

            window.onload = function() {
                clickMenu('outer', 'i', 'more');

            };

        </script>
        <style type="text/css">
            /* unclicked style div.more */
            div.more i {
                float:left;
                cursor:pointer;
                color:#085fc9;
                font-size:10pt;
                font-weight:bold;
                text-decoration:none;
                font-style:normal;
            }

            div.more i:hover {
                float:left;
                cursor:pointer;
                color:#085fc9;
                font-size:10pt;
                font-weight:bold;
                text-decoration:underline overline;
                font-style:normal;
            }

            div.more i.hide {
                display:none;
            }

            div.more p {
                display:none;
            }

            div.more ol {
                display:none; /**/
            }

            /* clicked style div.click */
            div.click i.show {
                display:none;
            }

            div.click i.hide {
                display:block;
            }

            div.click p {
                display:block;
            }

            div.click ol {
                display:block;
            }

            /*   div.click ol li {
                   list-style-type:decimal;
               }

               div.click ol ol li {
                   list-style-type:lower-alpha;
                   width:120px
               }

               div.click ol ol ol li {
                   list-style-type:lower-roman;
                   width:120px;
               }*/
            #outer  ol ol {width: 50%; overflow: hidden;}

            #outer  ol ol li {width: 33%; float: left; }
            #outer  ol ol ol li {width: auto; }

            #outer  ol {
                list-style-type: decimal;
            }

            #outer ol ol {
                list-style-type: lower-alpha;
                /* width:120px*/
            }

            #outer ol ol ol {
                list-style-type: lower-roman;
                /*width:120px;*/
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div class="more">

                <i class="show">Click here to reveal the answers</i>
                <i class="hide">Click here to hide the answers</i>.

                <br />
                <p>These are the answers to the quiz.</p>

                <ol>
                    <li>Answer to first question
                        <ol>
                            <li>Sub Item a
                                <ol>
                                    <li>Sub Sub Item i</li>
                                    <li>Sub Sub Item ii</li>
                                    <li>Sub Sub Item iii</li>
                                </ol>

                            </li>
                            <li>Sub Item b
                                <ol>
                                    <li>Sub Sub Item i</li>
                                    <li>Sub Sub Item ii</li>
                                    <li>Sub Sub Item iii</li>
                                </ol>

                            </li>
                            <li>Sub Item c
                                <ol>
                                    <li>Sub Sub Item i</li>
                                    <li>Sub Sub Item ii</li>
                                    <li>Sub Sub Item iii</li>
                                </ol>

                            </li>
                        </ol>


                    </li>
                    <li>Answer to second question</li>
                    <li>Answer to third question</li>
                    <li>Answer to fourth question</li>
                </ol>

            </div> <!-- end of more -->
        </div> <!-- end of outer -->
    </body>
</html>
Link to comment
Share on other sites

Hello Dsonesuk,

 

I have tried with the CSS that you've given me above and it's still not displaying as I expected.

 

I decided to do the hiding of the answers slightly differently and have opted for using the <details> and <summary> tags. I understand these are not currently supported in IE, Edge and FF yet, but I think this is a happy compromise.

 

This is the https://staffordscuba.co.uk/already_a_diver/resources/airconsumption.php page that I am trying to implement the ordered lists on, in both the exercises section and the answers section.

 

This is the CSS which I am using:

/* Format Bullet Lists */

ol {
	list-style:decimal;
}

ol ol {
	list-style:lower-alpha;
	width:50%;*
	overflow:hidden;*
}

ol ol ol {
	list-style:lower-roman;
}

ol ol li {
	width:25%;*
	float: left;*
}

ol ol ol li {
	width:auto;*
}

I've placed an * by the lines which I'm a little unsure as to either what they do or why they are there.

 

As the 2nd level lists have 2, 3 or 4 bullets, I think it may be better to style they differently, with the percentages for each different, e.g. 2 bullets could have a class which divides them 50/50, 3 a class which divides them 33/33/33 and 4 a class which divides them 25/25/25/25. When I remove the width:50% from the ol ol selector, it all seems to display even worse than it is doing now for some reason!

 

I look forward to hearing from you... I never realised it could be so challenging to format some lists! I'm fairly certain that I have the opening and closing <ol> and <li> tags correct now, but by all means check the source for the page if you think there may be an error in it.

 

Kind Regards

 

Edward

Link to comment
Share on other sites

1)Float is used because as already mentioned, if you use display: inline-block the bullets fail to appear.

2) overflow:hidden; even you do not see it on your list, the outer ol parent collapses when the child li elements use float, using overflow:hidden; causes the ol to extend round and envelope the floated li elements again, you can then observe what area of ol is occupying.

3) widths: they are optional to your needs, adjust to you requirements.

 

I did notice the li do overlap on the right, you need to add right margin to correct this, and maybe and padding as well as they do seem to be scrunched up tight together.

 

ALSO different browsers, use different margin, padding and text-indent value, so it might be good idea if you not already done so, to zero these properties and reset to you needs to make them more identical in all browsers.

Edited by dsonesuk
Link to comment
Share on other sites

Hi Dsonesuk,

 

Thank you for your help, I think I have finally got it how I want it. You can see the result here: https://staffordscuba.co.uk/already_a_diver/resources/airconsumption.php

 

This is the CSS for formatting the bullets:

/* Format Bullet Lists */
ol {
	list-style:decimal;
	font-weight:bold;
	margin-top:5px;
	margin-bottom:5px;
}
ol ol {
	list-style:lower-alpha;
	overflow:hidden;
}
ol ol ol {
	list-style:lower-roman;
}

ol ol.two li {
	width:50%;
	float:left;
}
ol ol.three li {
	width:33%;
	float: left;
}
ol ol li {
	width:25%;
	float: left;
}
ol ol ol li {
	clear:left;
}
li span {
	font-weight:normal;
}

Unfortunately to get the bold bullet numbers I had to do a bit of a messy workaround with <span> tags:

<li><span>Air Required Calculations
    <ol>
    <li><span>2550L</span></li>
    <li><span>2328.75L</span></li>
    <li><span>2437.5L</span></li>
    <li><span>2362.5L</span></li>
    </ol>
</span></li>

Once again, thank you for all of your help.

 

Kind Regards

 

Ed

Link to comment
Share on other sites

Good spot Dsonsesuk, I hadn't noticed because when I did that I did find and replace on <li> to <li><span> and </li> to </span></li>.

 

Pleased that it's done now though and more importantly, I can apply the same styling to other pages without much effort now! :)

 

Thanks again for your help Dsonsesuk.

 

Kind Regards

Ed

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
×
×
  • Create New...