Jump to content

holmedwa04

Members
  • Posts

    743
  • Joined

  • Last visited

Posts posted by holmedwa04

  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, 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

  6. 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

  7. 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

  8. 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

  9. 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?

  10. 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.

  11. 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!

  12. Have you tried using z-index to bring the menu to front (up)?

    or place the <video> before the menu list on the html.

     

    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.

  13. 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

  14. That's fantastic, when you say older versions of IE... are we talking 6 and below? EDIT:Just done a quick :google_lt: and found this really cool website: http://caniuse.com/inline-block which I thought was really neat. I know the W3Schools site has info on this too but it doesn't display it in as much detail and thought people might be interested in it? Kind Regards Ed

  15. Hi Dsonesuk Thanks, this seems to work when the page is full size but as soon as it is shrunk down it causes them to go back to left align... also I notice that the top menu now disappears under the image gallery for some reason? Kind Regards Ed

  16. I'm currently working on an image gallery for the website and I can't seem to get the images centered. There is a div called gallery which contains all of the images... it is dynamically changing the number of images it displays in a line which is what I want but... it isn't centering them despite using this in the CSS:

    #gallery {width:auto;margin:auto;}

    This is a link to the gallery:http://www.goathlandrailway.co.uk/gallery/2010/index.php Any help would be much appreciated. Kind Regards Edward

  17. Scratch that last one! It's working now thanks... apart from because it is set to clear on both in appears underneath the left panel with the Twitter and YouTube icons etc.

  18. :facepalm: Sorry, I haven't done this for ages. Ok, I think we're getting somewhere now! :good: The ones with the images on the left seem to be picking up the normal image styling which is to center the image, but the ones on the right aren't?
  19. Sorry silly mistake :facepalm: ... I was using class left for the twittter icon etc. I've fixed this now... but is there any way of making it so that the next div doesn't appear until the end of the previous image?

  20. Hi Dsonesuk Thanks for your quick reply, I presume I can remove the commented CSS now? I've tried the CSS you suggest and it works great for images on the right but not when the image is on the left. The heading for each person should always be on the left above the image or text. I have rectified this in the code now and reuploaded it. Kind Regards Edward

×
×
  • Create New...