Jump to content

Search the Community

Showing results for tags 'CSS'.

The search index is currently processing. Current results may not be complete.
  • 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 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 the
  2. 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?
  3. 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 w
  4. 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!
  5. 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>
  6. Can please anyone help me ? This is my Media Queries for Tablets ; @media (min-width: 37em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-template-areas: "header header header" "nav nav nav" "linkBox main main" "footer footer footer"; } and this my Media Queries for Desktops; @media (min-width: 80em) { body { display: grid; grid-template-columns: 10% 72% 17%; grid-gap: 5px; grid-template-areas: "header header header" "nav nav nav" "lin
  7. <div class="mySlides w3-container"><a href="/todo#feedback" class="w3-bar-item w3-button w3-mobile">Feedback</a></div> <div class="mySlides w3-container"><a href="/todo#feedback" class="w3-bar-item w3-button w3-mobile">Contact us</a></div> Hello - Stupid question - How do i remove all formatting on this forum ? the above is copied from my html code & it looks weird - i cant remove the blank space / gap. (it also appears that this box where im typing is 50% of the a
  8. Hello. Is there an EASY way to have a w3css table that is centered & a variable width. IE not taking up 100% of the available div width. Ive currently got this code - it is a small width - but it still floats to the left of the screen. <div class="w3-row"> <div class="w3-half w3-container" style="margin-left:auto; margin-right:auto;"> <table class="w3-table-all" style="margin-left:auto; margin-right:auto;"> Ive tried with or without (rows, w3-centered, w3-center) - & nothing works, ive added (& not added) the css
  9. Currently I am working on a project and I faced this problem i want to hide the parameters from URL that are passed. I am working on a site http://letsfindcourse.com and I want to hide the parameters from URL so how can I do that ?
  10. Well, I'm trying to make it so that the slide ends on the last page and shows a sign that whoever's reading has reached the end, but I'm not too experient on JavaScript, could you guys help me on that? Here's the code: <html> <title>Terra Formars</title> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link> <style> .mySlides {display:none} </style> <body> <div class="w3-container"> <h2> Leitor BETA</h2> <p>CapĂ­tulo 202 de Terra Formars.</p> </div> <div class="w3-center">
  11. In CSS how can I select an element based on whether it has an attribute or not at all?
  12. I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help. HTML <!doctype html> <html> <head> <title>Amy Perrales | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel=
  13. When I add element in "Search HTML" box that I want to find on page and it gives me several results. how can I see those that come after the first one? I don't see arrow or anything like that. For ex. when I add "id" for some page it gives me 9 results but I see highlighted only the first one. How to scroll to others?
  14. Hello, so at the store page, when in mobile view the top dropdown menu doesn't work. When I delete parts bit for bit in the footer PHP file the menu will still not work. If I delete everything in the footer PHP file it will still not work. But if I completely change the PHP file name so it isn't linked to the store page at all, the dropdown menu works perfectly fine. I find this really weird and I can't figure out how to fix it. Can somebody help?
  15. AJ2021

    Nav bar spruce up

    Hi, I'm new to web design and need help w/ my nav bar. I need help spacing my page links on the nav bar as well as spacing my nav bar within the page. I have my nav bar spaced right now but I don"t know if it will work well w/my page and the page links aren't spaced correctly and I'm not sure how to space them. I also got my page links to be white but the rest of the words in the nav bar are still black & I want it white as well. Any help would be greatly appreciated. HTML: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jackson L
  16. I have a sticky navbar which works fine until I add an image to my image box which at that point the sticky doesn't kick in until you scroll past the image. Any ideas as to what could be the cause of this it's driving me crazy? At least it's a short trip for me! <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-size: 28px; font-family: Arial, Helvetica, sans-serif; } .header { background-color: #f1f1f1; padding: 30px; text-a
  17. Good afternoon. I have problem. I have 3 cards in a row. They work great. They have an image, a card title, and card text. The problem is when you display the page such that the text in the card title has to wrap. This pushes down the card text. So, when you look across the row, the card text is lower this one, higher that one, not aligned. I am not sure how to fix this. I tried setting a bigger margin bottom for the card title but that didn't work. Here is a picture of the problem. Ignore the dotted white lines. Was directly from Dreamweaver display. any ideas would be GREATLY ap
  18. First of all, I'm no way near any skilled "programmer" or website builder, I mostly just copy things and modify the styles and stuff! So this is probably a nooby question, you have been warned. I've this website I'm building for a school project and I've a few problems left and I've given up trying to fix them, I need to start working on other stuff. First of all so am I trying to get this slider between the three pictures and the navigation bar in the supposedly start page, but the animation disappear when you put it in and I don't think the autoplays work either. This is the main
  19. So I've searched the web and tried for hours now and I'm just giving up. I've this header, and I want it so when you're on mobile it looks like something like this. So when you're on desktop the full menu is in the header and if your're on mobile you get a dropdown menu. Can someone tell me how I do this? Thank you
  20. BACKGROUND: I have a flexbox (#contact_div) that creates a column of rows (.content_item). Each row represents another flexbox that is divided into two columns (.contact_info and .contact_data). Now, each row of columns is neatly spaced across the entire width of the parent #contact_div when in full-screen browser mode. As the width of the viewport is made smaller, however, spacing problems begin to arise. in smaller viewports the width of each row is no larger than that of the widest content contained in each of the two columns. I would like the columns to fill the entire width of the o
  21. BACKGROUND: In an effort to obtain good responsive design I feel compelled to leave out certain elements that are unresponsive. I am loathe to do this. I have identified the element that is causing the distortion. The element retrieves and displays the referring URL. Unfortunately, in its effort to render the URL fully, the element causes the div to extend beyond the boundaries of the viewport and distorts the page. Now, I have tried to overcome this problem in the following manner, but it fails. #yp_container #current_referral_url { max-width: 100%; overflow-wrap: break-word; }
  22. BACKGROUND: In my most recent effort to fix the alignment problems associated with the responsive design of my site's mainpage I have managed to overcome several important hurdles. There does remain one problem, however, that I cannot seem to fix. This has to do with the rendering of inserted div elements in my site's mainpage. By way of example 1) Open Grammar Captive's mainpage in a smartphone -- preferably iPhone, for this is where I have detected the problem. 2) Click on the About option under Introduction in the navigation bar. The insert appears correct. No background
  23. I have been debating whether to use a canned framework or not (versus raw css) and am still on the fence. Twitter bootstrap seemed bloated to me when I tried it, so today I played around with w3's framework. It's nice, but I feel like I have ZERO control (or at least I can't control it....). The example framework I kicked around a while is this one: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio&stacked=h The thing I HATE is how the side menu pops up automatically when the window is enlarged. So I just spent literally two hours trying to figu
  24. Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css .bgimg-1{ min-height: 100%; background-image: url(/w3images/parallax1.jpg); } (from the style brackets after the head tag ) I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html imag
  25. WHO: A problem for Dsonsuke. BACKGROUND: In a recent effort to make my website responsive, I have run into trouble with my website. DILEMMA: I have five panels that appear correctly in two (wide viewport and narrow viewport) of three instances (wide viewport, middle viewport, and narrow viewport). It is the middle viewport that I cannot get to appear correctly, and I do not know what is causing the problem. When one adjusts the browser window from wide to narrow, and the three horizontally aligned panels are reduced from three to two, the contents of the middle panel is no longer
×
×
  • Create New...