holmedwa04 Posted January 26, 2016 Share Posted January 26, 2016 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 More sharing options...
dsonesuk Posted January 26, 2016 Share Posted January 26, 2016 ul li -> first level and all levels following it ul ul li -> second level and all levels following it ul ul ul li -> third level and all levels following it and so on..... left to right? float or display: inline-block 1 Link to comment Share on other sites More sharing options...
holmedwa04 Posted January 26, 2016 Author Share Posted January 26, 2016 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 More sharing options...
dsonesuk Posted January 26, 2016 Share Posted January 26, 2016 (edited) 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 January 26, 2016 by dsonesuk 1 Link to comment Share on other sites More sharing options...
holmedwa04 Posted January 26, 2016 Author Share Posted January 26, 2016 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 More sharing options...
dsonesuk Posted January 26, 2016 Share Posted January 26, 2016 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 More sharing options...
holmedwa04 Posted January 26, 2016 Author Share Posted January 26, 2016 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 More sharing options...
dsonesuk Posted January 26, 2016 Share Posted January 26, 2016 (edited) 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. Edited January 26, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
holmedwa04 Posted January 26, 2016 Author Share Posted January 26, 2016 Dsonesuk, perhaps it's best if you could see the code before I hacked it about and tried to make it work the way I wanted to :Happy: http://www.stunicholls.com/various/more.html Hope this helps to decipher things a little. Kind Regards Ed Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2016 Share Posted January 26, 2016 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 More sharing options...
holmedwa04 Posted January 29, 2016 Author Share Posted January 29, 2016 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 More sharing options...
dsonesuk Posted January 29, 2016 Share Posted January 29, 2016 (edited) 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 January 29, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
holmedwa04 Posted January 30, 2016 Author Share Posted January 30, 2016 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 More sharing options...
dsonesuk Posted January 30, 2016 Share Posted January 30, 2016 Inline span element is not supposed to wrap ol block element <li><span>Air Required Calculations</span> <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> </li> Link to comment Share on other sites More sharing options...
holmedwa04 Posted January 30, 2016 Author Share Posted January 30, 2016 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 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