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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 871 results

  1. I am following the tutorial here, and I would like to add more than two slideshows on a page. I tried this: <h4>10 Shot Photo Challenge #1</h4> <div class="slideshow-container"> <div class="mySlides1"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_BlackAndWhite.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Contrast.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Emotion.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_FavoriteColor.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Misc.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Numbers.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Outside.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Rule_of_Thirds.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_StartingWithB.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_UpClose.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #2</h4> <br> <div class="slideshow-container"> <div class="mySlides2"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_happy.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_January.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2873.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2931.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2985.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2986.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3031.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3037.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3041.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_E3040.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #3</h4> <br> <div class="slideshow-container"> <div class="mySlides3"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0139.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0144.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0157.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0158.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0159.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0160.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0192.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0199.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0936.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0945.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> This made 2 slideshows, but the third one didn't work. How can I get a third slideshow onto this webpage? ZIP file attached with all website files. 10shot.html is the file I am having trouble with. Alex's Website.zip
  2. 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
  3. 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.
  4. 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
  5. Víctor Pan

    Layout problem

    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
  6. 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
  7. 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>
  8. 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
  9. 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>
  10. 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
  11. 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
  12. I was trying custom css styling for checkox https://www.w3schools.com/howto/howto_css_custom_checkbox.asp but it is not accessible in high contrast mode. any suggestion fro correction
  13. Hi! Im trying to design a view with 2 boxes : on the left 1 menu and in the right the main box. The menu should be vertical and relative, and with the main box I can do what I want. The problem is that this 2 boxes should fill all the space horizontally and vertically. But all the time that I change the width or the "position" I have 2 results: Part of the main box is hidden with the menu box The two boxes dont fill the space This is the css code of my boxes: .main-box{ background-color: #FFFFFF; font-size: 14px; color: #34495E; height:99%; min-width: 150px; line-height: 1.231; width: 94%; margin-left: 10%; margin-right: 0.5%; float: right; border-radius: 5px 5px 0 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); } .menu{ position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: 7em; background-color: #333; } And this is the result. How can I solve it? Thanks!
  14. 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.
  15. dkx4hws

    W3 CSS

    Hi the https://www.w3schools.com/w3css/4/w3.css doesn't appear to work in asp.net using forms is there a work around for this?
  16. Hey, I'm new to CSS and trying to figure something out. I want to have my search bar so when the user clicks it, the entire page fades except for the search bar. So although the bar itself doesn't change, it creates the effect of it being highlighted. If anyone could point me in the right direction that would be great! Thanks Dan
  17. PascalM

    Image Hover Overlay

    Hello everybody I recently found this simple Image Hover Effect on w3schools: Image Hover Overlay: https://www.w3schools.com/howto/howto_css_image_overlay.asp This even seems to work on mobile (iOS) devices (touch), as far as I could test in the tryout editor. I then saved the provided code and published it on my own hosting (https://hammermann.ch/test.html). It's still working on desktop, but not on mobile (and I haven't changed any code at all) Any Ideas how to solve that? Thank you and stay healthy! Pascal
  18. Hi, I made a website whit css bootstrap and so on... But if I test it with a google speedtest it results very speed on desktop while the for mobile it's very slow ! my question is: Can I load only the necessary css for mobile when viewing in small screens? what other precautions can I do? Of course I'm using a cms like wordpress. Regards, Giovanni
  19. Hi Guys. This is my first post here so apology in advance (if forum rules being ignore or posted into wrong category). I am trying to display elements on div hover. I had watched a lot of tutorials and practice a lot but still i am struggling with my problem that's why i come here so maybe someone (a Hero) help me. Even sort of direction mean a lot for me Explanation: Actually i am trying to create a something like Character Selector UI in case if you're looking some reference. I want to display hidden content at class="outputr1". If i hover img 1 then it show only hover content 1. And if i hover img 3 then it show hover content 3 and so on. I also want when i hover any div then it should stay active as difficult unless i hover other div like img 1, 2 or 3. it took a month but still i haven't figure it out howto achieve this. what i am missing? <!DOCTYPE html> <html> <head> <title>Display Hidden Content OnhoverEvent</title> <style> body { padding: 50px 10px; margin: 0 auto; max-width: 900px; } .hide { display: none; } .myDIV:hover + .hide { display: block; color: red; } </style> </head> <body> <div class"outputr1"> I want to display Hidden/hover content here </div> <br><br> <div class="myDIV"><img src="1.png" width="100px" height="100"> <div class="hide"> Hover content 1 </div> </div> <div class="myDIV"><img src="2.png" width="100px" height="100"> <div class="hide"> Hover content 2 </div> </div> <div class="myDIV"><img src="3.png" width="100px" height="100"> <div class="hide"> Display Hover content 3 </div> </div> <div class="hide"> I am Hover Content but i don't want this to display.</div> </div> </body> </html> Sorry about my good English. I am really new to this stuff so i am spending most of my quarantine time in web development skills
  20. <!DOCTYPE html> <html lang = "en"> <!--This is my first comment in my index page--> <head> <meta charset="utf-8"> <link rel="stylesheet" href="greentea.css"> <a href= "greentea.html"></a> </head> <header> <h1>Teaz Nuts</h1> </header> <!--This is the body of my page--> <body> <nav> <ul> <li><a href= "greentea.html"> Home </a></li> <li><a href="about.html">Login</a></li> <li><a href="Product.html">Product</a> </li> <li><a href="New User Signup.html">New User Signup</a></li> </ul> </nav> <main> <div class = "hippiegirl"> <image src = "hippiegirl.jpg" alt = "tranquility"></image> </div> <p>The properties of green tea are many and varied. Especially during an epidemic<br> we all need to be aware of what tea can do for us. Along with its antibiotic properties, it also<br> can cleanse the spirit and wash away our tensions. </p> </main> <footer> <br>&copy; <a href="mailto:jackcole861@gmail.com">Click to email Jack Cole</a> </footer> </body> </html> This is my css .hippiegirl { position:absolute; left:0; top:0; width:400%; height:auto; opacity:0.6; } body{ background-color: lightgreen; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; }
  21. How do you include a .inc file in a .css file? I want to create a navigation bar with CSS, but it requires me to connect the head.inc to the css file. How do I do this?
  22. Hi everyone, I'm a complete newb to this, so I feel questions are a great way to get my feet wet, here we go. I am using a Laravel Website. It's very bland looking. There is a CSS section, and I will provide a screenshot...but I have no idea what should be entered....do i need to create CSS files, or...honestly i'm, clueless. But it would mean the world to me if you fine folks could not only help me, but point me to the correct resource to begin my learning adventure. Biggest thanks in advance Carson
  23. Here's the reference code: https://www.w3schools.com/howto/howto_js_image_comparison.asp I'd like to be able to get this to duplicate and have them appear side by side. Putting the HTML code into tables doesn't work. If I increase the size of the pictures they run over each other. I think the issue is within the CSS. Here's a sample of code: .img-comp-img { position: absolute; width: auto; height: auto; overflow: hidden; } I was able to move the snowy mountain picture by copying the code, changing the element selector to ".img-comp", changing position to relative, and changing width to 300px. After that I got stuck.
  24. Hi, I'm using a w3-css-theme. How do I make a stripped table look like the theme I chose? I use the example like so: <table class="w3-table-all"> When I added w3-theme-l2, nothing happened. Thanks
  25. Hello Folks, Newbie here, learning via w3schools.com. I think I'm missing something basic, but I can't figure it out.I'm using w3schools to create a hero image (via https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image), but when I upload that code to my host, and then using different screen resolutions, the image is distorted. Viewing it on 1024x600, I see the hero image of the guy holding a camera, but if I view it on a much higher resolution, the image is "zoomed in" to the top left area of the picture. Here's the code, any help would be most appreciated: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } .hero-image { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.w3schools.com/howto/photographer.jpg"); height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .hero-text button { border: none; outline: 0; display: inline-block; padding: 10px 25px; color: black; background-color: #ddd; text-align: center; cursor: pointer; } .hero-text button:hover { background-color: #555; color: white; } </style> </head> <body> <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">I am John Doe</h1> <p>And I'm a Photographer</p> <button>Hire me</button> </div> </div> <p>Page Content..</p> </body> </html>
×
×
  • Create New...