Search the Community
Showing results for tags 'w3.css'.
-
hello, new user of w3.css here... I'm trying to create a navigation bar with dropdown elements. If the dropdown is the first element in the bar, it is always highlighted, as if you'd hover over it, and it keeps that state. Example (from the try-editor, just change the order of elements so that w3-dropdown-hover is the first one) <!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-container"> <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div class="w3-bar w3-light-grey"> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> </div> </div> </body> </html> What am I doing wrong here? Or is it a bug? thanks for a tip, uno
-
Good day everyone! I will admit right off the hop that I know very little about javascript programming but I hope that with your help, I can learn something today. I've looked on w3 and elsewhere to find my answer but I have not been successful. I think what I'm trying to do is simple... Using w3.css, I am trying to create a navigation menu that will include more than one dropdown menu. I have the menu working to a point. Right now if I click on the three links with sub menus, the sub menus will display. However, they do not 'hide' unless I click on the top-menu link. That is, if I click on 'Training', the sub menu appears but will only disappear if I click on 'Training' again. Of course I want the sub-menu to disappear if I click anywhere outside the sub-menu or have another sub-menu appear if I click on its top-menu link. I've attached my html file for you to have a look. Any help and guidance would be greatly appreciated. Thanks so much! Have a great day! <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <div class="w3-container"> <ul class="w3-navbar w3-light-grey"> <li><a href="#">Home</a></li> <li class="w3-dropdown-click"> <a onclick="myFunction()" href="#">Manuals <i class="fa fa-caret-down"></i></a> <div id="sub-menu" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Power Unit/Truck/Bus Safety Inspections and Standards</a> <a href="#">School Bus Safety Inspections and Standards</a> <a href="#">Trailer/Semi-Trailer Safety Inspections and Standards</a> <a href="#">Motorcycle Safety Inspections and Standards</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction2()" href="#">Forms <i class="fa fa-caret-down"></i></a> <div id="sub-menu2" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Supply Form</a> <a href="#">Backup Forms</a> <a href="#">Station Application</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction3()" href="#">Training <i class="fa fa-caret-down"></i></a> <div id="sub-menu3" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </li> <li><a href="#">Who to Call</a></li> </ul> </div> <script> function myFunction() { var x = document.getElementById("sub-menu"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction2() { var x = document.getElementById("sub-menu2"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction3() { var x = document.getElementById("sub-menu3"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> test.html
-
The intro to w3.css says "Uses standard CSS only (No jQuery or JavaScript library)" which is technically true but a bit misleading. Javascript must be enabled in the user's browser in order to use useful features like modal popups. What's the big deal? Someone might create a website using a modal popup for users to register or purchase things, only to find that visitors using screen readers because they're visually impaired can no longer participate or buy things. So the site is no longer fully accessible, which is illegal in some countries and some class action lawsuits have already happened. I'm not saying features that use scripting aren't useful, but they should come with a big accessibility health warning to remind developers to include alternative ways to access things. It's easy to forget because most development is done with scripting enabled.
-
Hello I have built a one page website based on this template - http://www.w3schools.com/w3css/tryw3css_templates_website.htm When viewed a smartphone screen the smallscreen navbar does not collapse after clicking a link and I therefore have to toggle the nav button manually. I have created a workaround in order for the site to function as desired which can be found here - http://www.davidclarkandco.co.uk/index.html - but ideally I simply wish to use a single page and have the menu to collapse on click. Thanks in advance for advice/help.
-
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. <!-- From https://www.w3schools.com/w3css/w3css_dropdowns.asp --> <div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click me</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-card-4 w3-animate-zoom"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div>
-
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!
-
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 id="topnav1" class="w3-bar"> <a href="#" class="w3-bar-item w3-button"><i class="material-icons" style="font-size:23px;color:#272828;">phone_iphone</i>01382 339 605</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">directions_bus</i>Minibus Hire</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">build</i>Autocare</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">mail</i>Contact Us</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">navigation</i>Visit Us</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">MENU ☰</a> </div> <div id="topnav2" class="w3-bar-block w3-hide w3-hide-large w3-hide-medium"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>
-
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.
-
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 www.aridsmart.com if anyone wants to check out my CSS and HTML.
-
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-width property I'm using to force my browser to render a mobile-phone screen sized output. I realize that I can go forward on the production version without the max-width field set and that will likely be the end of the issue, but I'd like to 'see it' during testing. Any thoughts?
-
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> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
-
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.
-
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 I noticed the w3-radio button, while bigger that the standard radio, aligns differently on iPhones. When I load the page in FireFox it looks the way I intend. Link to page: http://scaikeqc.org/sandbox/t6a.php This is a semi-permalink, as I've set aside the current version of the module to show you. Clearly I need something more flexible, while at the same time doesn't break the careful balance between background image and text positioning and font size. I've fallen back on the old way of using HTML tables for layout because I wasn't getting the results desired with my basic understanding of CSS. Relevant code below with relevant functions below that. Reason for using a function to post the opening HTML headers is that I use a lot of self-referencing PHP which in turns uses the header('Location: '.$_SERVER['PHP_SELF']); method of processing data before kicking back or pressing forward based on validation tests or other calculations in PHP. OpenHTML($_SESSION['EName']); print "<body style=\"max-width:400px\">\n"; ShowCaution(); ShowError(); print "<form name=\"moarch\" action=\"{$_SERVER['PHP_SELF']}\" method=\"POST\">\n"; print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n"; print "<table class=\"w3-table w3-centered\"> \n"; print "<TR><TD>Mounted Archery -- Single Shot</TD></TR>\n"; IF (is_null($_SESSION['RiderHonors'])) { printf("<TR><TD><H2>%s</H2></TD></TR>\n", $_SESSION['RiderName']); } ELSE { printf("<TR><TD><H2>%s %s</H2></TD></TR>\n", $_SESSION['RiderHonors'], $_SESSION['RiderName']); } print "</TABLE>\n"; print "</DIV>\n"; print "<div class=\"w3-display-container\">\n"; print "<img src=\"target_sm.png\" alt=\"Target\">\n"; print "<div class=\"w3-display-left w3-container\">\n"; print "<table class=\"w3-table w3-centered w3-xlarge w3-text-shadow\">\n"; print "<TR class=\"w3-left-align\">\n"; print "<TD class=\"w3-text-light-green\">$Gold<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"G\"></TD><TD></TD><TD class=\"w3-text-black\">$Red<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"R\"></TD><TD></TD><TD class=\"w3-text-white\">$Blue<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"B\"></TD><TD></TD><TD class=\"w3-text-light-gray\">$Black<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"K\"></TD><TD></TD><TD class=\"w3-text-dark-gray\">$White<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"WK\"></TD><TD></TD>\n"; print "</TR>\n"; print "</TABLE>\n"; print "</div>\n"; print "</div>\n"; print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n"; print "<table class=\"w3-table w3-centered\"> \n"; print "<TR><TD>First Pass</TD><TD>Miss<input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"M\"></TD></TR>\n"; print "</TABLE>\n"; print "</DIV>\n"; function OpenHTML($c) { print "<!DOCTYPE html>\n"; print "<html>\n"; print "<title>$c</title>\n"; print "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"; print "<link rel=\"stylesheet\" href=\"http://www.w3schools.com/lib/w3.css\">\n"; } function ShowCaution() { IF (isset($_SESSION['Caution']) AND !is_null($_SESSION['Caution'])) { print "<article class=\"w3-panel w3-yellow\">\n"; print "<P>Take Note:<BR>\n"; print "{$_SESSION['Caution']}</P></article>\n"; $_SESSION['Caution'] = NULL; } } function ShowError() { IF (isset($_SESSION['EntryError']) AND !is_null($_SESSION['EntryError'])) { print "<article class=\"w3-panel w3-red\">\n"; print "<P>You have an error in your input, please try again.<BR>\n"; print "{$_SESSION['EntryError']}</P></article>\n"; $_SESSION['EntryError'] = NULL; } }
-
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="_self"><strong>Bonorum et Malorum</strong></a>.</p> </div> </div>
-
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.
-
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.
-
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 learn what about what had changed in the ten years or so since I worked actively on this codebase, in order to pick up what they had started and migrate to something that I could maintain alongside my code. It was also decided to try and code parts of the project specifically for mobile use first. (/backstory) After playing around with W3.css I came up with a HTML template of what I'd like to get working. http://scaikeqc.org/sandbox/tf-03.html. It needs polishing, and some refinements, but its close to what I want for the mobile experience. Please note, there are no FORM tags in that page so the selects and inputs are for show only. I tried making a proper form of it, http://scaikeqc.org/sandbox/tf-03.php and it was a right mess. Every time you click on the accordion labels to expand them, the form submits, the script reloads, hilarity ensues. This introduces trash into the resultset and before I remembered to use the action tag on the form element, I crashed the GET. Is it possible to have a whole-page form broken into accordion segments? Here is a snip of the-03.php <form class="w3-form" method="post" action="<?php echo $_SERVER[PHP_SELF]?>"> <div class="w3-accordion w3-light-grey"> <button onclick="feif('Rider')" class="w3-btn-block w3-centered"> Open Rider Selection </button> <div id="Rider" class="w3-accordion-content w3-container w3-red"> <H2>Select the Rider</H2> <SELECT class="w3-select" NAME="Pname"> <?PHP IF (isset($Pname)){ printf("<OPTION VALUE=\"%s\">RiderID: %s\n", $Pname, $Pname); } else { echo "<OPTION VALUE=\"XXX\">Select Rider<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW RIDER**\n"; } ?> <OPTION VALUE="XXX">----- <OPTION VALUE="306">Johanna <OPTION VALUE="83">Aaron MacGregor <!-- 465 additional select items omitted for brevity--> <OPTION VALUE="421">Zinaida Orshima <OPTION VALUE="114">Zuriel Nightshade <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW RIDER** </SELECT> </div> <button onclick="feif('Horse')" class="w3-btn-block w3-centered"> Open Horse Selection </button> <div id="Horse" class="w3-accordion-content w3-container w3-red"> <H2>Select the Horse</H2> <SELECT class="w3-select" NAME="Hname"> <?PHP IF (isset($Hname)){ printf("<OPTION VALUE=\"%s\">HorseID:%s\n", $Hname, $Hname); } else { echo "<OPTION VALUE=\"XXX\">Select Horse<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW Horse**\n"; } ?> <OPTION VALUE="12">Unknown Mount <OPTION VALUE="XXX">----- <OPTION VALUE="103">Ace <!-- 380 additional select items omitted for brevity--> <OPTION VALUE="236">Zeus' Dream <OPTION VALUE="280">Zia <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW HORSE** </SELECT> </div> The form continues through five more containers I've not copied here. <input type="submit"> </FORM> <script> function feif(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> I have a proof-of-concept form that does work(no accordions or data validation, data entered is not retained). This one checks an events database to see which of the five games are being played and only displays the data entry containers for the games that are being run. This is why I wanted to containerize the different sections of data entry. You can poke at that form here http://scaikeqc.org/sandbox/tf-05.php. If you've gotten this far in my post, please accept my thanks for seeing it through, and my apologies for less than beautified code. I'm recycling a lot of the form code from the previous version and haven't had the time to polish non-working code.
-
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 conditions should apply. Just one example: I suppose that authors, Jan Egil and Borge Refsnes, would not be happy if somebody distributed modified file with their names without any information about changes. Even more uncertain one may feel using w3codecolor.js. On page http://www.w3schools.com/w3css/w3css_code.asp we read "You can download" it and "use". One can of course use it from the link provided by W3School. However, it is unclear if one can put this file together with one's web page (so, distribute it). Even without any changes, and without real intent of distributing it (one just puts it on other server to highlight some code, and does not want to depend on internet connection with the W3Schools server). Both files include only very short information about authors and version. It would be nice to read there more details about what users are allowed to do. I am very thankful for all the goodies W3Schools provides. These two files are very, very helpful. Probably the intent is that everyone can "free of charge, use, copy, modify, distribute this file if above copyright notice, this permission notice and a list of changes are included" (I am writing only about w3.css and w3codecolor.js). I, and probably all your fans, would be very grateful to clarify this "modification & distribution" issue.
-
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
-
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> Result: I though that it may be because the image is bigger than the text so I have tried to following: <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 w3-xlarge"> This is the first line<br> This is the second line.<br> </p> </div> </div> </header> Result: How may I correct this? By example, is this possible to set a height size in % and center the image on the height of the container? Many thanks in advance for your help!!!
-
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> </div> </div> <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> </div> </div> <div class="w3-third w3-container"> <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> </div> </div> </div> I want to edit it so that instead of just some text I want to achieve something like as below the following: Name: Holiday home Bedrooms: 3 Width: 20 So that 'Name: Bedrooms: Width:' will be static text and the info next to it will be pulled from a database. The problem is getting the info to line up nice and neat and getting it to act responsive when the size of the screen/browser is different/changed. I've tried it with a list but I just cannot work out how to get the static part 'Name: Bedrooms: Width' and then the info part 'Holiday home, 3, 20' to line up nice an neat (like it is above) and get it responsive. If someone could suggest the best way to get this to work I would be very grateful. -
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 Code Is Useless: function changeFontColor() { document.getElementsByClassName("w3-deep-purple")[0].style.color="orange"; } Although This Code Is 100% Valid,But This Just Won't Work Because Of !important. I Suggest Removing This Rule From The Future Versions Of W3.CSS In Order To Give The Ability To The Developer To Add More Interactivity To His Projects.
-
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 useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it my code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <ul class="w3-navbar w3-large w3-black w3-hide-small"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Sublink 3a</a> <a href="#">Sublink 3b</a> <a href="#">Sublink 3c</a> </div> </li> </ul> <a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()"> <div class="w3-black" style="padding: 8px 16px"> ☰ </div> </a> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Dropdown Hover</a> <ul class="w3-navbar w3-left-align" style="padding-left: 15px;"> <li><a href="#">Sublink 3a</a></li> <li><a href="#">Sublink 3b</a></li> <li><a href="#">Sublink 3c</a></li> </ul> </li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Peace and love -
W3.CSS - Can I Make Some Modifications To W3.CSS Code?
-
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!
