Showing results for tags 'css'.

Issues with connecting HTML and CSS

Liya posted a topic in CSS

Hello guys, I hope I'm in the right section for these kind of problems. I have trouble linking the HTML document with the CSS. I know it's a very dumb problem, and I'm not even a newbie. It's super frustrating because I can't figure out the issue. The document I'm using is for a tutorial about Bootstrap. I downloaded the whole package from the link given by the person making the tutorial - even though the link to the CSS was already given when I opened up the HTML, nothing I write in the CSS has an effect on it. I tried everything - I looked up other people having the same problem, I changed the link several times, I changed the position of the link in the head several times (just to make sure I tried out absolutely everything) without success, I even changed from the MAC I'm working on to a Windows laptop, but nothing works. I created a new HTML and CSS on both MAC and Windows and connected them, they work just fine, so I can't be that dumb - at least I hope so. Can you guys help me? Has it maybe something to do with Bootstrap?

August 6, 2020
1 reply
- htm5
- css
- (and 1 more)
  Tagged with:
  - htm5
  - css
  - connection

How to autoplay video without sound?

Makwana Prahlad posted a topic in HTML/XHTML

I'd like my video to start playing automatically when the page is launched without sound just like on this page: [LINK REMOVED]. I've tried any possible jQuery/javascript/CSS option I could find online but I always end up with Google error that's blocking the video from autoplay unless there was an interaction. How did they do it in the link above?

August 5, 2020
1 reply
- html5
- css
- (and 1 more)
  Tagged with:
  - html5
  - css
  - javascipt

My CSS file is not linking with my HTML file

heqagon posted a topic in HTML/XHTML

How add multiple pages link in mobile navigation menu

Tauheed posted a topic in CSS

I created a mobile navigation menu which display navigation icons in the bottom of the mobile screen. I linked google icons page where I'm taking the icons. All 5 icons are displaying in the bottom of screen, however now I'm stuck and don't have an idea how to add links of pages in the menu bar. I mean there is icon with three bar for main menu, like I want to add contact.html, blog.html, images.html in that icon. I mean whenever user click on the three bar it should display the links of these pages where user can click on of those and read. I appreciate your help. Here is the html code here is the CSS code

July 26, 2020
- css
- html
- (and 3 more)
  Tagged with:
  - css
  - html
  - navigation
  - menu
  - mobile

100vw overflow - but can't fix

elliew1997 posted a topic in CSS

Hi! I'm very new to CSS and have been working on editing a website for work. I've managed to add a dropdown filter list (according to to W3 tutorial - https://www.w3schools.com/howto/howto_js_filter_dropdown.asp), and format it accordingly. However, I am having problems with the width. I have set the dropbtn to 100vw, so that it blends in to an existing header on the screen. It is overhanging on any screen with a scroll bar, and any existing fixes I've found don't work. I'm not sure that I am putting them in the right place though. I'd be hugely grateful if someone could suggest a solution and where to put it please!

July 23, 2020
- css
- 100vw
- (and 1 more)
  Tagged with:
  - css
  - 100vw
  - noob

Can you help me find the error?

What the heck? posted a topic in CSS

I want to create a smooth scrolling effect such that whenever someone clicks on the anchor tags, they move to the bottom without any abrupt jump. So far everything has worked for me but scroll-behavior property. Look at the code below: <!doctype html> <html> <body> <h1>Analystfriend.com</h1> <img src="/img/lighthouse.png" width="400" height="250"> <p scroll-behavior="smooth"><a href="https://www.itstheliar.wordpress.com">Analystfriend.com</a> is a website that provides its readers with a new perception of the topics of high importance.<a id="bnp-1"></a><a href="#np-1"><sup>[1]</sup></a> It is one of the most dynamic content driven non-organisational website at the moment.<a href="#ft-2"><sup>[2]</sup></a></p> <p>So if you're in search of a guider or finding a way to inculcate learning in your hobbies, then you're in the right place. All you need to do is to subscribe to our newsletter and <em>relax</em>.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc</p> <h2>Footnotes</h2> <strong>1)</strong> <a href="#bnp-1">^</a> <a href="https://en.m.wikipedia.org/wiki/Petr_Čech" id="np-1">Citation no. 1</a> <br> <strong>2)</strong> <a href="https://en.m.wikipedia.org/wiki/Gianluigi_Buffon" id="ft-2">Citation no. 2</a> </body> </html> See the scroll-behavior property in the first paragraph tag. What is wrong with it? Why it is not working? It is scrolling in the usual way of jumping.

Fi2

Fi2 posted a topic in HTML/XHTML

To make a simple information website for my partner's local chicken farm, I got one of those website builders where you're supposed to just upload a template and tweak the html/css a bit but now I think I have gotten way over my head on this one! I have messed with html and css some in the past, that's why I thought I could do this, but the template we love (because we don't have a lot of text) is built with/on bootstrap and I am not at all familiar with it! can't seem to find where to tweak to remove/replace the background images of the different sections of the template. I don't even know what question I should be asking right now (in technical terms) so I will just drop the code here and hope someone here will be kind enough to tell me what I need to do, and thanks in advance. To be clear, I am trying to replace the (building) images in the different containers/sections/backgrounds in the code below with our chicken images: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chozeq Farms</title>   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400">  <link rel="stylesheet" href="css/bootstrap.min.css">  <link rel="stylesheet" href="css/templatemo-style.css">  <link rel="stylesheet" href="custom.css">    <div class="container tm-container"> <div class="row navbar-row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 navbar-container mynav"> <a href="javascript:void(0)" class="navbar-brand" id="go-to-top">Chozeq Farms</a> <nav class="navbar navbar-full"> <div class="collapse navbar-toggleable-md" id="tmNavbar"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#tm-section-1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-2">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-3">Trainings</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-4">Contact</a> </li> </ul> </div> </nav> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar"> ☰ </button> </div> </div> <div class="tm-page-content">  <section id="tm-section-1" class="row tm-section"> <div class="tm-white-curve-left col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-6"> <div class="tm-white-curve-left-rec"></div> <div class="tm-white-curve-left-circle"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header blue-text">About Us</h2> <p> Chozeq Farms is involved in the production of poultry meat, eggs, and processed and packaged poultry. Our farm is located in a serene rural environment and we strive to operate the best practices of poultry farming in order to offer the highest quality meat to our customers. </p> </div> </div> <div class="tm-home-right col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-6"> </div> </section>   <section id="tm-section-2" class="row tm-section"> <div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6"> <img src="img/XXX.jpg" alt="Image" class="img-fluid tm-img"> </div> <div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-right-circle"></div> <div class="tm-white-curve-right-rec"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header red-text">Our Vision</h2> <p>To provide top-quality white meat and egg protein within the most environmentally scrupulous conditions.</p> </div> </div> </section>   <section id="tm-section-3" class="row tm-section"> <div class="tm-white-curve-left col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-left-rec"> </div> <div class="tm-white-curve-left-circle"> </div> <div class="tm-white-curve-text"> <h2 class="tm-section-header gray-text">Our Mission</h2> <p class="thin-font">To impact, in the first instance, the local poultry industry, and evolve into a national and regional player, and to become a dominant force in the industry.</p> </div> </div> <div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6"> <img src="img/XXX.jpg" alt="Image" class="img-fluid tm-img"> </div> </section>   <section id="tm-section-4" class="row tm-section"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6 tm-contact-left"> </div> <div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-right-circle"></div> <div class="tm-white-curve-right-rec"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header green-text">Contact</h2> <p>We're available to take your orders and answer any of your enquires between the hours of 8:00 am to 5:00 pm (Monday - Friday) and 10:00 am to 4:00 pm (Saturday).</p> <h3 class="tm-section-subheader green-text">Our Address</h3> <address> Ibadan 200261, Oyo State-NG </address> <div class="contact-info-links-container"> <span class="green-text contact-info"> Tel: <a href="tel:+2348134865720" class="contact-info-link">+2348134865720</a></span> <span class="green-text contact-info"> Email: <a href="mailto:info@chozeqfarms.com" class="contact-info-link">info@chozeqfarms.com</a></span> </div> </div> </div> </section>   <footer class="row tm-footer"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <p class="text-xs-center tm-footer-text">Copyright © 2020 Chozeq Farms</p> </div> </footer> </div> </div>   <script src="js/jquery-1.11.3.min.js"></script>  <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <script src="js/bootstrap.min.js"></script>  <script src="js/jquery.singlePageNav.min.js"></script>   <script> var bigNavbarHeight = 90; var smallNavbarHeight = 68; var navbarHeight = bigNavbarHeight; $(document).ready(function(){ var topOffset = 180; $(window).scroll(function(){ if($(this).scrollTop() > topOffset) { $(".navbar-container").addClass("sticky"); } else { $(".navbar-container").removeClass("sticky"); } }); /* Single page nav -----------------------------------------*/ if($(window).width() < 992) { navbarHeight = smallNavbarHeight; } $('#tmNavbar').singlePageNav({ 'currentClass' : "active", offset : navbarHeight }); /* Collapse menu after click http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click ----------------------------------------------------------------------------------------*/ $('#tmNavbar').on("click", "a", null, function () { $('#tmNavbar').collapse('hide'); }); // Handle nav offset upon window resize $(window).resize(function(){ if($(window).width() < 992) { navbarHeight = smallNavbarHeight; } else { navbarHeight = bigNavbarHeight; } $('#tmNavbar').singlePageNav({ 'currentClass' : "active", offset : navbarHeight }); }); /* Scroll to top http://stackoverflow.com/questions/5580350/jquery-cross-browser-scroll-to-top-with-animation --------------------------------------------------------------------------------------------------*/ $('#go-to-top').each(function(){ $(this).click(function(){ $('html,body').animate({ scrollTop: 0 }, 'slow'); return false; }); }); }); </script>

July 12, 2020
- bootstrap 4
- html
- (and 1 more)
  Tagged with:
  - bootstrap 4
  - html
  - css

Chart.js chart clipped or masked by a custom vector path

Julian Dimitrov posted a topic in HTML/XHTML

For the past few days, I'm struggling with one Chart.js chart that I want to clip or mask with custom vector path. I was able to do something like what I want, but I think I'm missing something. The approach that I took is to create the chart in html (the traditional way, with html canvas ..etc) and then create a svg with the shape I want to cut off and then overlay the <canvas> and <svg> elements. This is what I was able to accomplish: js: var config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', fill: false, borderColor: "red", backgroundColor: "red", data: [ {x:23,y:57}, {x:43,y:67}, {x:143,y:167} ] }, { label: 'My Second dataset ', fill: false, borderColor: "blue", backgroundColor: "blue", data: [ {x:12,y:76}, {x:23,y:89}, {x:143,y:167} ] }] }, options: { title: { display: false, text: 'Chart.js Line Chart' } } }; window.onload = function () { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; css: canvas { position: absolute; z-index: 0; } svg { position: absolute; z-index: 1; } body { background-color: white; } html: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <head> <title> My cutoff chart </title> </head> <body> <canvas id="canvas"></canvas> <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style> #clickHandler { pointer-events: all; } </style> <path id="ship" d="m 100.09542,69.20104 h -83.5475 v -0.41351 -0.41351 l -0.595313,0.0828 -0.595312,0.0828 -0.01659,-0.66146 -0.01659,-0.66146 -0.380288,0.12526 -0.380288,0.12526 -1.890519,0.007 -1.890518,0.007 -0.556877,-0.50403 -0.556878,-0.50403 v -0.38141 -0.38142 l 1.06532,-1.21026 1.065319,-1.21027 -0.09501,-0.28554 -0.09501,-0.28554 -1.433331,-0.20539 -1.433331,-0.20539 -0.859896,-0.13733 -0.859896,-0.13733 v -0.38353 -0.38353 l -1.220114,-0.57352 -1.220114,-0.57352 -0.737049,-1.01747 -0.73705,-1.01747 -0.8116695,-2.57755 -0.8116695,-2.57756 -0.3901093,-1.98437 -0.3901092,-1.98438 -0.1825245,-1.65364 -0.1825245,-1.65365 h 1.5141537 1.5141538 l 0.132161,-0.50538 0.132161,-0.50539 2.753486,-0.18768 2.753485,-0.18767 v -0.35283 -0.35282 l 0.307053,-0.6739 0.307053,-0.67391 h 1.904977 1.904977 l 1.193236,-0.16355 1.193236,-0.16355 0.365047,-0.8067 0.365045,-0.8067 1.190625,-0.37783 1.190625,-0.37784 4.034896,-0.1393 4.034896,-0.13929 v -0.30579 -0.30578 l 0.849273,-0.74523 0.849272,-0.74522 1.393399,-0.14381 1.393397,-0.14381 0.16044,-0.5055 0.160438,-0.5055 -0.328146,-0.39539 -0.328147,-0.39539 0.311142,-0.31114 0.311142,-0.31114 1.80399,-0.10194 1.80399,-0.10193 0.314769,-0.87049 0.314772,-0.87048 0.939179,-0.17619 0.939175,-0.17619 0.380341,-0.91029 0.380341,-0.91028 h 0.365017 0.365016 l 0.1606,-0.41852 0.160599,-0.41851 v -0.99569 -0.99568 l 0.522388,-0.47276 0.522386,-0.47275 0.668239,0.43784 0.668237,0.43785 0.02929,0.45692 0.02929,0.45692 -0.05502,0.66146 -0.05502,0.66146 0.224168,-0.21512 0.224168,-0.21513 0.410602,-2.16612 0.410601,-2.16613 0.712267,-0.34439 0.712266,-0.3444 0.157782,-0.62865 0.157778,-0.62864 0.372999,-0.14314 0.372997,-0.14313 v -1.46351 -1.46351 h 0.264583 0.264583 l 0.0013,1.91822 0.0013,1.91823 0.169696,2.94481 0.169696,2.9448 2.130634,0.12334 2.130634,0.12334 0.101764,0.30529 0.101767,0.3053 h 0.882353 0.882354 l 0.418512,0.1606 0.418516,0.1606 v 0.50086 0.50086 h 5.277839 5.277839 l 0.07997,-1.38907 0.07997,-1.38906 2.513542,-0.17857 2.513541,-0.17856 3.79988,-0.51512 3.799877,-0.51511 0.180554,-0.29215 0.180555,-0.29214 0.606329,-3.31745 0.606333,-3.31746 0.393073,-0.39307 0.393073,-0.39308 h 0.852265 0.852268 l 0.317889,-1.18854 0.317886,-1.18855 3.459062,0.10402 3.459061,0.10403 0.169617,0.16961 0.169614,0.16962 0.143208,5.34668 0.142968,5.34667 1.717418,0.1323 1.717416,0.13229 0.08401,0.52916 0.08401,0.52917 0.1346,0.39688 0.13459,0.39687 0.25994,-0.46302 0.25993,-0.46302 h 3.9273 3.92729 l 0.1523,0.39687 0.1523,0.39688 h 1.63278 1.63278 l 0.35148,-0.46302 0.35148,-0.46302 0.008,-0.46302 0.008,-0.46302 h 3.28946 3.28947 l 0.16795,0.52916 0.16795,0.52917 h 6.59675 6.59676 v -0.52917 -0.52916 h 3.30729 3.30729 v -0.75275 -0.75274 l 0.48385,-0.43788 0.48386,-0.43788 h 0.40118 0.40118 l 0.46944,0.51872 0.46945,0.51874 -0.12644,0.73804 -0.12643,0.73804 -0.19802,0.46302 -0.19802,0.46302 4.72466,-0.003 4.72466,-0.003 0.99752,-0.16487 0.99752,-0.16486 -0.1725,-0.91953 -0.17251,-0.91953 0.35298,-0.21815 0.35298,-0.21815 0.21107,0.13044 0.21107,0.13045 v 1.04272 1.04272 h 1.29052 1.29052 l 0.28495,-0.34335 0.28495,-0.34335 0.14065,-2.7655 0.14064,-2.76551 0.1645,-2.11667 0.16451,-2.11666 0.91522,-1.12448 0.91522,-1.12448 h 0.24687 0.24687 v 1.98437 1.98438 h 1.05833 1.05833 v 0.26458 0.26459 h -0.24701 -0.24701 l -0.0837,0.71713 -0.0837,0.71715 -0.66145,0.18252 -0.66146,0.18253 1.24115,0.0264 1.24116,0.0264 0.17453,0.28239 0.17452,0.28239 -0.55578,0.14534 -0.55579,0.14535 v 0.74612 0.74613 l -0.8599,0.0829 -0.85989,0.0829 v 1.19063 1.19062 l 0.85989,0.0829 0.8599,0.0829 v -0.66891 -0.66892 l -0.53658,-0.28716 -0.53658,-0.28717 0.15532,-0.25131 0.15532,-0.25132 h 1.0271 1.02711 l 0.15347,0.24832 0.15347,0.24832 -0.46859,0.28798 -0.46858,0.28797 0.66146,-0.0733 0.66145,-0.0733 0.0677,-1.71979 0.0677,-1.71979 0.14895,-0.64766 0.14894,-0.64766 0.24235,0.38307 0.24235,0.38308 0.004,2.26219 0.004,2.26219 0.3175,0.3175 0.3175,0.3175 h 0.47625 0.47625 v 0.64362 0.64363 l 0.5268,0.1672 0.52679,0.1672 0.26696,-0.16498 0.26695,-0.16499 v -0.52916 -0.52917 l 0.26458,0.16352 0.26458,0.16352 v 0.51 0.51 l 0.8599,0.35945 0.8599,0.35943 0.36113,0.43546 0.36113,0.43546 -0.18881,1.25917 -0.18881,1.25918 -0.23314,0.43567 -0.23314,0.43568 0.65613,0.16468 0.65613,0.16467 2.1e-4,0.45798 2.1e-4,0.45798 0.75188,1.5875 0.75189,1.5875 1.23054,1.91823 1.23055,1.91823 0.33246,0.037 0.33247,0.037 0.97177,-0.0577 0.97177,-0.0577 0.29431,0.54992 0.29431,0.54992 h 0.63653 0.63654 l 0.18667,-0.30203 0.18667,-0.30204 0.15967,-2.1242 0.15967,-2.1242 0.33073,-0.10935 0.33073,-0.10936 5.3e-4,2.20487 5.3e-4,2.20486 3.0196,0.0151 3.0196,0.0151 0.4194,0.34806 0.41939,0.34807 1.4e-4,0.16604 1.3e-4,0.16604 -2.40702,-0.0934 -2.40701,-0.0934 -0.29187,0.29186 -0.29174,0.29187 2.23573,0.0403 2.23573,0.0403 0.26458,0.0615 0.26458,0.0615 1.91823,0.0305 1.91823,0.0305 v 0.42473 0.42473 l 4.16719,-0.17789 4.16719,-0.17789 1.51081,-0.27919 1.51082,-0.27919 0.40741,0.15633 0.40741,0.15634 v 0.48438 0.48438 l -2.40439,2.50049 -2.4044,2.50049 -1.84101,2.24895 -1.841,2.24896 -1.31085,2.60364 -1.31085,2.60364 v 0.63751 0.6375 l 0.8599,0.0355 0.8599,0.0355 1.05833,-0.0538 1.05833,-0.0538 0.92604,0.63314 0.92605,0.63314 -0.0719,0.87537 -0.0719,0.87537 -0.45725,0.7761 -0.45726,0.77609 -1.35008,0.89689 -1.35008,0.89688 -1.9519,0.5409 -1.95188,0.5409 z m 33.00145,-39.6875 h 0.1323 v -0.13229 -0.13229 h -0.1323 -0.13229 v 0.13229 0.13229 z m 20.54212,-7.82802 0.22768,-0.14071 v -0.24897 -0.24897 h -0.39688 -0.39687 v 0.22049 0.22049 l 0.16919,0.16919 0.1692,0.1692 z" /> <rect id="bg" x="-1%" y="-1%" width="102%" height="102%"/> <mask id="myMask"> <use xlink:href="#bg" fill="white"/> <use xlink:href="#ship" fill="black" /> </mask> </defs> <use xlink:href="#bg" mask="url(#myMask)" fill="chocolate" fill-opacity="0.5"/> <use xlink:href="#ship" fill="none" id="clickHandler" style="fill:none; stroke-width:0.264583;stroke:black;"/> </svg> </body> Here is a working code pen. So far so good, but I wasn't able to align the chart and the cutout properly. The desired position of the visible part of the chart is inside the blue rectangle: As I said, I'm not sure that I took the best approach for achieving this effect. And to be honest, my knowledge in front-end development and graphical design (using .svg files) are very basic. Any help will be greatly appreciated Thanks in advance, Julian

July 7, 2020
- canvas
- chartjs
- (and 3 more)
  Tagged with:
  - canvas
  - chartjs
  - html
  - css
  - graphics

Help! Squarespace Form CSS

Christinee posted a topic in CSS

Hello, Im quite the noob so I need your assistance. Im building a website using squarespace and im trying to modify the checkbox section of the form through css. I would like every checkbox to have a different image and the items to be in 3 columns rather than one. So far i have managed to edit the size of the checkboxes and insert the same image in all of them (see attachment) but i cannot figure out how to individually edit every single checkbox differently. Please help. Thankyou! C

July 5, 2020
- squarespace
- form
- (and 2 more)
  Tagged with:
  - squarespace
  - form
  - css
  - checkbox

html Add to home screen

Alr86 posted a topic in General

من میخوام وقتی خودم سایت میزنم و بقیه اون رو add to home screen میکنن هم اسم و تصویر داشته باشه هم تمام صفحه بشه. لطفاً لطف کنید کد این کار رو بگید. G translator (Persian => English) When I create a site myself and others add it to the home screen, I want it to have both a name and an image and a full page. Please tell, whats the story of them big puppys .....

Ordering CSS declarations in a declaration block

_david_aaron posted a topic in CSS

W3Schools seems to be pretty consistent in the way declarations are ordered in a declaration block. What is this based off of? Do they have a style guide for this? What are recommended practices for ordering declarations? Thanks!

How to put html and css in the same document

Daniele.G posted a topic in CSS

Hi guys I have uploaded a document with html and css in the file manager of my Wordpress blog. The html is the image of horse and the css is used to turn the horse into a galloping horse. Unfortunately, the code doesn't work on my blog as it does on codepen https://codepen.io/dannyku18/pen/yLYJXMV I think the connection between html and css is missing. How can I make this code work? Best, Daniele

April 24, 2020
2 replies
- html
- css
- (and 3 more)
  Tagged with:
  - html
  - css
  - document
  - file
  - codepen

css w3-template reverse animation question

Questionaire999 posted a topic in HTML/XHTML

Hello, I am struggling for days now, i want to use this template and my question is how can i reverse animation/transisition on close? In this example it gets terminated at the same moment when i click close and there is no transistion back. https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_animate many thanks in advance.

June 9, 2020
- html
- unclear
- (and 2 more)
  Tagged with:
  - html
  - unclear
  - does not work
  - help me

Help with HTML/CSS Dropdown Navbar Sub-menus

DNA10000 posted a topic in HTML/XHTML

Hi I am in the process of replacing an old menu on a website and came across the W3Schools menu guides. I have recreated most of the menu using the example and code on the 'Drop down menu in NavBar' page (https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp) and I am really pleased with how it is coming along. However, my HTML and CSS skills are quite limited and I am stuck on two things that I am hoping someone here can help me with. I have done a few searches on these forums but not found quite what I am looking for or something that fits with what I have done so far and I cannot see an example on this site that achieves what I am trying to do. I need to add some sub-menus to the drop down items. For example, in the code given on the above page, the 'Dropdown' menu has three items, Link 1, Link 2 and Link 3. I need to find out how to have Link 1 (for example) provide access to another list of items, e.g. Link 1a, Link 1b, Link 1c etc.. Ideally, I would like this sub-menu to appear to the right of the source item. This also leads the second thing I have not been able to work out, but I think is probably a lot simpler. On the menu item that links to a sub-menu, I would like to put a right-arrow to show that a sub-menu is available. Whilst I can put the arrow on the item, I have not yet worked out how to right-align the arrow so, at the moment, it appears immediately after the menu item name. I have seen mention on some forum posts about li items and child-items but this appears to relate to different types of code for the menu in general and not what I have used so far. If it isn't possible to do this using the current method, I am happy to change to something else and any pointers, or links to example code would be much appreciated. Thanks in advance for any help anyone can offer. David

June 5, 2020
5 replies
- css
- navbar
- (and 1 more)
  Tagged with:
  - css
  - navbar
  - submenu

polyline tag in SVG defs

PHPremote posted a topic in CSS

Why does my polyline tag in SVG not accept style set inside defs tag but does in normal CSS? Here is my code: <html> <body> <style> .trapezoid2 { fill:beige;stroke:forestgreen;stroke-width:2; } </style> <center>  <svg height="400" width="800" style="border:5px double blue;background-color:tan;margin:0 auto;" > <defs> <polygon id="trapezoid1" style="fill:tan;stroke:blue;stroke-width:4;" /> </defs> <use xlink:href="#trapezoid1" points="100,200 150,100 350,100 400,200" /> <polygon id=".trapezoid2" points="400,300 450,200 650,200 700,300" style="fill:beige;stroke:forestgreen;stroke-width:2;" /> </svg> </center> </body> </html> The second trapezoid shows up but not the first. Thanks, PHPremote aka Patrick w3forum_polyline_defJune3.html

June 3, 2020
1 reply
- svg
- xml
- (and 3 more)
  Tagged with:
  - svg
  - xml
  - css
  - polyline
  - defs

Use a percentage value for flex-grow (help)

hamedamini846 posted a topic in CSS

I saw an example in w3schools. they gave a percentage to flex-grow and I don't know how does it work? I thought that we can use just number for flex-grow and now I don't know what is the result of percentage value. I need to help... the example is here https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex

May 27, 2020
2 replies
- css
- css3
- (and 4 more)
  Tagged with:
  - css
  - css3
  - flexbox
  - flex
  - flex-grow
  - flex grow

It is SCSS, not SASS

toto6321 posted a topic in CSS

Is anybody aware of that the tutorial of SASS is actually SCSS? Syntax @import and @include and so on are all SCSS. The whole tutorial is about SCSS syntax but the whole titles are all SASS.

Accordion with expand/collapse image

sascha posted a topic in General

Hello, I'm quite new with HTML and CSS. I'd like to create an accordion with an for the expanded or collapsed state of the section. Unfortunately I couldn't find an example on w3schools. Do you have an example for my problem? Your help is highly appreciated. Sascha

Layout problem

Víctor Pan posted a topic in CSS

I'm trying to give to my nav and my aside tags 70% height but it doesn't work. Please help me, it's beeing very difficult for me layingout my page, i don't even know how to layout pictures can someone give a hint, or a place where i can read it. THANK YOU VERY MUCH. I ATACH MY CSS AND HTML FILES. style.css index.html

Image Rollover and Responsive Size Code not Responsive

kythr posted a topic in General

Hello, I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works. On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!! <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; } </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720"> </div> </body> </html>

May 1, 2020
2 replies
- help needed
- help
- (and 8 more)
  Tagged with:
  - help needed
  - help
  - html
  - css
  - weebly
  - code
  - rollover
  - responsive
  - image
  - size

css Linking html with css troubles

Víctor Pan posted a topic in General

Hello, I’m a beginner and I’m trying to link my html file with my css file. Mi css file is inside a folder called css, in the same folder that the html file. I’ve written in the head of my html file: <link rel=”stylesheet” type=”text/css” href=”css/styles”> But the thing is I can not change my tags background colors neither nav, neither footer, content… I don’t know what I’m doing wrong but maybe you can help with that. Thank you. estilos.css index.html

W3 css : combine responsive and vertically aligned cells

Johan posted a topic in CSS

I've been struggling with W3 CSS for 2 days now, but struggling means learning so that's okay. I'm trying to rebuild this page to make it responsive : https://hdauctions.com/wp-content/uploads/2011/11/Autobahn.html I'm struggling when combining grid, responsive and layout classes but i'm please with the responsiveness of following code. But taking care of the height of the two responsive blocks is not working. According to layout "Side-by-side w3-cell elements will also automatically self-adjust to equal height" Any suggestions ? Did I do well for a non css'er ? <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-row w3-border" > <div class="w3-col m6 l4 w3-container w3-white w3-cell w3-mobile mylogo w3-border w3-cell-middle" > <p>Healey Chevrolet Buick</p> </div> <div class="w3-rest w3-container w3-cell menutext w3-border w3-black w3-round-xxlarge"> <div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle"> <p>Odometer: 50,000</p> </div> <div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle"> <p>engine: 6.2L V8</p> </div> <div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle"> <p>transmission: Automatic</p> </div> <div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle"> <p>color: Ceramic Matrix Gray Metallic</p> </div> <div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle"> <p>interior: Jet Black Leather</p> </div> </div> </div> </body> <style> .blueline {color:#fff !important;background-color:#0099FF ; height:14px!important} .mylogo { font-family: 'Lobster', 'Ubuntu Condensed', sans-serif; font-size: 24px; color: #000; text-shadow: 1px 1px 1px #444; } .menutext { font-family: 'Oswald', 'Ubuntu Condensed', sans-serif; font-size: 11px; color: #FFF; text-transform: uppercase; letter-spacing: -0.05px; } </style> </html>

May 1, 2020
- css
- w3css

Building new page on website using shopify Atlantic theme

RayRay posted a topic in General

Hi guys, I'm already using a theme on shopify called Atlantic. i want to build a new landing page on shopify similar to a page that i like on website demo (see attach). I have no coding experience to do that. I tried installing different app via shopify to help me build the landing page but i couldn't find the right tools to do it (text with image option, styling tools), i want to keep the header and footer for the current theme and change the content. Would you please help with recommendation on how to build the landing page (see attached) and connect it to the theme that i'm currently using? Here is the preview link for the page that i want to build (shop page): https://themes.shopify.com/themes/atlantic/styles/organic/preview Thanks, Ray

April 30, 2020
- html
- css
- (and 3 more)
  Tagged with:
  - html
  - css
  - shopify
  - building website
  - page

Need Help for Rollover Buttons CSS + UIkit Toggle

ameran posted a topic in CSS

Hi, I am new in this forum and firstly, I wanted to say thank you for such great community. I have started to learn CSS. I see it is really challenging. I wrote down a HTML/CSS code for a rollover button. I like to combine this with UIkit Toggle function that I can hide/unhide text or portion of a website, but I could not come up with any solution. I pasted my HTML and CSS code below. I hope you guys can let me know how to modify my code to be able to hide/unhide things, when I click on it. I really appreciate your help. HTML: <a href="" class="button">everyone</a><br> CSS: .button { background: #fff; color: #000; padding: 2px 12px 6px 50px; position: relative; text-decoration: none; } .button::before { border: 1px solid #000; content: ""; left: 1px; position: absolute; top: 12px; height: 8px; width: 8px; } .button:hover, .button:active { font-weight: bold; } .button:hover::before, .button:active::before { background: #000; top: 8px; left: -4px; height: 19px; width: 19px; } Best, Amir

April 29, 2020
1 reply
- css
- uikit
- (and 3 more)
  Tagged with:

Search the Community

Search By Tags

Search By Author

Content Type

Forums

Calendars

Find results in...

Find results that contain...

Date Created

Start

End

Last Updated

Start

End

Filter by number of...

Minimum number of comments

Minimum number of replies

Minimum number of reviews

Minimum number of views

Joined

Start

End

Group

AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Languages