Jump to content

Search the Community

Showing results for tags 'HTML'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 736 results

  1. Maxi_Mega

    Sticky headers

    Hello everyone, I was searching for a technique to make an element on my html page staying at the same place even if we scroll the page. I found 2 methods : This one and this one. What is the difference between these two techniques ? (apart from how it's coded) Also, I have a problem with these methods : when we scroll down, it stay at the same place - that's nice - but the rest of the page goes in front of my sticky element and not behind, like it does on the two methods I mentioned before. Have anyone an answer to my to questions ? Thank you in advance, Maxi_Mega PS: Sorry for my english, I'm french :s
  2. Well, I'm trying to make it so that the slide ends on the last page and shows a sign that whoever's reading has reached the end, but I'm not too experient on JavaScript, could you guys help me on that? Here's the code: <html> <title>Terra Formars</title> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link> <style> .mySlides {display:none} </style> <body> <div class="w3-container"> <h2> Leitor BETA</h2> <p>Capítulo 202 de Terra Formars.</p> </div> <div class="w3-center"> <div class="w3-section"> <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button> </div> </div> <div class="w3-content"> <img class="mySlides" src="https://i.ibb.co/fqQw2mX/00.png" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/CQ9VjsF/01.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/FVfsh9c/02.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/sq7czrk/03.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/By7k2J4/04.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/NnYp2xH/05.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/cXkgpK0/06.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/CW8fr43/07.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/LJ25GnH/08.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/Khbg5h9/09.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/wRrdp5T/10.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/TTnfdvv/11.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/72rLfpX/12.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/x8zR2yp/13.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/zXv7HJg/14.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/4tkwzt8/15.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/hHW04cS/16.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/dGx73nH/17.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/rx8G6Yr/18.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/4W1v7WS/19.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/qMYLTJz/20.jpg" style="width: 100%;" /> <img class="mySlides" src="https://i.ibb.co/3yG8h2N/22.jpg" style="width: 100%;" /> </div> <div class="w3-center"> <div class="w3-section"> <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-red", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-"; } </script> </body> </html>
  3. I have referenced the W3 slideshow tutorial here and added two slideshows to my web page using Dreamweaver. I understand that the Javascript needs to be edited to accommodate 2 slideshows (divs vs. classes i think?), and I have tried to follow the instructions given here in order to edit it. Both of my slideshows seem to work independently now, but i can't figure out how to edit the Javascript to make the dots work right. The hover color works (red), but on the second slideshow, the dots do not turn red as the slideshow is advanced. I know very little about Javascript and I have gone through the Javascript tutorial, but I haven't landed on a solution. I've also searched the forums for an answer, but haven't found one that works for my specific situation. If anyone could point me toward a solution to have two slideshows on the page that both work pretty much like the one on the W3 tutorial page (with dots and arrows), I'd greatly appreciate your help — ANY guidance about how to fix the code is greatly appreciated. ~bex Here is my code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #f44336; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div id="wrapper"> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 0)">&#10094;</a> <a class="next" onclick="plusDivs(1, 0)">&#10095;</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 1)">&#10094;</a> <a class="next" onclick="plusDivs(1, 1)">&#10095;</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <script> var slideIndex = 1; var z = document.getElementsByClassName("slideshow"); for (i = 0; i < z.length; i++) { //set custom data attribute to first current image index z[i].setAttribute("data-currentslide", 1); showDivs(z[i].getAttribute("data-currentslide"), i); } function plusDivs(n, j) { //get custom data attribute value of current image index to slideshow class index j slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]); showDivs(slideIndex += n, j); } function currentDiv(n,j) { showSlides(slideIndex += n, j); } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length; } //set custom data attribute to current image index z.setAttribute("data-currentslide", slideIndex); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </div> </body> </html>
  4. Hay can someone offer some input(it's definitely not mobile friendly what I wrote) in regards to JavaScript and the html form document, I can't recalls the relationship while testing the JavaScript logic, any inputs welcome. Definitely recommend looking at it via desktop mode if on tablet or phone. 🤗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body> <!--FORM_REGISTER--> <div class="one"> <form action=" " method="post" onsubmit = "return register_details();" /> <!--C--> Country<br><input type="text"id="country"/></br> <!--A--> Age<br><input type="age"id="DOB"/></br> <!--S--> Status<br><input type="text"id="status"/></br> </form> </div> <div class="two"> <form action="submission.html" method="register_details(id)" onsubmit = "return register_details();" /> <!--U-->UserName<br><input type="text" value="" id="UsernName"/></br> <!--P-->Password<br><input type="password"value="" id="Password"/></br> <!--E--> Email<br><input type="Email" value="" id="Email"/></br> Male<br><input type="radio" value="" id="male" /></br> Female<br><input type="radio" value="female" id="female" /></br> Submit<br><input type="submit" value="register" id ="submit "/></br> </form> </div> <style type="text/css"> .one { background-color:#444444; color:white; margin:350px; padding:12px; text-align:left; position:fixed; } .two { background-color:#444444; color:white; margin:350px; padding:12px; text-align:center; position:fixed; left:10px; top:240px; width:1157px; height:1000px; background:#444444; } //body { overflow:hidden; } </style> <!-----------------------------------------------> <script type="text/javascript"> function register_details(id) { // bool checked = false; var username = document.getElementById (id,value,"username").value; var password = document.getElementById (id,"password").value; var email = document.getElementById (id,"email").value; var male = document.getElementById (id,"male").value; var female = document.getElementById (id,"female").value; <!------------------------------------------------------> var submit = document.getElementById (id,"register").value; if ((value === "") || (password === "") || (email === "")) { alert("please correct information"); }if ((male[0].checked === false ) && ( female[1].checked === false )){ console.log("please fix gender"); } else if (ErrorText= "") { alert("please correct information"); }else{ submit(register_details(id)) } } </script> <!------------------------------------------------> </body> </body> </html>
  5. cybermario

    w3.css slideshow

    hi there... i use the dot slideshow indicator with the carousel code for automatic advance images, but can´t make points changes togheter with the image changes with the code... any ideas? sorry about my english.... here is the code... thanks in advance. <header class="w3-display-container w3-center" id="home" style="padding-top: 150px"> <div class="w3-content w3-display-container" style="max-width:800px"> <img class="mySlides" src="img-1.jpg" style="width:100%"> <img class="mySlides" src="img-2.jpg" style="width:100%"> <img class="mySlides" src="img-3.jpg" style="width:100%"> <img class="mySlides" src="img-4.jpg" style="width:100%"> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span> </div> </div> </header> <script> //slideshow carousel var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 9000); } //new code var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var n = document.getElementsByClassName("myIndex");//quitar var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } </script>
  6. Sigmahokies

    get data (checkbox) from iframe

    Hi everyone, is it possible to collect data such as checkbox and radio inside iframe when push button outside of iframe? or require to method of post inside iframe?
  7. I was following the filtered photo gallery tutorial below: https://www.w3schools.com/howto/howto_js_portfolio_filter.asp I have an issue with the photos bunching up on the right side & not shifting to a new column. This is the HTML in the link below: https://www.w3schools.com/code/tryit.asp?filename=FWU52Y6W22GU What can I add to make sure the formatting is right?
  8. hdaumier19

    Problem with Photo Image Layout

    I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help. HTML <!doctype html> <html> <head> <title>Amy Perrales | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- !PAGE CONTENT! --> <div class="photography" style="max-width:1500px"> <!-- Header --> <header class="panel" style="padding:128px; 16px;"> <h1 class="ap-xlarge">PHOTOGRAPHER</h1> <h1>Amy Perrales</h1> </head> <body> <div> <id class="introduction"> <a href="Home" style="text-decoration: none;">Home</a> <a href="Portfolio" style="text-decoration: none;">Portfolio</a> <a href="About Amy" style="text-decoration: none;">About Amy</a> <a href="Contact" style="text-decoration: none;">Contact</a> </div> </header> <!-- Photo Grid --> <div class="half-width"> <img src="img/amusement_park.jpg" alt="amusement park" style="width: 599px; height: 424px;"> <img src="img/dock-1365387_640.jpg" alt="dock" style="width:550px; height:633px;"> <img src="img/kaboompics_Black baby chicks.jpg" alt="baby chicks" style="width: 342px; height:513px;"> <img src="img/sunset-114557_640.jpg" alt="sunset" style="width: 275px; height: 550px;"> <img src="img/wedding_couple.jpg" alt="wedding couple" style="width:550px; height:412px;"> </div> <div class="full-width"> <img src="img/ballet-437990_640.jpg" alt="ballet dancer" style="width:424px; height="640px;"> <img src="img/baseball.jpg" alt="baseball player" style="width:424px; height="640px;"> <img src="img/dancer-2471026_640.jpg" alt="dancer" style="width:424px; height="640px;"> <img src="img/pool.jpg" alt="children and pool" style="width:424px; height="640px;"> </div> <!-- Footer --> <footer> <i class="fa fa-facebook-square" style="font-size:36px;"></i> <i class="fa fa-twitter-square" style="font-size:36px;"></i> <i class="fa fa-instagram" style="font-size:36px;"></i> <i class="fa fa-pinterest" style="font-size:36px;"></i> <i class="fa fa-linkedin" style="font-size:36px;"></i> </footer> </style> </body> </html> CSS /* ========================================================================== Base Styles ========================================================================== */ body,h1 { font-family: 'Slabo 45px', serif; text-align: center; letter-spacing: 6px; color: #9aa6b1; } a { color: #a9b3bc; border: 3px solid #fba69d; padding: 8px; margin-left: 3px; margin-right: 5px; } img { margin-bottom: 128px; width: 100%; height: auto; }
  9. Sigmahokies

    checkbox and paginate page

    Hi everyone, I'm trying to create the look like "paginate data page", but it is not. I set up the file to insert in website by iframe, but I need to find a way to make clicked data like click the checkbox, then click on next, go to next file in iframe, then come back, stay checked in checkbox. Do you understand what I mean? I'm not fluent in English, my prime is American Sign Language.
  10. Truman

    Mozzila Firefox Inspector

    When I add element in "Search HTML" box that I want to find on page and it gives me several results. how can I see those that come after the first one? I don't see arrow or anything like that. For ex. when I add "id" for some page it gives me 9 results but I see highlighted only the first one. How to scroll to others?
  11. AJ2021

    Nav bar spruce up

    Hi, I'm new to web design and need help w/ my nav bar. I need help spacing my page links on the nav bar as well as spacing my nav bar within the page. I have my nav bar spaced right now but I don"t know if it will work well w/my page and the page links aren't spaced correctly and I'm not sure how to space them. I also got my page links to be white but the rest of the words in the nav bar are still black & I want it white as well. Any help would be greatly appreciated. HTML: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jackson Lawton_homePage</title> <link href="_CSS/main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header> <h1>Jackson Lawton and Family</h1> <nav> <ul> <li><a href="index.html">Home</a> </li> <li><a href="contact.html">Contact</a> </li> <li><a href="media.html">Media</a> </li> <li><a href="gallery.html">Gallery</a> </li> <li><a href="resume.html">Resume</a> </li> </ul> </nav> </header> <section> <h1 id="pagename">Home</h1> <h2>Welcome to the Lawtons</h2> </section> </div><!-- end of wrapper --> </body> </html> CSS: @charset "utf-8"; /* CSS Document */ #wrapper { width: 1920px; min-height: 1080px; position: relative; margin: 0 auto; background-color: #5DD7FE } header { width: 1778px; min-height: 62px; background-color: #808080; position: absolute; top: 48px; left: 142px; } header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px; } header nav ul li { list-style-type: none; display: inline-block; } header nav ul li a { text-decoration: none; color: #ffffff; font-size: 18px; } header nav ul li a:hover { color: red; } header nav { position: absolute; top: 6px; left: 500px; } /* Style inputs with type="text", select elements and textareas */ input[type=text], select, textarea { width: 100%; /* Full width */ padding: 12px; /* Some padding */ border: 1px solid #ccc; /* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */ resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ } /* Style the submit button with a specific background color etc */ input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* When moving the mouse over the submit button, add a darker green color */ input[type=submit]:hover { background-color: #45a049; } /* Add a background color and some padding around the form */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } Also line 24 which is position:absolute under header h1 in Dreamweaver is coming up as a problem and I can't seem to find out why. header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px;
  12. I would like to call the jquery text() method with a string argument that includes the HTML character entity for the copyright symbol (&copy;). I've tried numerous variations of the following theme: $('#copyright').text('&copy; ' + date.getFullYear() + ' John Doe'); So far, nothing I've tried has produced the desired result. Specifically, the HTML "& copy;" entity is not getting translated into the copyright symbol. Is it possible to pass an HTML character entity in this way?
  13. PLight

    Creating Dynamic Checkbox Names

    I have a need for creating checkbox names that go through a loop and are named by concatenating the name of the field with a number that is the loop index. <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="0" /> <%else%> <input type="checkbox" name="ynDiscussed" & CStr(i) value="1" checked /> <%end if%></td> I've done this before with text boxes and there are no problems but somehow with a checkbox it will not work. I've even tried using an array (ynDiscussed[]) along with... <%if pDiscussed(i) <> "True" then%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="0" /> <%else%> <input type="checkbox" name="ynDiscussed(" & CStr(i) & ")" value="1" checked /> <%end if%></td> but it doesn't like that either. I can't even substitute in a number instead of the CStr(i) and have it pick it up - my code reading: <input type="checkbox" name="ynDiscussed" & "1" value="0" /> Is this simply impossible or what am I missing? Any help is very much appreciated. Cheers!
  14. I am using a drop-down menu with a search option that excludes short-code search (based on my last post: How to ignore shortcode on html text search). Basically, it needs to look like this Country selection page: Now I have this very long drop-down menu that I would like to manage in a controlled window and I thought that using the select size function will work for me. Unfortunately, it didn't... Please see the following attached screenshots & codes that describe the problem. 1. This is the one that is working well but with a very long list (without the select size function): Working code but long list And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a> <a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a> <a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a> <a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a> <a href="/professional-network/asia/India">[flag=in] <span>India</span></a> <a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a> <a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a> <a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a> <a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a> <a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a> <a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a> <a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a> <a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a> <a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a> <a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a> <a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a> <a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a> <a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a> <a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a> <a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a> <a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a> <a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a> <a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a> <a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a> <a href="/professional-network/asia/China">[flag=cn] <span>China</span></a> <a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a> <a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a> <a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a> <a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a> <a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a> <a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a> <a href="/professional-network/asia/China">[flag=sg] <span>China</span></a> <a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a> <a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a> <a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a> <a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a> <a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a> <a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a> <a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a> <a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a> <a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a> <a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a> <a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> This is the one that is using the select size function but with bugs and not working (broke the search, the flags, the design and not opening properly on the website): The code problem And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <select size="20"> <option><a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <option><a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <option><a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <option><a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <option><a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <option><a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <option><a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <option><a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a></option> <option><a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a></option> <option><a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a></option> <option><a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a></option> <option><a href="/professional-network/asia/India">[flag=in] <span>India</span></a></option> <option><a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a></option> <option><a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a></option> <option><a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a></option> <option><a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a></option> <option><a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a></option> <option><a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a></option> <option><a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a></option> <option><a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a></option> <option><a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a></option> <option><a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a></option> <option><a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a></option> <option><a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a></option> <option><a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a></option> <option><a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a></option> <option><a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a></option> <option><a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a></option> <option><a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a></option> <option><a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a></option> <option><a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a></option> <option><a href="/professional-network/asia/China">[flag=cn] <span>China</span></a></option> <option><option><a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a></option> <option><a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a></option> <option><a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a></option> <option><a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a></option> <option><a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a></option> <option><a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a></option> <option><a href="/professional-network/asia/China">[flag=sg] <span>China</span></a></option> <option><a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a></option> <option><a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a></option> <option><a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a></option> <option><a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a></option> <option><a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a></option> <option><a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a></option> <option><a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a></option> <option><a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a></option> <option><a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a></option> <option><a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a></option> <option><a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> Obviously, I have done something wrong so if you can help me fix it I will appreciate this a lot!
  15. First of all, I'm no way near any skilled "programmer" or website builder, I mostly just copy things and modify the styles and stuff! So this is probably a nooby question, you have been warned. I've this website I'm building for a school project and I've a few problems left and I've given up trying to fix them, I need to start working on other stuff. First of all so am I trying to get this slider between the three pictures and the navigation bar in the supposedly start page, but the animation disappear when you put it in and I don't think the autoplays work either. This is the main thing I'm trying to do. Secondly, When you go on mobile view and press the dropdown menu it doesn't seem to find the script, which i don't understand why. In the header I have <script src="/online-store-header/js/flertdown.js"></script> and the body I've the code <a href="javascript:void(0);" style="font-size:25px;position: absolute; top: 65px; right: 0; border: 0;" class="icon" onclick="specificName()">☰</a> The console returns this error: Uncaught TypeError: Cannot read property 'className' of null at specificName (flertdown.js:3) at HTMLAnchorElement.onclick (final.html:195) Dropdown js code Any help would be really appreciated, i really need to be done this site soon :)) And I'm really sorry if the index file is totally chaos, elements seems to have a life of their own and come back and reproduce to multiple of the same element after I've deleted them, I've lost control of what i've created (or copied)
  16. So I've searched the web and tried for hours now and I'm just giving up. I've this header, and I want it so when you're on mobile it looks like something like this. So when you're on desktop the full menu is in the header and if your're on mobile you get a dropdown menu. Can someone tell me how I do this? Thank you
  17. Eric_B

    Calling javascript in html

    I'm trying to create a script that contains an if/else statement that uses an outside input to change the color of a box in the html file. Currently I am not seeing any changes, so right now I'm checking if the script is even being noticed and ran. I'll admit that I'm not very good at this, so I apologize if these are really simple problems to fix or that they've been fixed before and I missed it when searching for other posts. If it's the latter, could you send me a link. Placement: Currently the script is inside the a style tag, and both are outside the body. Should I not have it in the style tag? Should I keep it outside of the body? If the issue is placement, where should I place it. Currently the if/else statement is not in a function. Does it need to be in a function? If so, how should I set it up so the function gets called every time, but does nothing until the if condition is met? if I don't need it to be a function to run this, how else can I set it up so it will run? Here's the part of the code that I'm working on, Ignore the contents as all I'm looking for is how to get the script to be noticed and ran. <script= text/javascript> var StopTimePivatic = [[175]]; if (StopTimePivatic != 0){ #b[[141]]{ style.background-color= silver; } } else{ #b80, #b81, #b82, #b83, #b84, #b85, #b86, #b87, #b88, #b89, #b90 { style.background-color = Yellow; style.color = black; } #b0, #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10, #b11, #b12, #b13, #b14, #b15, #b16, #b17, #b18, #b19, #b20, #b21, #b22, #b23, #b24, #b25, #b26, #b27, #b28, #b29, #b30, #b31, #b32, #b33, #b34, #b35, #b36, #b37, #b38, #b39, #b40, #b41, #b42, #b43, #b44, #b45, #b46, #b47, #b48, #b49, #b50, #b51, #b52, #b53, #b54, #b55, #b56, #b57, #b58, #b59, #b60, #b61, #b62, #b63, #b64, #b65, #b66, #b67, #b68, #b69, #b70, #b71, #b72, #b73, #b74, #b75, #b76, #b77, #b78, #b79 { style.background-color = red; } } </script> </style> <body onload="bundle()"> As I said previously, If as similar problem to this has been solved, please let me know where i can find it.
  18. s_avinash_s

    submit with xhttp

    Hi Am trying to submit the data to server, nothing is received on server. I mean "dismissed students" and "failed students " am filling and sending but not receiving on server side. How to get the data on server side. <div id="Examination" class="tabcontent"> <html> <body> <p id="exam"></p> dismissed students: <input type="text" name="index1" size="10"> <br><br> failed students: <input type="text" name="index2" size="10"> <button type="button" onclick="entry()">submit</button> <script> function entry() { var formData = new FormData(); var valid = new XMLHttpRequest(); valid.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("exam").innerHTML = this.responseText; } }; valid.open("POST", "exam.txt", true); xhttp.send(formData); } </script> I just added "formData" and i get just some junk characters not original data.How to fill the data in "formData" How to get the data, anything else is required to make it work. Thanks Avinash
  19. ALERT: This question can be answered by both new and old users who do not like pop-ups, because it is an iPhone -- an environment in which the now infamous/famous Grammar Captive splash panel is forever suppressed. BACKGROUND: After many excruciating hours the responsive design of Grammar Captive is nearly complete. One of the several known outstanding problems that remains occurs when one uses Grammar Captive's custom search engines with an iPhone. In order to enter one's search word or phrase the iPhone keyboard appears. It works like a bad wine that starts with an attractive bouquet and flavor, but ends with a strong, even foul, after taste. An alternative analogy is a misbehaved (innocent or malevolent) child that leaves his parents or older siblings to clean up after his after he has played. In effect, the keyboard takes up the entire width of the viewport, but does not return the webpage that hosts the form input control that evokes it. Although I was able to find a possible solution on StackOverflow it has proven difficult to implement. PROPOSED SOLUTION: Add an id attribute to the page's meta tag that hosts the viewport control and reference that tag when the search is submitted. Before Search: <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"> After Search: $('#viewport').attr('content', 'width=device-width, initial-scale=0.5'); I believe the reason that this works for others, but not for me is that Javascript cannot find #viewport. This is because of the sequencing of the Javascript that produces the dynamically loaded center panel. In brief, overview.js is loaded with overview.html (the Grammar Captive mainpage) search_letter.js is loaded by overview.js after the search panel has loaded, but before a search is made. If the After Search modification is to be implement, then it must be implemented after the search has been completed. QUESTION ONE: Am I likely correct in my assessment? QUESTION TWO: If so, how might I resolve the problem? Roddy
  20. Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css .bgimg-1{ min-height: 100%; background-image: url(/w3images/parallax1.jpg); } (from the style brackets after the head tag ) I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html image tag, so I removed the "background-image" from the above css code and added an <img src="/w3images/parallax1.jpg"> tag under the div where the class name was bgimg-1: <!-- First Parallax Image with Logo Text --> <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <img src="/w3images/parallax1.jpg"> <div class="w3-display-middle" style="white-space:nowrap;"> <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span> </div> </div> However, the image now has an empty white space from it's right side and I can't make it full. Does anybody know how to fix that?
  21. BACKGROUND: Recently I had occasion to make a search on my own website using the Newsletter search engine. What I discovered was the most bizarre of behaviors. I could perform one search in Japanese and then no more. In other languages such as French, German, and English I could perform as many searches as I liked -- even repeating the same words more than once -- and I always I was able to produce the expected result. Mind you, this bizarre one-find-stop--all-further-finds behavior in the Japanese language was not the case when I first installed my search engines. Now, I have checked my PHP error.log file and found nothing related to this problem. I have also checked that the parameter value of the AJAX call is being properly passed; here too there is no unusual behavior. This bizarre behavior was not always the case. It appears to have begun taking place all of its own. Any ideas? Roddy
  22. BACKGROUND: I am baffled by the failure of this code to display "Return User" when the browser page is refreshed or the browser page is closed and then reopened. The vslue of the console.log(localStorage) displays: Storage { return_user: "true", length: 1 } CODE: const output = document.querySelector('.output'); if (typeof localStorage !== "undefined") { var localStorage = window.localStorage; if(localStorage.getItem("return_user")) { output.innerHTML = "Return User"; } else { output.innerHTML = "New User"; localStorage.setItem("return_user", true); console.log(localStorage); } } else { output.innerHTML = "Sorry, local storage is not supported."; } QUESTION: Any ideas? Roddy
  23. Hello & Thanks , Seems to me that I once saw a chart of Html elements showing the allowable properties and values and inheritances of each element . Anyone know where this is located ? Ugh ! I forgot to bookmark it . Thanks
  24. Sigmahokies

    Frame changing by link

    Hi everyone, inside PhpStorm, seem tag of frame has been strike, it might mean it is not support. I want to create like paginate data, but I just want to have page inside frame on page, so I can leave video on left, then other column can be change page by link. Anyone can help? Thanks, Gary
  25. Hello & Thanks , I am having trouble giving a <div> a background color : <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> I am using this example: https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 I am using inline style= , when I get proper results , then I will transpose code into css styles . <!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <style> body { font-family: Verdana, sans-serif; font-size: 0.8em; } header, nav, section, article, footer, div.city { border: 1px solid grey; margin: 5px; padding: 8px; } nav ul { margin: 0; padding: 0; } nav ul li { display: inline; margin: 5px; } </style> </head> <body> <header> <h1>HTML5 Skeleton</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <article> <h2>Famous Cities</h2> <div class="London" style="background-color: #00FF00;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="Paris" style="background-color: #FF0000;"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="Tokyo" style="background-color: #0000FF;"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </article> <footer> <p>&copy; 2014 W3Schools. All rights reserved.</p> </footer> </body> </html> And here is my example code: <!DOCTYPE html> <html> <head> <title>DIVs Template WIP</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DivsOnlyTemplate</title> <!-- file:///C:/vmars.us/DivsOnly-STARTover.html https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/ https://htmlformatter.com/ https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 --> <style type="text/css"> </style> </head> <body style="background-color: #FFFFFF;"> <br> <div class="Table" style="border-style: solid; text-align: center; border-color: #5A697D; border-width: 16px;"> <!-- ============NewRow============== --> <p></p> <div class="Row" style="border-style: solid solid solid solid; border-width: 4px; border-color: #000000;"> <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p style="border-style: solid; border-color: #0000FF; background-color: D3DDEB"> Row 1 Column 1 <br><img src="Empty.png" alt="Empty.png"></p> </div> <!-- <div class="Cell" --> <div class="Cell" style="width:70%; border-style: solid; border-color: #00FF00; background-color: 000000; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p> Row 1 Column 2 <br><img src="Empty.png" alt="Empty.png"> </p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> </div> <!-- <div class="Table"> --> </body> </html> Please what am I doing wrong ? Thanks
×