Jump to content

holmedwa04

Members
  • Posts

    743
  • Joined

  • Last visited

Previous Fields

  • Languages
    HTML, CSS

Profile Information

  • Location
    England

holmedwa04's Achievements

Invested Member

Invested Member (3/7)

0

Reputation

  1. 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
  2. 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
  3. I'm by no means an expert in any of this, but my personal opinion is that if you are going to use a multi level navigation like Ingolme has already mentioned, then it would seem beneficial to use nested <ul> elements. It would also seem beneficial to me, to use the <nav> tag and so far I don't know of anywhere that explicitly precludes the use of <ul> in it. Perhaps we should stop debating what is or isn't the correct way of using the <nav> tag and suggest some areas where the OP could improve their code? On another note, I think the OP was asking for constructive criticism. There are other ways of telling someone how they can improve something without jumping down their throat. I find people are more inclined to learn and remember information with a nurturing approach.
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. dustcomposer, thanks for the article. It is very interesting and probably does answer some of my questions. Namely, don't try to use the pseudo class selector for drop down menus if you want full compatibility on mobile phones, without the need for a mobile device stylesheet! Before the update on Google Chrome, I believe the dropdown operated when you tapped it once and then if you tapped a second time it would go to the default option. Prior to having 'default' options for each drop down, the hover was just used to display the menu. This would still work on a phone with a single tap if I removed the 'default' links. The 'default' link isn't essential, so they can be removed. But before I give up, it occurred to me that it may be possible to use some kind of conditional statement that if browsing on a mobile device, the 'defaults' aren't links, just dropdowns and if browsing on a desktop, they a 'default' links? I'm sure this kind of thing is possible with little new code. Any advice?
  11. I have been able to test in the following mobile browsers: Android Chrome Firefox Opera The issue is that unless you have a phone with a stylus like the Note3/4 where you can hover on things, the default menu item is selected. So for example, the Diary dropdown links to Diary 2014 by default, unless you select another options. When viewing on a phone, tapping Diary will take you to diary and not lower the menu to select an option. The dropdown seemed to work on an older version of the Chrome app, but no longer works. There is no way I can go back to an older version of chrome on my phone.
  12. Thanks dsonesuk, that worked a treat! I was thinking from the start that it may be something to do with this, but had never had cause to use z-index. The one with 999 and position relative worked Any ideas about mobile browsing and hovering? It worked on mobile Chrome then after an update it stopped!
  13. I did think it may be something similar to this, I tried this code in the main stylesheet, but this didn't seem to do anything: video { z-index: -1;} What is interesting, it that the website works fine in IE but on Chrome it doesn't. I look forward to hearing from you.
  14. I use Hosting24. They are a reasonable price and I haven't ever had any issues with them.
  15. Hello, I am having some issues with the drop-down on this site: www.staffordscuba.co.uk On the front page there is a video, but for any menu that drops down over the video, as soon as the mouse goes onto the video area, the drop down disappears! I am guessing this is going to be some sort of issue with how the video or the menu is set to float with the other objects? Also, on the same topic, hovering over something on a computer is fine, but can be very tricky on a mobile device! Is there a way of fixing this issue on a mobile device without creating a complete mobile phone style-sheet? Any help would be much appreciated. Kind Regards Edward
×
×
  • Create New...