Jump to content

Search the Community

Showing results for tags 'W3.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


  • 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


  • Community Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. I've been building my website for the first time using w3.css 4 - which I think is brilliant by the way. Makes things so much quicker. However, I've been wondering... when building a drop-down menu (like below) is there any requirement to include <ul> and <li> tags, even though the menu works and displays perfectly just using the w3 classes. I am guessing that it's most prob good practice to include the <ul> tags for search engine crawling purposes, but if anyone can shed any light on whether the these tags are actually required, I would appreciate it. Cheers.
  2. I'm editing this template: https://www.w3schools.com/w3css/tryw3css_templates_clothing_store.htm All the links in the left menu point to the same page, like this: <a href="#" class="w3-bar-item w3-button">Dresses</a> However, when I try to point to a new page, like this: <a href="w3test01.html" class="w3-bar-item w3-button">Test</a> then the new page covers the menu as well. How can I make new pages appear behind the menu, like the original page? All the W3.CSS templates only use one page. Thanks for any help!
  3. Does anyone have any suggestions, or can help me with the following please: I am using w3.css for the first time, but I am struggling to line-up google icons with the text (using the w3-bar-item and w3-button classes) in my navigation bar. I have tried adding my own css (relative positioning, padding-bottom/top, and even changing the font size of both icon and text) but nothing seems to work. I have also gone through w3 references, but can't find the appropriate class that might make the icons and text line up properly. Any help would be very much appreciated. <div i
  4. FYI: The w3-panel class breaks CSS Grid Layouts if added to an element with display: block, by creating an empty, unstyled element at the beginning of the grid. Creating a wrapper element and adding w3-panel to _that_ works, but is a cludge.
  5. I'm having an odd issue with a drop-down menu using w3.css and the w3-bar, w3-dropdown-hover & w3-dropdown-content classes to create a drop-down navigation menu. When the dropdown content contains only one or two links, it works fine, but anything more causes the dropdown content width to extend far further than necessary. I'm sure I'm doing something wrong, but I followed the example given on https://www.w3schools.com/w3css/w3css_navigation.asp and I can't see where I've messed it up. I've attached a screenshot showing the oddly wide dropdown menu, and the live site can be visited at
  6. One of the pages I've got for a mobile application is "shorter" than most phone screens. Since I've taken pains to use a color schema that does not use white backgrounds, is there any way to tell the browser what color to paint the otherwise undefined space? I'm using w3.css color tags in the body and want to match the background to the last container in the stack, so that any remaining whitespace is tinted. My first thought was to use the background-color property. I'm not sure if it plays well with w3.css tagging, and even if I color-code around that, it seems to conflict with the max
  7. I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div>
  8. I've spend a fair amount of time looking for an explanation of what "w3-closenav" does !! I see it used in examples and fiddle with it in the examples, however it would be nice if it was listed in W3.CSS references under "classes". I'm I missing where it is explained in english, or is it just not defined anywhere. Any help will be greatly appreciated. Thanks. sg.
  9. I've run into an annoying problem with spacing that I can't seem to code myself out of. I have a table with a 400x100 image at its background in a page that is set max-width=400px, intended to be full width on mobile devices. The containers honor this, but somehow the image is being resized. Note the right edge of the screen, the 400px image is not aligned with the 400px containers. So i borrowed iPhone5 and I found a different problem. the far right of the image is clipped, so I dropped the last label and radio button down to the next container for the first set. That is when
  10. when I add an anchor tag to text in a w3-accordion-content div, the browser treats the anchor code as an invisible text string and my text line wraps when it shouldn't. Is this a bug or is my code wrong? <div class="w3-accordion w3-container"> <a href="#" onclick="openTagline('tagline1')" class="HPE-text-green"> <h3>This is some headline</h3> </a> <div id="tagline1" class="w3-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, consequatur<a href="somelocalhtmlpage.html" target="
  11. Hi, I would like to ask if there is a hierarchy diagram of the W3.CSS structure with elements and relations between them e.g what is the relation between w3-row/col and w3-layout, which one can be used within the other or are "equivalent"? Thanks in advance.
  12. Apologies for asking what must be a naive question, but the effect this is having is actually quite important to me. The second line of w3.css reads html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} I get everything except the * after the first } "-box}* ". No-where can I work out what this is supposed to do. The first element styled is html, the second and third are before and after of everything *, but what is that first * doing please? Thanks in advance.
  13. After letting a project age well, I'm looking at modernizing my code. The project takes the data input all year long at several different events and builds a 'league scoreboard' of them. The code goes back as far as 2002 in the oldest parts and the last major update to the code was in '07 even if CSS was added by someone else in '14. I have not worked with CSS before, and had a helper apply it to the PHP pages I coded way back when, but they were using a HTML4 subset that I would consider 'less than easily human readable'. My helper dropped out and I found myself looking at W3.css to
  14. I would appreciate clarification of allowed use of w3.css and w3codecolor.js. As explained on page http://www.w3schools.com/w3css/w3css_downloads.asp w3.css is "free to use. No license is necessary." Later we read "Or download w3.css and run it from your own web site" and "You can customize W3.CSS by changing ...". These quotes suggest that everybody can: - use w3.css file, - download it, - provide it from one's page (so, distribute), - customize. However, it is not clear if one can put customized w3.css on one's page. If W3Schools agrees with this, it should be stated and probably some
  15. I know how to set a background image in a w3-display-container, but how do you set a background image in a container using w3.css? I want to put an input form and some text over the image and I'm not happy with my options for placing things in a w3-display-container. Thanks in advance. Linvel
  16. Dear all, I try to make a responsive header with an image on the left and a text on the right. But they never have the same size and I would like to avoid using px size in the style to be sure that is will stay responsive. Example code: <header> <div class="w3-row"> <div class="w3-quarter w3-border"> <img src="images/logo.png" alt="logo"> </div> <div class="w3-rest w3-grey"> <p class="w3-padding"> This is the first line<br> This is the second line.<br> </p> </div> </div> </header
  17. Hi, I'm trying to edit the W3.CSS portfolio template. The part I want to edit looks as follows: <!-- First Photo Grid--> <div class="w3-row-padding"> <div class="w3-third w3-container w3-margin-bottom"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
  18. I've Been Analyzing W3.CSS When I Found A Strange Thing. I Found That !important Rule Is Used More 90 Times In This Framework,The Problem Here Is That !important Is Paralyzing The Ability To Manipulate Some Of Those Elements Who Carries Some Of The w3-* Classes Using Javascript,For Example: .w3-deep-purple,.w3-hover-deep-purple:hover { color:#fff !important; background-color:#673ab7 !important; } As You Can See,I Can't Manipulate Any Element Which Carries The .w3-deep-purple Class Because The !important Rule Has Disabled Style Manipulation Using JavaScript,This Means That The Following Cod
  19. Hi there, I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are usef
  20. W3.CSS - Can I Make Some Modifications To W3.CSS Code?
  21. Hi, I am learning to code, and I used w3.css for a training project. I read that this is better to have styles defined separately from the structure/content of a webpage, but for w3.css it seems that we always have to integrate it in the html code. Is it possible to treat it separately? (so that I can change the style of a webpage more easily?) thanks!
  22. how do i delete a topic
  23. james99


    is there a way to use this http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover with http://www.w3schools.com/w3css/w3css_tabulators.asp i've been working on it for weeks and i cant figure it out i wanna make the content show on hover please help
  24. Hi everyone. I am beginning with w3.css. It so great. But i don't know how to offset a column as a do it on bootstrap, or similar like that on w3.css. many thanks.
  • Create New...