Jump to content

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. Hello, How may I use the <picture> tag to change the sizing of a (background or other) image depending on the device size? For example, let's say the current CSS is: .bgimg { background-position: center; background-size: cover; background-image: url("img/large.jpg"); min-height: 75%; } So rather than using the W3C code of: <!-- Header with image --> <header class="bgimg w3-display-container w3-grayscale-min" id="home"> Instead it would look something like this: <!-- Header with image --> <header id="home" class="w3-display-container w3-grayscale-min"> <div> <picture> <source media="(min-width: 1501px)" background-image="img/large.jpg" style="background-position:center, width:2000px;"> <source media="(min-width: 601px)" background-image="img/medium.jpg" style="width:1500px"> <img background-image="img/small.jpg" alt="picture" style="width:600px"> </picture> </div> Ultimately, my goal is this: 1. to specify the width and height for each image 2. have the picture change depending on the device size 3. have the image also cover the available container size to 100% width Any help would be hugely appreciated. Kind regards
  2. Hi. I am playing around with an old website while trying to learn about html and css and am trying to achieve something to do with the page background image and it's title or caption. The site is here: www.ancrumcrosskeys.com In the top right I have placed a custom html widget which contains the title of the image you can see in the background. However if you navigate to a different page the image changes but the 'title' stays the same. What do I need to add to have the title change with the image? Hope you can help. S
  3. Hi, I'm building a website and I'm wondering if I can use a stylesheet provided by W3schools for some elements on the site. This is the stylesheet http://www.w3schools.com/lib/w3.css Thanks,
  4. I apologize for posting in VBS, I was in a hurry. I searched for hours for a simple code to count "1, 2, 3, 4, 5, 6, 7, 8" as "1, 2, 4, 8, 16, 32, 64, 128" in JS or HTML or CSS; Multiplying the same number with itself didn't work. I want simple code and Google would not show anything. I found "Math.pow()" and "Math.LOG()", but can't find a simple code with an example of "Math.GMS" if Geometric Sequence, or "Math.GMP" if Geometric Progression. What is the simplest I can write? Do I have to combine two or more versions of "Math.xxx()" with my number? The formula is confusing, so I could not write it using that code. Not to be rude, but PLEASE ANSWER, my last question never got an answer. If you don't even answer this one as well, what's the point of this site? If I can't ask something without getting an answer, I will have to ask elsewhere. I SIGN UP TO GET AN ANSWER, not to just quit and go elsewhere. So if you have any help, PLEASE HELP! I would like to have it count "1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096..." when entering "1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13...". This is the closest I got; <input type="number" id="exmp" value="1"> <button onclick="myExample()">Convert</button> <p id="exmpone1"></p> <script> function myExample() { var no = document.getElementById("exmp").value; document.getElementById("exmpone1").innerHTML = Math.pow(no, no); } </script>
  5. Here's my code: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar" id="myNavbar"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/home.htm">Home</a> <a href="https://www...">Store</a> <a href="https://www.ups.com/track?loc=en_US&requester=ST/">Track Your Package</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/aboutme.htm">About Me</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/artclub.htm">Andrew's Art Club</a> <div class="dropdown"> <button class="dropbtn">Need to Know <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/returns.htm">Returns</a> <a href="#">Shipping Claims</a> <a href="#">Terms of Service</a> <a href="#">Privacy Policy</a> <a href="https://www...">Help Center</a> </div> </div> <a href="#">Deals</a> <a href="https://www...">Sign-in</a> <div class="dropdown"> <button class="dropbtn">Languages <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">English 🇺🇸/🇬🇧</a> <a href="https://www...">Español 🇪🇸/🇲🇽</a> <a href="https://www...">Français 🇫🇷/🇨🇦</a> <a href="https://www...">Русский 🇷🇺 </a> <a href="https://www...">Italiano 🇮🇹</a> <a href="https://www...">Deutsche 🇩🇪</a> <a href="https://www...">中国人 🇨🇳/🇹🇼/🇭🇰</a> <a href="https://www...">Português 🇵🇹/🇧🇷</a> </div> </div> </div> </div> </nav> I was super excited that the navbar works now, only to be crushed when the dropdowns stopped working. Any suggestions?
  6. Can you please Help Me to Fix this Issue? Please Help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML HTML 5 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" /> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" /> <title>Testing</title> <style type="text/css"> body { margin-top: 0px; margin-bottom: 0px; background-color: #CCFFCC; } #MainContainer01 { width: 620px; margin: 0 auto; } .Header { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; font-size: 25pt; background-color: #000080; line-height: 75px; height: 75px; } .HREFNoBorder { border-width: 0px; } .FL { width: 310px; height:381px; text-align: center; padding-bottom: 30px; background-color:fuchsia; float: right; } .gap { line-height: 35px; height:35px; /*clear: both;*/ } .TitleSegment { line-height: 30px; font-family: Arial; font-size: 12pt; background-color: #CCFFFF; text-align: right; width: 301px; } </style> </head> <body> <div id="MainContainer01"> <div class="Header"></div> <div class="gap"></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://post.healthline.com/wp-content/uploads/2020/09/blue-lotus-flower-732x549-thumbnail.jpg" width="301" height="381" class="HREFNoBorder" /></a></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://th.bing.com/th/id/OIP.caLpUQWyd1PZV5SRvDOZFQHaE8?w=270&h=180&c=7&o=5&pid=1.7" width="301" height="381" class="HREFNoBorder" /></a></div> </div> </body> </html>
  7. how to vertically center a text in a flip card? the code example is here: https://www.w3schools.com/howto/howto_css_flip_card.asp (in flip-card-back)
  8. If you wanna learn HTML and CSS fast and free you can use the tutorials what I am making! Here is the link of the channel! [Link removed]
  9. Hi All, So I have had a bit of a headscratcher for a few days. And this website seems to be my saving grace every time, now time to test the forum community. I have been doing all of the work and coding on my site myself but this one issue is giving me a real headache. I have managed to integrate my partners client to my website. This all works great. and I have limited options to edit this client interface (through limited CSS) to suit my business. I have managed to get my head round the edits I would like to make. However, when having a sneaky look at what competitors do with the very same client, one feature in particular catches my attention. Somehow with the limited CCS editing options, it looks a though they have manged to get their background image to carry on behind their footer. For me I have a horrible black margin and a small black bar across the top of the footer area. Is there any way that I can achieve this? inspecting and looking at their source code with my limited knowledge is not helping. When inspecting the area it shows as a .footerTemplate part of the CSS, however this is not in the options that I have to edit. The only options for the footer area that I can edit include: . footer_container { background-color: #202C36; width: 100%;} ul.footer_menu { background-color: #202C36;} Everywhere I look online says this is impossible, but I can see it being done and cannot seem to understand how this is achieved. Any help on this would be greatly appreciated. I can supply screenshots or code to aid anyone willing.
  10. I want to make a RPG game that can be run in a browser. The goal of the post is to see if I can get other developers to help. I know HTML and CSS but don't know JavaScript, which is a big part of game. ( I am learning it now ) I want the graphics to look similar to pixel dungeon. The people who sign up will get equity of the game. While this game is to be made for fun it could also make money. For more details about the game details ( such as classes, levels, etc. ) contact me.
  11. <div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</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> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; } .topnav a { float: left; display: block; text-align: center; padding: 14px 24px 12px 24px; } .topnav a:hover { padding: 12px 22px 10px 22px; } @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } .topnav-right a{ float: none; position: relative; } } .topnav .icon { display: none; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } } My float right menu items don't nest in the hamburger menu. I tried float:left on mobile for topnav-right with no luck. I have no idea how to fix it. Code has been personalized from w3schools tutorials
  12. sonjoyray


    Which method is better to use font on the website? Which can be used for both desktop and mobile. I think it's better to use @font-face. Because the fonts are downloaded on my own website and will come in handy on devices that don't support fonts. I also want feedback from you
  13. I have a fixed menu with a centered logo, left and right menu items. My float right menu items are showing beside the hamburger menu on responsive/mobile settings. The menu uses float: right for positioning the hamburger menu and the menu items. <div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</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> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; background-color: #f9f7f7; overflow: hidden; text-transform: uppercase; letter-spacing: 2px; border-bottom-style: solid; border-width: 2px; } .topnav a { float: left; display: block; color: #000000; text-align: center; padding: 14px 24px 12px 24px; text-decoration: none; font-size: 13px; font-weight: 900; font-style: normal; } .topnav a:hover { padding: 12px 22px 10px 22px; border-style: solid; border-width: 2px; border-radius: 50%; color: #101010; } .topnav .icon {display: none;} @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } } @media screen and (max-width: 600px) { .topnav-right { background-color: red; float: none; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } }
  14. I have used this gallery from W3Schools https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp and i want to add function arrow keyboard keys to change pictures in the gallery. Can someone here help me out?
  15. Hi, I'm wondering about advice regarding rotating adverts / messages. Ive not had adverts etc on my site before so this is the first (but I do have rotating one-liner messages in various places using carousel.) https://www.w3schools.com/w3css/w3css_slideshow.asp I am wondering - about creating "one" advert containing 2 words/phrases that rotate in themselves.. But then when a 2nd rotation is complete, The ad changes to a "second" advert which may contain picture or more HTML. example :- A ) Advert one, first screen/message B ) Advert one, second screen/message C ) Advert two, only one screen/text I can probably figure out how to rotate A & B - as individual ads.. but What I'm after is to show A, then B - rotate them a few times "as one ad", and then move onto C. What i'm not after is to show B, then C and back to B again - as 3 separate / distinct ads. has anyone got advice on how to achieve this ? Or even understand how im explaining it ?
  16. Here is the code from w3: <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 500px; background-color: black; color: #fff; text-align: left; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: -5px; left: 0%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> Here it is inside body: <div class="tooltip"> text text text <span class="tooltiptext"> <!-- <span class="tooltiptext" width: 800px;> did not work --> <!-- <style="width; 800px"> tooltip text </style> did not work --> tooltip text </span> </div> I need to set a specific width for each tooltip. I have tried several ways: " . style="width: 800px /. " but it did not work
  17. As the title suggests, the site that I have just finished and delivered, therefore also online, works perfectly on all browsers except safari. I can't understand what the problem is. Do you have any ideas ?? On the home page, the parallax effect "vibrates" tremendously, almost causing nausea. here the link of the page, to understand what I mean, open them with google chrome (fluid and perfect site) and then check with safari. Homepage www.teamcobram.com if it were useful I could also post the code, but you can find it on the site without problems. many thanks in advance
  18. Hello, I would like to be able to insert images of varying width and height into a fixed width and height container on a page such that if they are wider or taller than this container then the over-sized part of the image is simply truncated, without any stretching, but also so that the image fills the full container without leaving any white space ... in other words it will drag the image over the border of width to fill height, or over the border of height to fill width. In other words, the image is placed in the top left corner but fills the entire space without being stretched. So enlarging by proportion and allowing one dimension to stretch over, but the smaller dimension goes to 100% only. This, as opposed to resizing an image to squeeze within a container making the image stretch to fit. Any help would be greatly appreciated! Kind regards, Mike
  19. https://www.w3schools.com/howto/howto_js_collapsible.asp Total noob, have some ideas, but still a bit unsure on the best approach. Was going to implement something similar to what's here (also see supplementary page) http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm thank-you!
  20. Hello! I'm currently working on the error and success pages that will display after you fill out a contact form. I styled for mobile first so there's no media query for that, but there's a media query for desktop at Line 56. For some reason the desktop styles are overriding the mobile ones, when I inspect on google it's not showing the mobile styles at all. Thankful for any help in advance. https://codepen.io/danajcarroll/pen/OJXdmVO
  21. Hello everyone, I would be very appreciative to understand how to use the W3C Schools Template so that I can have multiple stored images served depending on the device width. In other words rather than uploading just one image and letting the template resize it going from a widescreen to mobile size, I'd like some control with regards to the centering of each image. Also, I can then optimise the image sizes too to be radically smaller for mobile (do the W3C Schools Templates automatically optimise image size for me, for example a wide screen image may be hard to reduce to under 200 KB to retain quality versus some images on mobile coudl easily be fine at 30 KB). Thanks so much for your help! Kind regards, Mike
  22. Which is the best CSS unit relative for a site responsive?
  23. Hi there, I am not usually a coder, but I have a Wordpress site with a Mailchimp form that I have been customizing. I want the Submit button to zoom on hover. I've looked at examples of this on the web, but have been unsuccessful in making it work. I have a CSS plugin in which I have entered the following code. So far, it all works. Can anyone tell me how to add the zoom on hover code? /* Add a Border Around the Form*/ #mc_embed_signup { border-color: #000000; border-width: 1px; border-style: solid; } /* Add Padding Around the Mailchimp Form*/ #mc_embed_signup { padding: 20px; } /* Customize the Header*/ #mc_embed_signup h2 { font-size: 24px; text-transform: uppercase; margin-bottom: 30px; color: #000000; text-align: center; } /* Customize the Subscribe Button*/ #mc_embed_signup .subscribe-button { background-color: #0EAD69; padding: 12px 50px; border-radius: 50px; border-color: #738DFF; color: #ffffff; font-size: 16px; display: block; margin-right: auto; margin-left: auto; } /* Change Colour of Subscribe Button on Hover*/ #mc_embed_signup .subscribe-button:hover { background-color: #738DFF; color: #ffffff; display: inline-block; display: block; margin-right: auto; margin-left: auto; } #mc_embed_signup .required-email { color: #A8A3A2; font-style: italic; background-color: #fff; border-color: #000000; } #mc_embed_signup .first-name { color : #A8A3A2; font-style: italic; background-color: #fff; border-color: #000000; margin-bottom: 10px; }
  24. Hello guys, I´m currently creating a website and have to use some kind of a switch button (in iOS-Style). I already implemented the switch button, however I want the user to switch with the button between two upcoming photo galleries. Because documentation in the www is lacking, I would need your support. Because I´m pretty unexperienced in website coding, I used the W3school switch button (https://www.w3schools.com/howto/howto_css_switch.asp) I hope you could help and I´m sorry for being such unexperienced but having high demands.
  25. The only intended difference between the grid displays in the following are the use of DIV versus PRE tags. I don't understand why there is a large vertical gap between the displays. Not a major problem, just would like to know why the difference or where it is coming from. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/> <title>css Simple Grid compare</title> <!-- From: https://medium.com/better-programming/make-a-responsive-grid-with-only-3-lines-of-css-5e2f3837ccc see also: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ see also: https://gridbyexample.com/examples/example37/ see also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout --> <style> .grid { display: grid; /* auto-fill is the same */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 4px; } .Ditem { border: 1px solid blue; } .Pitem { border: 1px solid blue; white-space: pre-wrap; } </style> </head><body> <h2>Grid - DIV</h2> <div class="grid"> <div class="Ditem">Product 1 <br> This contains a longer number of words within the item. </div> <div class="Ditem">Product 2</div> <div class="Ditem">Product 3</div> <div class="Ditem">Product 4</div> <div class="Ditem">Product 5</div> <div class="Ditem">Product 6</div> <div class="Ditem">Product 7 - no vertical gap!</div> </div> <h2>Grid - PRE</h2> <div class="grid"> <pre class="Pitem">Product A <br> This contains a longer number of words within the item. </pre> <pre class="Pitem">Product B</pre> <pre class="Pitem">Product C</pre> <pre class="Pitem">Product D</pre> <pre class="Ditem">Product E</pre> <pre class="Ditem">Product F</pre> <pre class="Pitem">Product G - why such a large vertical gap?</pre> </div> </body></html>
  • Create New...