Jump to content

Search the Community

Showing results for tags 'css'.

  • 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

  1. I found w3schools' tutorial for "Image Magnifier Glass" and want to use it on my website for multiple images. But I can only get it to work for one, presumably because it uses document.getElementById(imgID) in the js; I tried changing this to document.getElementsByClassName(names) but that didn't work. I'm not an experienced javascript user so don't know how to resolve, but assume something different needs to go where (names) is at the least. Can anyone help? The only thing I changed in the code is to add a little padding to the img-magnifier-container class. Thank you. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img-magnifier-container { position:relative; padding: 20px; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; } </style> <script> function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /*create magnifier glass:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*execute a function when someone moves the magnifier glass over the image:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*prevent the magnifier glass from being positioned outside the image:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*set the position of the magnifier glass:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*display what the magnifier glass "sees":*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Image Magnifier Glass</h1> <p>Mouse over the image:</p> <div class="img-magnifier-container"> <img id="myimage" src="http://bartonlewisfilm.com/img_157-229.jpg" width="33%" height="33%"> </div> <div class="img-magnifier-container"> <img id="myimage" src="http://bartonlewisfilm.com/img_287-145.jpg" width="33%" height="33%"> </div> <p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p> <script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script> </body> </html>
  2. I downloaded the latest w3.css framework and updated the css for html, body to use a different font-family. html,body{font-family:'Lato','Open Sans',font-weight:300;sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden} However when I did that the font that is now displayed when I use the following code displays an incorrect (and serif) font. <div class="w3-container w3-panel w3-card-2 w3-blue"> <b>System Alert:</b> <br /> System currently in <em>Development Mode</em> </div> What gives? How can I get this to resolve.
  3. carrinho.php I dont have a scroll bar on my shopping cart, and i can't implement one
  4. Hello. I Was Reading A Stylesheet When I Found A Strange @import Rule,I've Never Faced This Rule. What Is The Difference Between Including A Stylesheet Using @import Rule,And Doing The Same Using <link rel="stylesheet"/>?,And Do You Suggest Me To Use This Rule?.
  5. Hi i am beginner on CSS in Wordpress, on my site Officelearn.nu. I encounter this problem but I do not know how to proceed. When you answer, you can be kind to enter the correct CSS code that should stand there instead.
  6. i need to change the background color and other stuff of some <a> elements but not every single <a>, so i defined a class for the elements that i need to change but I don't know how to use the class name to define a:active or a:hover if i use #classname:hover it doesn't work. Can you tell me how to do it?
  7. I am building my first web site using HTML, CSS, and Bootstrap. After extensive searching, I can’t get my HTML file to link with my CSS file. The HTML document and CSS document are in the same domain so there shouldn’t be any reason to mention a file in the code, but my CSS isn’t affecting the HTML when I load it in Chrome. Any help would be greatly appreciated. I have enjoyed learning how to make a website, but this is hampering my progress/enjoyment. Below is some of the code (most comes from the Bootstrap site with minor customization). <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--> <title>TruNord</title><link href=“GOOGLE FONT PAGE” rel=“stylesheet” /><link href=“css/bootstrap.min.css” rel=“stylesheet” /><link href=“main.css” type=“text/css” rel=“stylesheet” /></head>
  8. I'm basically a coding amateur and need help! I used this page to find an accordion that works well for what I need (I'm looking for an accordion that can have all open at once) and am basically using this permutation, edited only for content & style. Is there a way to start with them all open instead of all closed? The simpler the better for this frustrated amateur! Thanks!
  9. Hi there, I went into a problem, might be simple for you but I am sitting here and try it out for many many many hours... Here is the thing, at the top is my header, the header is seperated with php in another file/folder and with a php code it is displaying in the index home file. I would like to have the background video fully covered under my content body and under my header. But whenever I put it, then it is under my content only and the header is disappearing for some reason. Also, when I put it for header only, then I will get it at the top only and the body will be empty with my normal content but without the background video. Here is the code I am using: #CSS * { box-sizing: border-box; } body { margin: 0; font-family: Arial; font-size: 17px; } #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } HTML <video autoplay muted loop id="myVideo"> <source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> I put the CSS at the top in the header section and the other stuff in front of my body content. Any suggestions? :(
  10. hehg

    Modal cache issue

    I’m following the W3Schools modal example https://www.w3schools.com/howto/howto_css_modals.asp but I’ve got an issue with caching after changing modal html content. Read a numerous posts on this on the web using is and reset, removedata, etc. but nothing seems to work. Any help highly appreciated. Thanks!
  11. I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at: https://rads-198409.appspot.com If you minimize the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined. Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content .html to point to the right files). Below are links to the code: Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
  12. HI! I d like to make Meni2_vsebina to be child of Meni2 (but both independent from Meni and Meni_vsebina) as far as I change position of Meni everything change it. Here is the code: <style> .Meni > Meni_vsebina{ display: inline-block; position:fixed; top:-2px; left:100px; } .Meni_vsebina{ display:block; position:relative; } .Meni2 > Meni2_vsebina{ display:block; position: relative; top:-100px; left:100px; } .Meni2_vsebina{ position:absolute; left: 100px; display:inline-flex; } </style> <body> <div class="Meni"> <span><i>Meni</i> </span> <div class="Meni_vsebina"> <a href="test1.html">Test1</a><br> <a href="test2.html">Test2</a><br> <a href="test3.html">Test3</a><br> <a href="test4.html">Test4</a><br> </div>
  13. I am looking for some help if anyone could please. I am creating a fully html and css navigation bar I am no expert in html or css just a hobbyist. I am trying to create a website for my business i don't want a nav bar like on google i want to create one with my own social media icons search bar which can find words on that page and hold my logo and page links If anyone has anything Please comment or Could anyone email me a snippet of code if they have done this before Many thanks Kieran Patience k.pwebdesign@outlook.com
  14. Hi, I am making a portfolio website and i want to add a opacity to my pictures. But my navbar is sticky so it scrolls with the page but if i hover over a image it goes through the nav bar. Is there a way to fix this problem? I will add a picture to make it more clear. Hope you guys can help Thank You! /***************************** Code ************************************************/ .navigation-background{ grid-column: 1 / 4; display: grid; grid-template-columns: 20% 60% 20%; background-color: #2C2949; position: sticky; top: 0; width: 100%; } .navigation{ grid-column: 2 / 3; display: flex; flex-direction: row; justify-content: space-between; }
  15. https://www.w3schools.com/w3css/w3css_input.asp I am trying to follow the above examples. Forms with INPUT and SELECT are easy enough, however the above page has no examples if how TEXTAREA is used ? ive used textarea successfully on normal forms, however I cant seem to get it working on W3CSS. All I see is a single line - Not multiple lines / textarea. has anyone got an example using W3CSS & multiple lines ? If I dont use inline-block, the input takes up the WHOLE line. i want label & input on same line. and yes, i am aware of readonly. i'll remove that after testing. The latest code I'm using now is:- <label style='display:inline-block;'><strong>Description</strong></label> <input class="w3-input" type="textarea" style='width: 75%;display:inline-block;' rows='4' cols='60' name="description" value="{$articledetails.description}" readonly><br />
  16. There is no highlighting of table rows on mouse over. I tried it in Opera and Chrome. https://www.w3schools.com/css/tryit.asp?filename=trycss_table_hover
  17. Is there anyway to make this dropdown menu use onclick instead of hover on small screens. I'm creating a menubar with several dropdowns and a couple sub-dropdowns with-in them and as it is on small screes the menu is too hard to navigate with the hover. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown Thanks!
  18. I just started teaching myself html and css and ended up making this practice page with song lyrics. I managed to get the wav file to appear and play the song on the page but I'd love to have the song automatically play when the page opens without the player visible as its taking away from the aesthetic I want.
  19. Hi, I am building a website in wordpress! Even though im very new to coding HTML, CSS and Java, i am trying! My problem is that i want to make a slideshow based for ads, so every picture need a individual link! Can anyone tell me how thats done? Thank you
  20. Can someone help me try to figure out the proper HTML and CSS to both align images side by side AND put a sliding caption overlay on each image that slides up from the bottom? I'm using the following as references: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom Thank you!
  21. I am trying to switch two divs on an onclick command to a search button. One div should replace the other entirely. I have tried to do this two ways: 1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa 2) make Div 1 display = none when Div 2 display = block, and vice versa. My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely. Any suggestions why this might be doing this and/or, is there a better way to accomplish this than just changing the CSS? I am including the JS, HTML, and CSS attending this problem. Thanks ahead of time: JS (from Option 2) function getSearch() { document.getElementById("searchcontainer").style.display = "block"; document.getElementById("blogcontainer").style.display = "none"; } HTML <div id="rightcontainer"> <div id="searchbox"> <form> <input type="text" placeholder="Search..." required> <input id="cardib" type="button" value="Search" onclick="getSearch()"> </form> </div> <button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">&#9660</button> <button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">&#9650</button> <div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> </div> </div> CSS #blogcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #searchcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #rightcontainer { height: 100vh; width: calc( 100% - 20vh - (.678*(100%-20vh))); position: fixed; overflow: hidden; background-color: gray; margin-left: calc((.678*(100%-20vh)) + 20vh); float: left; margin-right: 0; }
  22. Hello, I don't undesrtand grid-gap syntax(with two values) on w3schools. From example on w3schools, grid-gap(50px 100px), it says that first value represents grid-column-gap and the second grid-row-gap? When I run result in a browser, row-gap is 50px and column-gap is 100px? Shouldn't be otherwise?
  23. I started to follow the https://www.w3schools.com/w3css/w3css_navigation.asp navigation page. However the menu I want required a bit more - with a few SELECT fields and a form. My page is here :- http://newtib.kwister.com/ The menu at the top (marked in HTML code as <!-- NEW MENU --> works fine. On big/medium screen - it is the same, However on a small screen (mobile) I see a small button which says "HIDE MENU". This is OK. & when I press the button, the menu hides itself. PROBLEM: within 1-2 seconds of pressing the button, the menu reappears. I am wondering if someone can assist with finding a problem with the script ? (on a mobile). if Div is hidden, show it it if Div is visible, Hide it I have TWO divs (one underneath). Which shows another button. If one div is hidden, the other div is visible. its supposed to swap when the buttons are pressed..
  24. Hello, I'm pretty new to html/css and I need some help with the menu from the navigation and the hero-image at less than 620px width. So when I scale down the website, I would like the menu to get under the logo and be centered both. Also, how can I prevent the submit button to overflow the container from the hero-image at less than 620px? This happens when the headline breaks into 2 rows. Here is the codepen link: https://codepen.io/ancapopescu6/pen/xMqJMY Thank you very much!
  25. Hello, With reference to your "Responsive TopNav" example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav it works fine for the most part, except that when the "hamburger" icon is used it does not close down again after making a selection. I have included my own slightly modified version of your example, simplified so there are only "home" and "news" menu items, and the hamburger icon will appear when reducing the width below 1000px. How can this be modified to collapse the hamburger links upon making a selection? Thanks... Jon <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; position: absolute; left: 0; top: 0; width: 100%; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 1000px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1000px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } </style> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> <div style="padding-left:16px; padding-top:40px"> <h2>Responsive Topnav Example</h2> <p>Resize the browser window to see how it works.</p> </div> <h2 id="home">Home</h2> asdf<br> asdf<br> asdf<br> asdf<br> asdf<br> asdf<br> <h2 id="news">News</h2> asdf<br> asdf<br> asdf<br> </body> </html>
×
×
  • Create New...