Jump to content

dsonesuk

Members
 View Profile  See their activity

  • Posts

    11,220

  • Joined

  • Last visited

  • Days Won

    117

 Content Type 

Everything posted by dsonesuk

  1. dsonesuk
    I suppose you have cleared cache or history? Google don't like duplicate content so if has two pages with same content that could be the reason. There used to be add-on which would check every link on the page and give traffic light indication on if they are correct or not.
  2. dsonesuk
    I honestly don't have much dealings with canvas, but for one time to catch a signiture on tablet.
  3. dsonesuk
    You not providing sizes for it to grow to, just dont grow above 300px, so ok! I'll stay at this size then job done! Remove max-height and max-width and try it with width and height at 100%. Also 'figcatpion' that's a new one on me?
  4. dsonesuk
    My experience is that you should never mess with html or body element widths, they rely on each other for scrolling and the body is used for applying fullwidth background image or color, also menu navigation, body content and footer. I find leaving the body as is and creating a inner div so you can adjust the width to your needs and center much better. <body> <div id="wrapper"> </div> </body> Never use br tag for alignment, br tags adust to font size, use container elements with appropriate matching padding and margins. Inline width and height of images (img) is mainly used to match the size of parent container so it does not jump in size from original small image to larger parent container size. CSS max-width: 100%; height: auto; or width: 100%; height: auto; are mainly used for images to total width of parent and adjust height proportionately. Media queries adjust column widths 4 to 1 depending on device width, and can adjust background image sizes too.
  5. dsonesuk
    Then its wrong! must be using braces and styling properties from further on.
  6. dsonesuk
    Can't help! All I got here is missing closing braces for body selector and missing selector with braces and properties? If that's how you currently have it! Then it's no wonder it doesn't work. If you have style elements scattered within the body that is another problem caused by you placing these within the body, when you have been shown to place these in a single <style>...</style> element within the <head>...</head> or stylesheet file that is linked to.
  7. dsonesuk
    I think the validator allows you to copy the link to the results of your validation.
  8. dsonesuk
    NO! style element tags must NEVER EVER! be within DIV element, That is why you have that error. For every opening tag there most be a closing tag, if not! Your browser will try to correct it by adding missing tags, and usually get it wrong! <style> <!--Move this completely outside away from div--> </style> <div class="header"> <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;"> <h2>Train With A Purpose</h2> <p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p> </div> <!--this correct--> <ul><!-- I miss my closing soul mate --> <li><a href="BlogMainPage.html">Home</a></li> <li><a href="blogpage2.html">Page 2</a></li> <li class="dropdown"><!-- I miss soul mate too --> <a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a> <div class="dropdown-content"> <a href="AboutThatStance.html">About That Stance</a> <a href="HandgunPresentation.html">Handgun Presentation</a> <a href="TheProperGrip.html">The Proper Grip</a> </div> <!--this is not finished! you have missing closing </li> and </ul> --> </li><!-- Like this --> </ul> <!-- and this! --> it may be like this also <style> <!--Move this completely outside away from div--> </style> <div class="header"> <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;"> <h2>Train With A Purpose</h2> <p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p> <div class="menu"> <!-- OR this could be <nav class="menu"> --> <ul><!-- I miss my closing soul mate --> <li><a href="BlogMainPage.html">Home</a></li> <li><a href="blogpage2.html">Page 2</a></li> <li class="dropdown"><!-- I miss soul mate too --> <a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a> <div class="dropdown-content"> <a href="AboutThatStance.html">About That Stance</a> <a href="HandgunPresentation.html">Handgun Presentation</a> <a href="TheProperGrip.html">The Proper Grip</a> </div> <!--this is not finished! you have missing closing </li> and </ul> --> </li><!-- Like this --> </ul> <!-- and this! --> </div><!--end menu div OR this could be </nav> --> </div> <!--end header div --> Either way the style element IS NOT within Div and error won't appear, I swear, cross my heart. <style>...</style> in div Baaadd! <style>...</style> outside div Good!
  9. dsonesuk
    Then maybe there is a closing div and you have to find it and move the style tag below it. You could do a count of '<div' compared to '</div>' search, if you have editor able to do that. Then you will know you have correct number of opening/closing div tags. Make sure you remove commented out div tags before though. My editor would highlight any open tag belonging to related closing tag in yellow, so if style tag exist within a div element, i would move it, its content and closing style tag, outside below div closing tag.
  10. dsonesuk
    Opening <style> tag along with styling contained within it and closing </style> tag should be between open <head> and closing tag </head> tags. The title error is stating the title open/close tags does not exist between head tags. Div tag elements also require open/close tag. Yours <div class="header"> shows no div closing tag before style tag and to it, it means the style tag is within the div which is not allowed. <html> <head> <title>my title</title> <style> /* styling content */ </style> </head> <body> <header>...</header> </body> </html>
  11. dsonesuk
    Usually you have to identify if image is landscape or portrait, landscape usually use width: 100%; height: auto;, portrait height: 100%; width: auto;
  12. dsonesuk
    I found Chrome tends to ignore srcset attribute, for the image stored in cache. Which one? i can't remember? Probably the img tag src url used for fallback.
  13. dsonesuk
    You keep adding variables and expecting the code to magically know what it is? it does not work like that! Until you understand that! you are going to end up with continuous errors.
  14. dsonesuk
    SetTimeout(ganeOver,60000); function gameOver(){ clearInterval(gameTimer); ctx.font="80px Arial"; ctx.fillText("Game Over!",100,250); }
  15. dsonesuk
    I don't understand the 'don't reduce to 750px'. The mobile menu only shows to 600px, it does not reduce size? Unless you have added width 750px which won't work properly cuz you are increasing width bigger than viewport area of 600px. If you have added a media querie for max-width to accomadate 750px width it has to be in right order to work, else the 600px media query will overide it.
  16. dsonesuk
    When referring to id reference, it will always refer to a singular element. document.getElementById("balloon"); Never! Multiple. document.getElementsById("balloon");
  17. dsonesuk
    Unless? the problem is that file extensions are set as hidden by default by windows explorer not Notepad. View -> make sure 'file name extensions' is checked.
  18. dsonesuk
    All files should list folders and files IF! available at the location chosen.
  19. dsonesuk
    You should also save as UTF-8.
  20. dsonesuk
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>w3schools foorum qna</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; text-align: center; } * { box-sizing: border-box; } p{ margin: 20px; word-wrap: break-word; } .container { display: flex; flex-wrap: wrap; justify-content: center; } /* Hide the images by default */ .mySlides { display: none; max-width: 300px; max-height: 300px; } .row:after { content: ""; display: table; clear: both; } .row{ display: flex; flex-wrap: wrap; justify-content: center; } /* Six columns side by side */ .column { width: 10%; border: 1px solid black; border-radius: 5px; padding: 2px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); margin: 2px; } .column.active { border-color: #6200ff; border-width: 2px; } .columImg { opacity: 1; width:100%; cursor: pointer; } .active, .columImg:hover { opacity: .8; } </style> </head> <body> <!-- 1st States --> <h3 style="text-align:center">Dell laptop display</h3> <div id="A1" class="container"> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2016/03/27/07/12/apple-1282241_960_720.jpg" style="width:100%"> </div> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2015/01/09/02/45/laptop-593673_960_720.jpg" style="width:100%"> </div> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2016/11/23/14/37/apple-1853259_960_720.jpg" style="width:100%"> </div> <div class="row"> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/03/27/07/12/apple-1282241_960_720.jpg" onclick="currentSlide(this, 1)" alt=""> </div> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/01/09/02/45/laptop-593673_960_720.jpg" onclick="currentSlide(this, 2)" alt=""> </div> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/11/23/14/37/apple-1853259_960_720.jpg" onclick="currentSlide(this, 3)" alt=""> </div> </div> </div> <!-- 2nd States --> <h3 style="text-align:center">MackBook display</h3> <div id="A2" class="container"> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2015/09/05/22/33/office-925806_960_720.jpg" style="width:100%"> </div> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2017/06/23/11/49/laptop-2434393_960_720.jpg" style="width:100%"> </div> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2015/05/15/02/07/computer-767781_960_720.jpg" style="width:100%"> </div> <div class="row"> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/22/33/office-925806_960_720.jpg" onclick="currentSlide(this, 1)" alt=""> </div> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2017/06/23/11/49/laptop-2434393_960_720.jpg" onclick="currentSlide(this, 2)" alt=""> </div> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/05/15/02/07/computer-767781_960_720.jpg" onclick="currentSlide(this, 3)" alt=""> </div> </div> </div> <!-- 3rd States --> <h3>Dell & Mac laptop display</h3> <div id="A3" class="container"> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2016/10/12/13/32/office-1734485_960_720.jpg" style="width:100%"> </div> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2015/09/05/23/54/macbook-926425_960_720.jpg" style="width:100%"> </div> <div class="mySlides"> <img src="https://cdn.pixabay.com/photo/2015/09/05/19/42/macbook-924781_960_720.jpg" style="width:100%"> </div> <div class="row"> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/10/12/13/32/office-1734485_960_720.jpg" onclick="currentSlide(this, 1)" alt=""> </div> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/23/54/macbook-926425_960_720.jpg" onclick="currentSlide(this, 2)" alt=""> </div> <div class="column"> <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/19/42/macbook-924781_960_720.jpg" onclick="currentSlide(this, 3)" alt=""> </div> </div> </div> <script> var slideIndex = 1; var QparentElment = document.querySelectorAll(".container"); // get the first child ".mySlides" and display for (j = 0; j < QparentElment.length; j++) { //console.log(QparentElment[j].querySelector(".mySlides")); QparentElment[j].querySelector(".mySlides").style.display = "block"; QparentElment[j].querySelector(".column").className += " active"; } function currentSlide(elem, n) { // from the the closest parent that image was selected from, send parent identifying pararmeter to slideshows function var parentElment = elem.closest(".container"); showSlides(parentElment, slideIndex = n); } function showSlides(elem, n) { var x; //set all references of mySlides and columnImg as a refferal from parameter recieved as elem as current .container var topSlides = elem.getElementsByClassName("mySlides"); var colImg = elem.getElementsByClassName("columImg"); if (n > topSlides.length) { slideIndex = 1 } // if (n < 1) // {slideIndex = topSlides.length} //console.log(topSlides.length); for (x = 0; x < topSlides.length; x++) { topSlides[x].style.display = "none"; } for (x = 0; x < colImg.length; x++) { colImg[x].className = colImg[x].className.replace(" active", ""); colImg[x].parentElement.className = colImg[x].parentElement.className.replace(" active", ""); } topSlides[slideIndex - 1].style.display = "block"; colImg[slideIndex - 1].className += " active"; colImg[slideIndex - 1].parentElement.className += " active"; } </script> </body> </html>
  21. dsonesuk
    You can use 'continue' keyword within if condition to skip that row value completely removing need to replace. If you plan to replace apply row value to a new variable and manipulate that! Insread. $pick .= "<option value='$row6[0]'>".$row6[0]."</option>"; Should be $pick .= "<option value='"$row6[0]"'>".$row6[0]."</option>";
  22. dsonesuk
    It is looking through all gallaries class names and hides them, then show current selected image. You need it to look at current gallery image selected, transverse to parent container of that specfic gallery, transverse to main image and change that only!
  23. dsonesuk
    ???? what like #menu, #theme-toggler { font-size: 2rem; background: var(--main-color); color: rgb(255, 255, 255); border-radius: 5rem; height: 5rem; width: 5rem; text-align: center; line-height: 5rem; position: fixed; right: 2rem; z-index: 1000; cursor: pointer; top: 2rem; } #theme-toggler { top: calc(5rem + 2rem * 2); }
  24. dsonesuk
    Each paragraph tag must have an equal closing tag in the same cell, you have paragraph crossing two cells. Your browser probably tries to correct this by adding opening/closing tags which results in a empty paragraph. So vertical-align: might be working, but! Its aligning a paragraph with text and without, so it looks as though its not. Inline styles use style attribute style="vertical-align: middle;". For vertical-align to work, the paragraph margin/padding top and bottom have to be equal and inline-height may need adjusting. Try adding background-color to paragraph to observe this.
  25. dsonesuk
    You'll find usually a input like checkbox is used, the checkbox is made to be the same size of the area that will be clicked then made invisible using opacity. This method is also used for mobile menus. I should check mobile menu with dropdown tutorial as idea on how this works.
×
×
  • Create New...