Jump to content

dsonesuk

Members
  • Posts

    11,220
  • Joined

  • Last visited

  • Days Won

    117

Everything posted by dsonesuk

  1. That's not easy, because thats how it works, content flows from left and move down and stacks. You could perhaps expand container outward 50% width/height of fully expanded element. But that could be challenge on its own.
  2. Which safari? Windows?, ignore they stopped supporting safari for windows ages ago.
  3. Which is totally unrelated to the link provided, which explains why you get this error mainly for browserview but also mentions webview. You are introducing a new conversation on a subject that was not mentioned, not referred too, with no reason to mention. The issue was with browserview, the link was how go about fixing that issue.
  4. dsonesuk

    Help With Flexbox

    /*This refers to browser viewport width*/ @media screen and (max-width: 575px) { /*this should refer to a selector of element/s, class/s, id name to apply style display block, as you normally would ie*/ div, .classname, #idname{ display: block; } }
  5. dsonesuk

    Help With Flexbox

    You need to add selector above inner curly brace.
  6. General rule is you never start a id ref with a number.
  7. Webview? It does not mention webview, what are you looking at?
  8. https://stackoverflow.com/questions/45639628/how-to-fix-browserwindow-is-not-a-constructor-error-when-creating-child-window-i
  9. Just add h1 tag that best describes what the page is about, like in the band template they could add the actual band name in a h1 tag. Which breaks done to sub headings 'the band', 'tour dates' and 'contacts'. Use css text-align: justify: either add to class name selector, then add that class name to the element you want to justify.
  10. The styling using style attribute has higher precedence over css in head tag, the head tag css has higher precedence over external link style sheets. So which ever styling is closer to element has precedence over previous, not including those that use !important.
  11. Sounds like overflow: hidden; was not removed. Anything outside a element boundary with overflow: hidden; property does what it suggests, hides it!
  12. Give the element a class name, with same styling, adjust the styling to that class name in media queries depending on device size.
  13. Remove line breaks so its <td>orange</td> Sometimes line breaks that you are using are read as whitespace.
  14. Create a custom.css file. place your css code in there, and place link to that! below w3.css link, is the best option. Anything that exists in w3.ccs will be overridden by the same css in custom.css file, CSS = cascading style sheet. If you two identical selectors .selector { color: red;} .selector { color: blue;} The last one will always take precedence over previous. The same will happen if these were placed separately in css files, the selector in the css file link below previous will take precedence.
  15. .w3-display-container { overflow: hidden; } .w3-display-container img { max-width: 100%; max-height: 100%; height: 100%; width: 100%; object-fit: cover; } But! your img containers are not! fixed width! or height!
  16. The W3c god says your html, css is invalid and not to to his standards, so unless you produce valid coding, he says to cast your code out! until properly validated. For who is to say that, this! is the reason you are troubled by failure. Sayeth W3c the true lord of all things web, please read link https://www.w3.org/standards/webdesign/htmlcss
  17. I suggest using the object-fit Property https://www.w3schools.com/css/css3_object-fit.asp div{width:390px;height:280px; overflow:hidden; /*background-color: #ccc; */} div img {max-width: 100%;max-height:100%; height:100%;width: 100%; object-fit: cover; } https://www.w3schools.com/code/tryit.asp?filename=GKO6RUZSK2W5
  18. I assume you did apply position: fixed; top: 0; width: 100%; To topnav?
  19. I think you talking about preventDefault() https://www.w3schools.com/jsref/event_preventdefault.asp
  20. Perhaps if you remove <div class="container"> from <head>...</head> and place in <body></body> (oohh,🤪 fit young body) where it should be! You! would be on the way to getting it to work </style> <div class="container"> '>' means it must be a DIRECT child from parent <div> <table> .... </table> </div> IS good! sayeth the lord. else the naughty evil one would confuse you suggesting <div> <section> <!--<center> NO one uses center tag anymore except the evil one and Heathans--> <table> .... </table> <!--</center> NO one uses center tag anymore except the evil one and Heathans--> </section> </div> IS good! sayeth the evil one. media queries are positioned below the main default css, they are not surrounded by selector, as there restyling is determined by device size, NOT selector, the selector within it determine the styling to change om chosen device viewport width.
  21. IF these inputs are within a form you can use form .elements collection, then filter them with if condition of type="text". OR Since you already have unique identifier of input element to target as in type="text". document.querySelectorAll("[type='text']"); More specific: document.querySelectorAll(".parent_class [type='text']"); document.querySelectorAll("#parent_id [type='text']"); It really depends how they positioned relative to each other, separately or together under one parent container element.
  22. Remove html elements, h1, nav and contents to inside body tag element then remove the first '/' slash from href to css folder.
  23. Change id to class attribute for html, change '#' to '.' In css. When clicked, hide all with display none, then open and show the one selected. https://www.w3schools.com/code/tryit.asp?filename=GKADQAHJKX8I
  24. You are breaking the rules of having child elements within ul element that are not! li elements. The closest correct option you can have, is <div class="topnav"> <ul> <li><a href="index.html">Home</a><span class="hide"></span></li> <li><a href="About.html">About</a></li> <li><a href="Terms.html">Terms</a></li> <li><a href="Links.html">Links</a></li> <li><a href="Contact.html">Contact</a></li> <li><a class="active" href="Services.html">Classes</a></li> <li> <div class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href= "upton.html">Upton St Leonards</a> <a href="kingsway.html">Kingsway</a> </div> </div> </li> </ul> </div> You will have to remove overflow: hidden from topnav, and reset li .dropdown to li .dropdown { position: relative; display:inline-block; } You require position: relative to keep the position: absolute content at the correct location, also i would apply position: fixed properties to .topnav, Your link tag has a href link to google fonts and also includes a href link to style.css. no one uses <center>...</center> anymore, and you not allowed to invent new closing tags '</p2>' and each p tag must have relative closing tag of </p>
×
×
  • Create New...