Jump to content

Search the Community

Showing results for tags 'Css'.



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

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 716 results

  1. W3 page on Color Standards X11 shows a 1-99 breakdown that I am familiar with over at Xxxxx (name redacted as advertising not welcomed). Namely, every Primary color can be applied using a fixed "primary" Hexadecimal stepping system. That system counts up using "primary" increments. Those increments diversify without color names. https://www.w3schools.com/colors/colors_x11.asp The W3 Schools page uses primary increments, but only for grey-scale. Here are the primary units for all colors. 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF X11 leans on photographic deployment of oil and tempera color names resulting in an expected tangle, excepting grey-scale. Given that every device has its own physical palette, and hence none see the same color called Bisque #ffe4c4, it would be rational to reset Bisque to a nearest Primary neighbor, and apply 99 primary increments from there. ... EEDDBB FFEECC 11FFDD ... This methodology provides SAFE Primary Colors for developers and frameworks; that is, SAFE COLORS for HTML5. SAFE applies to HTML as simply more rational. Compare 18-21 WEB SAFE colors in CSS 2.0. Using RGB, CMY, RYB color wheels, and thousands of proprietary (mostly patent) color wheels available today, what is wrong with a psychiatric, chemical, endocrine, artistic, and general scientific principal shared by all humans: namely, Primary Association? The very interesting thing about primary color associations, is that toward darkest and lightest increments, the primary increments tend to pure white and pure black, an exacting conformance with human vision. To accommodate that vision, oil and tempera artists have a full palette of color names awaiting digital presentation. Factually, more color names than we need. PRIMARY COLOR NAMES are an established and appropriate way forward. We can do it like certain other rational parties and each independently setup our own COLOR.CSS, using whatever color names we choose. Or we can proceed with primary conversion of Bisque 1-99 with nominal Bisque somewhere between 1 and 99. Not a great intellectual challenge, though time consuming (multiply by 145 today and 755 tomorrow). CMS frameworks have primary 'templates'. Operating systems, likewise. I cannot find an online public demonstration of the primary principals suited to HTML5+ technology, as discussed in this thread. A color tutorial on primary colors and 99 increments for each established color name would be an interesting read. And help in understanding of color implementation. How many potential color names? Count the primary units above: (99 x 15) x 3 = 4,445 (my stats are very rusty). Nominal primaries are much more do-able: 15 x 15 = 225 color names for today's 1-F framework. 145 falls short by 80 color names. We can distributes primary increments to color names accordingly, with thousands of primary slots available. Primary color association leaves potentially millions of unique no-name colors to code. This thread begins with a simplistic way of observing complex and dynamic color theory. Color needs a simple framework. W3 Schools has a simple tutorial on Primary Digital Color?
  2. I'm new to w3schools and forum, forgive me if this belongs in the General section. I've been attempting to learn responsive web design from bottom to top from a book I loaned from the library. The examples are always incomplete and the code never seems to be consistent from one example to the next. Thought I'd take a look at your templates and see about learning from top on down. While experimenting with the parallax template I notice the section headings are not centered on my iPad (granted it's one of the old iPads). Attached is a screen shot of how your template looks on my iPad. Is there a fix for this? Any reply appreciated. Love the templates w3schools provide and look forward to figuring it all out. Dave
  3. Dear potential helpers, I try to darken the foreground of my website using a background-color. I created a div which wraps all my other HTML stuff, applied position: relative; to it and a very great z-Index of 999. All my other elements have a z-index of 100 or lower. Why isn't my div not shown in front of the other stuff? In case the background-color of my div foreground is only shown behind all the other elements inside it. Here is my HTML: <html> <body> <div id="foreground"> <!-- All my other HTML stuff having relative positioning and z-index 100 or less --> </div> </body> </html> Here is my CSS: #foreground { position: relative; z-index: 999; display: block; background-color: red; } Maybe u guys have any idea what the matter with this one. Thank you!
  4. Hello, I've been adapting the code from the Slideshow how-to (https://www.w3schools.com/howto/howto_js_slideshow.asp) for my site. However, I would like for the previous arrow to be hidden in the first image and for the next arrow to be hidden in the last image. In other words, no looping. This is for the manual slideshow. I'm not a coding expert, I adapt already existing code, so I'm not sure where to begin. Thank you! The JavaScript from the how-to page is: var slideIndex = 1;showSlides(slideIndex);function plusSlides(n) { showSlides(slideIndex += n);}function currentSlide(n) { showSlides(slideIndex = n);}function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";}
  5. Small Group Projects

    I think it would be great to have small group projects .We could build login system; with air tight state of the art security, photo gallary's, audio gallery's. I think it would be a great tool for learning web development . Just a thought.
  6. Woocommerce took out the option for enabling a lightbox feature for your image gallery earlier this year. They have in their documentation to add code if you want to enable the gallery features but don’t actually say where. https://woocommerce.wordpress.com/2017/02/28/adding-support-for-woocommerce-2-7s-new-gallery-feature-to-your-theme/ This is a significant frontend change that can be broken down in to three separate new features; Image zoom / magnification Lightbox Slider To enable each of these features in your theme you must declare support using add_theme_support() like so; 1 2 3 4 5 6 7 add_action( 'after_setup_theme', 'yourtheme_setup' ); function yourtheme_setup() { add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-slider' ); } This allows you the flexibility to pick and choose exactly which features you want to include/exclude in your theme or at your store. I am not a developer, I don’t have a developer (and shame on WC for not making this an option that end users can opt for or not without having to add code!) I need to know where to put this code. I am using a child theme called mystile1. I have files called “Theme Functions (function.php)” and one called “custom.css” that’s says it is specifically for adding code to modify my child theme styles. I don’t know which file I should put the above coding in and where. Nowhere does each of these files have a line called “after_setup_theme” So would I be safe in just adding the code as follows in one of those files (which one?) replacing “yourtheme” with the name of my theme: add_action( 'after_setup_theme', 'mystile1_setup' ); function mystile1_setup() { add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-slider' ); } Or any other suggestions are greatly appreciated. Thank you.
  7. Hello I need to remove a certain part on my page. Here is the link of the page. http://communityofsol.gr/?page_id=139 You see a brown canvas. In the canvas it says "Παροχές υπηρεσιών σε απόρους" , Below it, it says Home / Παροχές υπηρεσιών σε απόρους. I need to remove everything after Home ( what you see in bold). PLEASE assist me because I have a deadline and I need to do it! Thank you in advance!
  8. Page Gradient Text

    BACKGROUND: I like gradients because they are both colorfully attractive and easy on the eyes. They are also suggestive of binary thought and all that lies between the two polar extremes of 1 and 0. For these reasons I often employ gradients as the background colors of my <div> elements. Background gradients suffer from an important weakness, however: monochromic text is easy to read at one end of the gradient, but difficult to read at the other. QUESTION: Does anyone know of a way to cause text to change color as it is displayed across the width and height of the element that contains it? Roddy
  9. Why do not the applications work on the tablet? Hi. I'm starting to create mobile apps with Cordova, for Android. I have small tests done with the help of peers of this community. But the problem is that I try to run them on the tablet and the interface only sees a small sample of of the content. It does the job, but it goes much slower than on the mobile. I imagine the key will be in css. My question is, if I should add some plugin, configure css in some particular way, or some other file I must do something What do I need to work on tablets and phones? Maybe I do not explain very well or I do not give concrete data, but I can not think of it, I leave a sample of the code in case it is worth something. Regards, and thank you very much. Sorry for the spelling but I have to use the translator. * { box-sizing: border-box; } .main { margin: 10px auto; width: 400px; height: 400px; margin-bottom: 5px; } body { background: grey; } #score{ float: left } .time{ float:right; margin-right: 0px; } #start:hover{ background-color:#477f4e; } #start{ width:80px; margin-left:220; margin-right:auto; margin-bottom:50px; border-style:solid; border-radius:15px; border-width:1px; margin-top:7px; font-size:18px; } h1, p { font-family: open sans; margin: 5px auto; text-align: center; font-size: 95%; } .board { background: rgba(0, 0, 0, 0.15); position: relative; width: 90%; padding-bottom: 90%; margin: 50px auto; border: 1px solid black; z-index: 0; box-shadow: 0px 0px 7px black inset; overflow: hidden; } .box { position: absolute; height: 33.33%; width: 33.33%; float: left; transition: 0.5s; background-image: url("../img/bob-patricio.jpg"); box-shadow: 0px 0px 7px black; background-size: 300%; } .border { width: 100%; height: 100%; border: 1px solid black; } div.one { background-position: 0% 0%; } div.two { background-position: -100% 0%; } div.three { background-position: -200% 0% } div.four { background-position: 0% -100% } div.five { background-position: -100% -100%; } div.six { background-position: -200% -100%; } div.seven { background-position: 0% -200%; } div.eight { background-position: -100% -200%; } div.nine { background-position: -200% -200%; } #music{ display: none; autoplay: true; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/javascript" href="js/index.css"> <title>Document</title> </head> <body> <body> <div id="container"> <div id="score">Movimientos = 0</div> <div class="time" id="sec">00</div> <div class="time">:</div> <div class="time" id="min">0</div> <div class="time">TIEMPO = &nbsp; </div> <div id="start"> <span onclick="getNum()">INICIAR </span> </div> <div class="main"> <div class="board" id="board"> <div class="box one" id="1" onclick="change(1,0,0,1,1,0,0,1,1)" style="top:0%;left:0%;"> <div class="border"> </div> </div> <div class="box two" id="2" onclick="change(2,1,0,1,1,0,0,0,1)" style="top:0%;left:33.33%;"> <div class="border"> </div> </div> <div class="box three" id="3" onclick="change(3,1,0,0,1,1,0,0,1)" style="top:0%;left:66.66%;"> <div class="border"> </div> </div> <div class="box four" id="4" onclick="change(4,0,1,1,1,0,0,1,0)" style="top:33.33%;left:0%;"> <div class="border"> </div> </div> <div class="box five" id="5" onclick="change(5,1,1,1,1,0,0,0,0)" style="top:33.33%;left:33.33%;"> <div class="border"> </div> </div> <div class="box six" id="6" onclick="change(6,1,1,0,1,1,0,0,0)" style="top:33.33%;left:66.66%;"> <div class="border"> </div> </div> <div class="box seven" id="7" onclick="change(7,0,1,1,0,0,1,1,0)" style="top:66.66%;left:0%;"> <div class="border"> </div> </div> <div class="box eight" id="8" onclick="change(8,1,1,1,0,0,1,0,0)" style="top:66.66%;left:33.33%;"> <div class="border"> </div> </div> <div class="box nine" id="9" onclick="change(9,1,1,0,0,1,1,0,0)" style="top:66.66%;left:66.66%;"> <div class="border"> </div> </div> </div> </div> </div> <img src="img\bob feliz.png"> <iframe src="audio\BobEsponjaRemix.mp3" id="music"></iframe> <script type="text/javascript" src="js/index.js"></script> </body> </html> window.onload = alert("Hola...! disfruta de mi juego \nHaz clic en 'INICIAR', entonces debes colocar la imagen ... \nAsí que haz clic en la imagen..."); //establecemos el tiempo y los movimientos var steps = 0; var sec = "00"; var min = 0; var seconds; var minuts; var div_sec = document.getElementById('sec'); var div_min = document.getElementById('min'); var classNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']; function startTimer() { seconds = setInterval(secTimer, 1000); minuts = setInterval(minTimer, 60000); } function secTimer() { sec++; if (sec < 10) { sec = "0" + sec; } else if (sec > 59) { sec = "0" + 0; } div_sec.innerHTML = sec; } function minTimer() { min++; div_min.innerHTML = min; } function clearTimer() { clearInterval(seconds); clearInterval(minuts); } function resetTimer() { sec = "00"; min = 0; div_sec.innerHTML = sec; div_min.innerHTML = min; } //cambiando la imagen var numbers = document.getElementsByClassName("box"); function change(x, left, up, right, down, left2, up2, right2, down2) { var id = x; if (left == true && verIfEmpty(id - 1) == true) { steps++; changeContent(id, id - 1); } else if (left2 == true && verIfEmpty(id - 2) == true) { steps++; changeContent(id - 1, id - 2); changeContent(id, id - 1); } else if (up == true && verIfEmpty(id - 3) == true) { steps++; changeContent(id, id - 3); } else if (up2 == true && verIfEmpty(id - 6) == true) { steps++; changeContent(id - 3, id - 6); changeContent(id, id - 3); } else if (right == true && verIfEmpty(id + 1) == true) { steps++; changeContent(id, id + 1); } else if (right2 == true && verIfEmpty(id + 2) == true) { steps++; changeContent(id + 1, id + 2); changeContent(id, id + 1); } else if (down == true && verIfEmpty(id + 3) == true) { steps++; changeContent(id, id + 3); } else if (down2 == true && verIfEmpty(id + 6) == true) { steps++; changeContent(id + 3, id + 6); changeContent(id, id + 3); } } function verIfEmpty(x) { var a = document.getElementById(x); var c = a.innerHTML; if (c === "") { y = true; } else { y = false; } return y; } //Esta parte funciona gracias a Asier Villanueva function changeContent(x, y) { var m = document.getElementById(x); var n = document.getElementById(y); n.innerHTML = m.innerHTML; n.className = m.className; m.innerHTML = ""; m.className = ""; win(); showScore(); ok(); } //este generador aleatorio que encontré en internet function randomGenerator(low, high) { if (arguments.length < 2) { high = low; low = 0; } this.low = low; this.high = high; this.reset(); } randomGenerator.prototype = { reset: function () { this.remaining = []; for (var i = this.low; i <= this.high; i++) { this.remaining.push(i); } }, get: function () { if (!this.remaining.length) { this.reset(); } var index = Math.floor(Math.random() * this.remaining.length); var val = this.remaining[index]; this.remaining.splice(index, 1); return val; } } //escribe los números al azar en el rompecabezas //Esta parte funciona gracias a Asier Villanueva function getNum() { var randomNoRepeatNumbers = new randomGenerator(0, 8); for (var i = 1; i <= 9; i++) { var newNumbers = document.getElementById(i); var rndNumber = randomNoRepeatNumbers.get(); newNumbers.innerHTML = rndNumber; newNumbers.className = "box " + classNames[rndNumber - 1]; } for (var i in numbers) { if (numbers[i].innerHTML == 0) { numbers[i].innerHTML = ""; numbers[i].className = ""; } } steps = 0; showScore(); verifArray(); clearTimer(); resetTimer(); startTimer(); ok(); } function win() { var time = min + ":" + sec; var win = true; for (var i in numbers) { if (numbers[i].innerHTML != numbers[i].id) { if (numbers[i].id != numbers.length) { win = false; break; } } } if (win) { clearTimer(); function showAlert() { alert("Has ganado...!!! \nUsted hizo" + steps + "movimientos \nTu tiempo a sido " + min + " min. y " + sec + " sec."); } setTimeout(showAlert, 1000); //Modify the code with the help of @Asier Villanueva and it works perfectly var celda9 = document.getElementById('9'); celda9.innerHTML = "9"; celda9.className = "box nine"; } } function showScore() { document.getElementById("score").innerHTML = ("MOVES = " + steps); } function verifArray() { var count = 0; var arrayNum = []; for (var i = 1; i <= 9; i++) { var w = document.getElementById(i).innerHTML; arrayNum[i] = w; } for (var i = 0; i <= arrayNum.length - 1; i++) { for (var n = i + 1; n <= arrayNum.length - 1; n++) { if (arrayNum[i] > arrayNum[n] && arrayNum[n] != 0) { count++; } } } if (count % 2 != 0) { getNum(); } } function ok() { for (var i = 1; i < 10; i++) { var x = document.getElementById(i); if (x.innerHTML == i) { x.style.color = "#74a57a"; } else { x.style.color = "#ffffff"; } } }
  10. I have noticed that using the @media screen tag behaves differently with the direction in which the window or viewport is resized. Intuitively, one would expect that widening the window or viewport would undo whatever occurred when the window was narrowed. This is not, how it works, however. Is there a general rule of thumb to implement directionally symmetric changes? Roddy
  11. Multiple Slideshows on one page

    Hi everyone. I need help. I am using this slideshow https://www.w3schools.com/howto/howto_js_slideshow.asp for a new site I'm building. I want to to put multiple slideshows on the same page. I can't seem to find out how to target each java script to each slideshow. What happens is that each "dot" will change the pictures on the same slideshow. Let me know if you need any other details. Thanks so much in advance!
  12. W3.css Tabs

    Hi, I am using the w3.css tabs and have a customised cursor. However the cursor will not work over the tabs. What do I need to set to get it to work over the tabs also?
  13. While refreshing my knowledge about CSS I noticed the CSS box model is explained in the following order: Borders Margins Padding Height/width Box model Outline First all components of the box model are explained in depth and afterwards a general overview is given (5: box-model). For me as a reader this was confusing, since I didn't get the main concept until reading the "box-model" page and actually had to go back and reread the margins/padding section to thoroughly understand the system. I therefore suggest changing the explanation order to: Box model Height/width Padding Borders Margins Outline For me personally this would make more sense, since first the general concept of the box model is given, and afterwards all individual concepts are explained in depth (going from the inside to the outside of the css box). Any opinions about this?
  14. @media queries not working

    Hello! I am new to html and css, and am having an issue with media queries! I am just trying to get my site to be responsive for these three different px sizes and cant get it to action. I reverted from the second css media query shown below because it was not working at all, not even showing any attempt to change when inspected in the browser. Am I missing something? Thanks! My @media is as shown: @media screen and (max-width: 980px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 640px) { } I had but reverted to the above when nothing was taking effect.. @media screen @media screen (max-width: 640px) { #cwm { width: 550px; margin: 10px; } } My html : <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../Basic-Portfolio/assets/css/style.css"> <!--script type="text/javascript" src="../Basic-Portfolio/assets/Java/slideshow1.js"></script--> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>The Nerdadian</title> </head> <body> <header> <div class="navBar"> <nav> <ul class="header"> <li><a class="home" href="default.asp"><h2>Tanner Martin</h2></a></li> <li><a class="nav" href="../Basic-Portfolio/index.html">About</a></li> <li><a class="nav" href="../Basic-Portfolio/portfolio.html">Portfolio</a></li> <li><a class="nav" href="../Basic-Portfolio/contact.html">Contact</a></li> </ul> </nav> </div> </header> <br> <br> <br> <div class="standard"> <div class="block"> </div> <br> <div id="aboutme" class="standard"> <h1 id="H2">About Me</h1> <br> <img id="img1" src="../Basic-Portfolio/assets/images/ME!.jpg"> <br> <p id="P1"> Hello! My name is Tanner Martin. I was born in Texas, but lived in Canada for my Junior High and High School life, so I consider my self Canadian :). None of you know this, but I have an amazing little girl named Olivia!She will turn one on October 5th. I am going to teach her to be a gamer, programmer, and just generally awesome, though she already has the awesome part covered.</p> <p id="P2"> I am a nerd of sorts, I collect video game memorabilia, figures of various genres, i computer game, and build my own PCs. My most played game at the moment would either be Diablo 3, or PuBG (Player Unknown Battlegrounds). I just started playing a new game called Depth, if I were to describe it, you would probably think it is lame; So i suggest you try it out for yourself. Recently I have had to startselling my figures, so my collection isn't what it used to be, but here is an old picutre for reference.. (Still not complete collection) <br> <img src=""> <br> </p> <div class="slideshow-container"> <div class="Slideshow1"> <div class="numbertext">1 / 3</div> <img src="../Basic-Portfolio/assets/images/domo-will-eat-you.jpg" style="width: 100%"> <div id="text1">Domo Will Eat You!</div> </div> <div class="Slideshow1"> <div class="numbertext">2 / 3</div> <img src="../Basic-Portfolio/assets/images/dunnykings-orders.jpg" style="width: 100%"> <div id="text2">Dunny King's Orders..</div> </div> <div class="Slideshow1"> <div class="numbertext"> 3 / 3</div> <img src="../Basic-Portfolio/assets/images/old-collection.jpg" style="width: 100%"> <div id="text3">Old Collection</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("Slideshow1"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display="block"; dots[slideIndex-1].className+="active"; } </script> <p id="P3"> I love to travel! My goal is to live on every continent for at least 2 years by the time I pass away. I lived in Greece for three months, so Europe has been partailly completed! Even though I was born in the US, I lived in Canada for my JuniorHigh and High School careers. If you would like to contact me, drop me a message <a href="contact.html">Here!</a> </p> </div> <div id="cwm"> <h3>Connect With Me</h3> <a href="https://github.com/Twmartin1147"><img class="img2" src="../Basic-Portfolio/assets/images/github-sq-bl.png"></a> <a href="https://www.linkedin.com/in/tanner-martin-1147/"><img class="img2" src="../Basic-Portfolio/assets/images/linkedin-sq-blu.png"></a> <a href="https://stackoverflow.com/users/8673657/tanner-martin"><img class="img2" src="../Basic-Portfolio/assets/images/stackoverflow-sq-yel.png"></a> <br> </div> </div> <footer> </footer> </body> </html>
  15. Hey all, When I ran my project today, I noticed everything was all jumbled, and I hadn't changed anything. Loaded backups and still the same problem. It seems my CSS link to https://www.w3schools.com/w3css/4/w3.css has stopped working. Obviously I visit that link and loads in my browser. When I download the CSS locally and run it, it doesn't behave like it did before, and it looks like w3.css hasn't been updated since April. The new behavior with the downloaded/local CSS: Different font throughout the page Nav bar dropdown ) w3-dropdown-hover larger font/placement the regular navbar w3-button menu items Some text-decoration issues Navbar now animates in a different manner This is all with a local copy of the CSS. The web link to <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> doesn't work at all anymore. Anyone experiencing anything like this? What changed? UPDATE: I am using PHP and running a mock server via XAMPP (Apache). When I change a backup file to .HTML is runs just like it did before. Any ideas? Thanks. It shows up red under network with no status code, this is all the info it give me. Request URL: https://www.w3schools.com/w3css/4/w3.css Referrer Policy: no-referrer-when-downgrade Provisional headers are shown Referer: http://pathtomyfile User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36 SOLVED: It was a Chrome extension: Privacy Badger. Why it suddenly started denying requests to W3 I have no idea. It also seems to be the cause of the change of formatting, text-decoration and other weird things. Gr...
  16. Loading time of my website( interpool ) is comparatively high. results are showing that around 29% of viewers will lose. loading time increase because of javascript and CSS rendering. If i block some of the javascript and css does it affect in search. what is the simple remedy.
  17. We're a small manufacturer. We need to create a form that allows a visitor to pick a few machine options and the form would generate the specs based on those choices. The customer wouldn't be ordering online -- it's just for reference purposes. I know it's embarrassingly simple but I've spent two hours digging around and I don't even know what you would call that type of form let alone find any examples. We, of course, need it to look good on a mobile device. Does anyone know of a site that I might find an example or what you would call a form like that so I can find one myself? Any help would be greatly appreciated. For example: 1. Choose series: Medium Duty Heavy Duty 2. Choose Equipment: Modular Complete T-14 R-10 T-24 R-15 T-34 R-25 Output based on the above choices: Capacity = Stroke = Thrust=
  18. This property doesn't work in latest Firefox and Chrome. The information is contradictional: w3.org, msdn.microsoft.com and developer.mozilla.org have the information on this property, although I can't find it on w3schools, it also doesn't seem to be working on TryIt Editor Sandbox. Anyone has this feature working in any browser?
  19. Dropdown menu

    Hey , I have a problem with the positioning of my dropdown menu .. All is working fine but when I hover with my mouse the dropdown doesn't paste the initial menu . If someone could help me <html> <head> <style> #nav ul{ display: table; margin: 100px auto; width:700px; padding: 0px; font-size:25px; font-weight:bold; background: Gray; background: -webkit-linear-gradient(Gray, DarkGray); background: -moz-linear-gradient(Gray, DarkGray); background: -ms-linear-gradient(Gray, DarkGray); background: -o-linear-gradient(Gray, DarkGray); background: linear-gradient(Gray, DarkGray); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); } #nav ul li{ display:table-cell; } #nav ul li a{ display: block; text-align: center; color: rgba(0, 0, 0, .7); padding: 8px 8px 17px 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 1px 0 rgb #A9A9A9 inset, 0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset, 0 -3px 0 hsl(210, 100%, 44%) inset, 0 -4px 0 hsl(210, 100%, 50%) inset, 0 -5px 0 hsl(210, 100%, 60%) inset; } #nav .divider-vertical{ border-right: 1px solid grey; } #nav .elem { display:none; position:absolute; width:inherit; } #nav .elem li{ background:#262626; display:block; text-align:center; } #nav .elem a{ color: white; font-size:25; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } #nav li:hover > .elem{ display:block; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">a</a></li> <li class="divider-vertical"></li> <li><a href="#">b</a></li> <li class="divider-vertical"></li> <li><a href="#">c</a></li> <li class="divider-vertical"></li> <li><a href="#">d</a> <ul class="elem"> <li><a href="#">d1</a></li> <li><a href="#">d2</a></li> <li><a href="#">d3</a></li> </ul> </li> </ul> </div> </body></html>
  20. Responsive Table Help

    Hello On this page, i want the table to be responsive. Can you please help me what should be the code? https://4thdownmagazine.com/harrisburg-2017-schedule.html
  21. I am trying to find a solution to a problem that I have encountered while trying to get a fixed-top navigation menu to work dynamically in W3.CSS. By dynamically, I mean that the horizontally-orientated navigation bar should remain in its place under the page title and image until the page is scrolled downwards and reaches the top of the viewport. At this point, it should fix itself to the top of the screen. I have been able to achieve this effect using my own html/css and jquery script but this method doesn’t work as intended with W3.CSS. I have been moving my websites over to W3.CSS as I as a means of making them responsive and also because css is not my strong point and I like the W3.CSS structure. The menu bar operates as it should when it is in its static mode but, when it is fixed, which involves position:absolute and a z-index of 1, the dropdown menus no longer appear above the bar but are concealed within it. I have tried altering the z-index values of the dropdown-hover and dropdown-content elements but cannot find a solution to this problem. If there is anyone who can, I would be very grateful. The html code below is based closely on the “Navigation Bar with Dropdown” example taken from the W3.CSS Navigation Bars page. I also include the css used to fix the bar and the jquery function to call the css once the top of the screen is reached. HTML <div id=”container”> <div id=”header”></div> <img id="header_image" src="titleimage.jpg" alt="Header Image" class="header_image"/> <img id="header_image_m" src="title_image_m.jpg" alt="Header Image" class="header_image"/> <div id=”nav_bar_container> <div id=”nav_bar” class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a> <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-mobile"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> CSS #nav_bar_container, #nav_bar{ margin:0; padding:0; width:100%; max-width:948px; } .nav_bar_fixed { position:fixed; top:0px; z-index:1; } Jquery if ($( window ).width() > 600) { $(window).scroll(function() { var fixedBar = $('#nav_bar'), targetScroll = $('#nav_bar_container').position().top, currentScroll = $('html').scrollTop() || $('body').scrollTop(); fixedBar.toggleClass('nav_bar_fixed', currentScroll >= targetScroll); }); }
  22. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  23. 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; }
  24. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  25. Caption Image CSS Styling

    Hi, I need some help with CSS styling of Image Caption. I need image caption to be on transparent black background, similar as usedon http://hotels.lastminutehotels24.com/Place/United_States.htm
×