Jump to content

Search the Community

Showing results for tags 'w3css'.

  • 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. I have a html form designed using W3CSS. There is a SELECT field which I have used an ONCHANGE command, & this submits the form when the select is changed. HOWEVER, the button, does not submit the form. It just moves the page to the DIV anchor. At the top of the page I have the current time - hh:mm:ss. When I press the w3blue button, (select animal) the page moves, so the 'menu' div is at the top of the visible page, However the clock/time at the top doesn't change. <form class="w3-container" action="/animals/#menu"> <select class="w3-select" name="viewpet" onchange="this.form.submit()"> <option value="">Select Animal</option> <option value="220000001" selected="selected">220000001, cat, Jerry, (m) scottish_fold</option> <option value="220000002" >220000002, cat, Jerry, (f) toyger</option> </select> <button class="w3-btn w3-blue">Select Animal</button> </form> I'm going to add a few extra input values/fields in, But what do I do to fix the form so the blue button actually submits the page & refreshes it..? i am following this website. https://www.w3schools.com/w3css/w3css_input.asp (Half the examples don't even have a submit button to test...) EDIT: ive got a 2nd form on the same page, the submit button is exactly the same (very similar) - Both forms have no ID's etc - no names.. It just submits "this form". I'm not sure why 1 form works & one form doesn't. (the div ID is above both the forns - To see part of the visible page I want folk directed to.. BOTH forms go to the sane page/div ID. )
  2. The project has a number of huge word wall pages where its desirable to tag various persons with a popup with their extended info, several dozen per page. After I finish my work on the site, I expect less skilled operators to add content at a later time, so I want to automate as much of the process as I can to prevent typos breaking the pages. There ought to be a way... There really ought to be a way where I can put this.... <button class='w3-button w3-round [Lookup color from argument 3] [lookup hover-color from argument 3]' onclick="document.getElementById('[argument 1]').style.display='inline'">[argument 2]</span> into a shortcut function call like.... <script> nameTag(john_doe123, John, A); </script> Where the output sent to the browser engine is this: <button class='w3-button w3-round w3-red w3-hover-blue' onclick="document.getElementById('john_doe123').style.display='inline'">John</span> There really must be a viable way to not hand code every single instance of those button calls... How do I do it? Every method I've devised so far doesn't work. I feel like the solution is mockingly close too. <script> funtion nameTag(a, b, c) { //assume code here for taking 'C' above and calculating what colors to use// let color1 = "w3-red"; let color2 = "w3-hover-blue"; let result = "\"<span class='w3-tag w3-round\"" + color1 + color2 + "' onClick=\"document.getElementById('" + arg1 + "').style.display='inline'\">" + arg2 + "</span>"; } </script> Which isn't returning anything. I've thought myself into a corner and need help.
  3. Good evening, How can I apply the W3.css stylesheet/lib to a specific and only section in an HTML page, like a div? What is the best approach? I ask because loading the CSS file messes with the formatting of some pages completely. Thank you. Kepler
  4. https://www.w3schools.com/w3css/w3css_input.asp Hi, I'm using w3css and have a problem with a select field. Ive got a form (obviously) with a big TABLE - rows/columns. in one of the TD fields Ive got a bit of text, and then a SELECT field. The options within the select field are January, Feb, mar etc.. December Now - The select field is appearing BELOW the text i want - even thougfh the width of the TD field can obviously contain both the text & select fields in one line. i'm trying [CODE]<select class="w3-select" style='display: inline-block; float: left;' name="MYNAME" onchange="this.form.submit()">[/CODE] However i cant get the select field to be the same line as the proceeding text . any advice ? EDIT: the SELECT field fills the whole width of the TD field. So i can see that the words & select could easily fit on 1 line
  5. Hello. The colspan command is being depreciated and i am wondering waht is the valid / new way to do a colspan using css (Validated on an html validator) I have a site with multiple lines of data ( 20-30+ ) in a table format & i want the information in one row to align vertically with the line below HOWEVER its getting too wide, so i want to move some information into the line below each row, and use colspan - to make it take up the whole row, EXAMPLE :- ROW1 - DATA1. ROW1 - DATA2. ROW1 - DATA3. ROW1A - LONG TEXT COVERNG WHOLE ROW ROW2 - DATA1. ROW2 - DATA2. ROW2 - DATA3. ROW2A - LONG TEXT COVERNG WHOLE ROW ROW3 - DATA1. ROW3 - DATA2. ROW3 - DATA3. ROW3A - LONG TEXT COVERNG WHOLE ROW
  6. Hello, I hope everyone is having a good new year so far. Ive got a strange issue which I cant figure out how to resolve. In October, I added a newsletter to our site. Everything looks Ok & works. (I used the W3 validation tool https://validator.w3.org - Everything checks out & its valid - except for 3rd-party website information). Last night / today I added a 2nd newsletter. the problem is, the "footer" that should appear at the bottom of the page, now sits on the right-side of the screen where (vertically) the text of the newsletter starts off. I also validated this page & everything checks out (except the third-party HTML code). with the validations - there are no errors with open/closed DIV tags, everything as it should be. Ive made a check & the "text" of the newsletter only contain BR tags (self closing). I cannot see why the 'footer' isnt at the bottom of the page. Ive even (now) added the BLOCK command - To force it to the next line. But no, no changes. div id="footer" style="display: block" http://animals.kwister.com/newsletters/2020_10 - October 2020 is Ok (on my screen), but the January 2021 version is showing the problem.
  7. 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 ?
  8. I want multiple accordions on the website and that only one is open at a time. my code looks like this: HTML: <button onclick="openDropdown('drop1')" class="w3-button w3-block w3-black w3-left-align">Category 1</button> <div id="drop1" class="category w3-hide w3-animate-top"> <a href="#" class="w3-button w3-block w3-left-align">Link 1</a> <a href="#" class="w3-button w3-block w3-left-align">Link 2</a> <a href="#" class="w3-button w3-block w3-left-align">Link 3</a> </div> <button onclick="openDropdown('drop2')" class="w3-button w3-block w3-black w3-left-align">Category 2</button> <div id="drop2" class="category w3-hide w3-animate-top"> <a href="#" class="w3-button w3-block w3-left-align">Link 4</a> <a href="#" class="w3-button w3-block w3-left-align">Link 5</a> <a href="#" class="w3-button w3-block w3-left-align">Link 6</a> </div> JS: function openDropdown(element) { categories.forEach(category => { if(category.id !== element && category.className.indexOf("w3-show") !== -1){ category.className= category.className.replace(" w3-show", "") } }) let target = document.getElementById(element) if (target.className.indexOf("w3-show") !== -1) { target.className = target.className.replace(" w3-show", "") } else { target.className += " w3-show" } } categories is a list of all elements with the category class attached. The problem is that the website is scrolling up if drop1 is open and i try to open drop2.
  9. .w3-table-center{margin-left:auto;margin-right:auto} .w3-table-70{width:70%} Hello. I'm trying to follow W3 standards (with a few additions above to the standard CSS) So far, I have this :- <div class="container w3-center"> <div class="container w3-panel w3-margin w3-center w3-table-half w3-table-center w3-yellow"> TEXT </div> </div> basically i want the 'panel' to be 60% or 70% the width of the screen - i CAN do this However it is still flushed to the left side of the screen - but taking 60/70% of my screen - depening on how i adjust the code.. I even tried o add an outer div with center command - but thats still flushed ' to the left.. i CAN do this with a TABLE. does anyone know how i do it with a div / panel / container ? make it centered, & not take over the whole width of the screen.
  10. Hello. I have a bit of a problem with W3CSS and INPUTS (textarea) https://www.w3schools.com/w3css/w3css_input.asp Textarea is not referenced with the above page. Here is my HTACCESS :- RewriteRule ^([0-9]+)?$ /PATHNAME/yours_description.php?entity=$1 [nc,l,QSA] if i go in the URL - path/67 my script activates and the vaklue of $entity is retrieved. HOWEVER - PROBLEM. I want a TEXTAREA to be sent as a POST value. But no matter what I do in w3css, the textarea comes out as blank. (my php script also has print_r for $_GET and $_POST - the $description value isnt passed at all.) Here is my template <form class="w3-container w3-light-grey" action="/yours/description/{$entity}" type="POST"> <label>Your Business description</label> <textarea class="w3-input w3-border-0" name="description" rows="6" cols="45" value="{$description}"></textarea> <button class="w3-btn w3-brown">Update</button></p> </form> Is it possible to use a combination of GET and POST ? I'll rather use GET so a person can easily switch entities. But the rest of the form elements need to be in POST.
  11. gordonisnz

    W3css CSS file

    Hi, who or where do we contact to make improvements to W3css ? https://www.w3schools.com/w3css/4/w3.css Im using the above CSS - however ive added my own, which may be useful to the wider community. .w3-table-center{margin-left:auto;margin-right:auto} .w3-table-half{width:49.99999%} .w3-table-5{width:5%} .w3-table-10{width:10%} .w3-table-15{width:15%} .w3-table-20{width:20%} .w3-table-25{width:25%} .w3-table-30{width:30%} .w3-table-35{width:35%} .w3-table-40{width:40%} .w3-table-45{width:45%} .w3-table-50{width:50%} .w3-table-55{width:55%} .w3-table-60{width:60%} .w3-table-65{width:65%} .w3-table-70{width:70%} .w3-table-75{width:75%} .w3-table-80{width:80%} .w3-table-85{width:85%} .w3-table-90{width:90%} .w3-table-95{width:95%}
  12. http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/w3css/w3css_tooltips.asp.html Hello. i'm looking at the W3css system, and I'm wondering if there is a hover process to REPLACE text. The above tooltip is waht im after but it INSERTS text instead of replaces it. Is there a way to hover, and replace the text with an A HREF tag / link ? PS Ive actually changed my PC & lost the URL for the w3-css tutorials. The one im familiar with is very similar to the above URL. however it looks better presented / display.
  13. I'm using w3css, and want to create a number of panels on a page. Each will contain a brief summary of another page, and when the panel is clicked, the user should be taken to that other page. Here is a simplified extract from my current HTML. It looks how I want it to, but obviously nothing happens when you click the panel. <div class="w3-panel"> <h2>Panel Title</h2> <p>A summary of the page that the user will be taken to.</p> </div> This is what I've tried unsuccessfully so far: 1. Just adding "href=..." to the div. <div class="w3-panel" href="other-page.html"> .... </div> This makes no difference, the href seems to be ignored. 2. Using the <a> tag within the div. <div class="w3-panel"> <a href="other-page.html"> ... </a> </div> Clicking now works, but all the text is underlined like a standard hyperlink. It may be possible to amend the .CSS file to prevent underlining, but there are hyperlinks within text elsewhere on the page that I want to remain underlined. 3. Turning the panel into a button. <div class="w3-panel w3-button" href="other-page.html"> ... <div> Clicking works, but the text is centred and doesn't wrap. So by default the panel becomes very wide, and if I try to control the width, the end of the line of text isn't visible. Thanks!
  14. 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>
  15. 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
  16. Hi, I'm wondering if there is an equivalent for the sticky footer tutorial in W3CSS. Or this flexbox method. --> preferred result HTML <body class="Site"> <header>…</header> <main class="Site-content">…</main> <footer>…</footer> </body> CSS .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; } I'm only have so so working knowledge on the topic CSS and would like to LIMIT my beginning to W3.CSS as I find it comfortable to use and learn at the same time. And learning any other 'framework' just confuses me more.
  17. https://www.w3schools.com/w3css/w3css_panels.asp Hello. I'm trying to make a panel - this works, however it takes up 100% of the available width. Is there a way to make the panel A ) auto-adjust to the content of the text, and/or B ) a specific width - eg 50% (of the available width of div - NOT 50% of the screen-size...)
  18. Hi folks, it's my first post here and while I have been learning a lot from w3schools in the past (compliments!!), I am just about to familiarize myself with w3.css. For a start, I choose the architects template as basis for a project portfolio as joiner and just started to replace pictures etc. from the original template with my own stuff. However, I would like to use the HTML5 semantic layout (header, footer, aside...) as much as possible and the w3css tutorial also states that it's possible because the w3-* classes can be applied to whichever HTML element. So I tried to rewrite the images with top-left captions in the project section of the template into <figure> + <figcaption> elements, as semantically this is exactly what happens on the page. However doing so, the figure-element has much bigger margins/paddings as before, thus breatking the multicolumn-layout - please see https://portfolio.sven-goettner.de - the 4 pics with green background are created using my new semantic markup, while the 4 pics below with the red background are the original <div>-only code from the template. The difference is obvious... I tried various combinations of which original <div>-tag to change into the respective semantic counterparts, but none was able to produce the original looks. Could you please redirect me to a resource where I can learn how to fix this or tell me straight away what I am doing wrong? Thank you very much for your support!
  19. https://www.w3schools.com/w3css/w3css_input.asp I am trying to follow the above examples. Forms with INPUT and SELECT are easy enough, however the above page has no examples if how TEXTAREA is used ? ive used textarea successfully on normal forms, however I cant seem to get it working on W3CSS. All I see is a single line - Not multiple lines / textarea. has anyone got an example using W3CSS & multiple lines ? If I dont use inline-block, the input takes up the WHOLE line. i want label & input on same line. and yes, i am aware of readonly. i'll remove that after testing. The latest code I'm using now is:- <label style='display:inline-block;'><strong>Description</strong></label> <input class="w3-input" type="textarea" style='width: 75%;display:inline-block;' rows='4' cols='60' name="description" value="{$articledetails.description}" readonly><br />
  20. Hi, I have rebuild a smarty-template that produces a menu from the cms-database. It can handle multiple levels for the navigation. I have it almost working the only thing is that alle dropdowns are opened upon the first level hover. It can be seen at http://c-m-s.pw/index.php?page=testen_w3css My question, is it possible to use hover for multiple level dropdowns? I cannot use "on click" because the toplevel is also a link to a page. Any ideas how to solve this? Regards, Jan
  21. Dear Sir, first of all thank you for such helpful website. Now as w3css framework is very useful and easy to implement. I want to suggest if following modification is possible in your new version of w3css. 1. Menu structure with ul and li elements rather than using only a tags. That will be easily implementable in WordPress default menu structure and having drop-down facility also available. 2. Menu items are being used 2 times for making it responsive rather it should use items only single time.
  22. Hello. 1) i have the w3.css file correctly uploaded. 2) My html code correctly points to the css file. 3) my HTML validates in an online validator. Basically, ive been re-doing an entire page/site with using W3css now. Ive added the heading / title part of the HTML - & that is correct - using containers. However the visible output is NOT using w3css. Its just using regular HTML (& not doing what i want.) is there a check I can use online to validate the W3css code ? Ive got four or so other sides that follow the same format as im using now & they display correctly. ALSO - If the (visible) 'header' part is using W3 correctly, but there are problems below, should the top be displayed correctly ? or is the whole thing broken. ? Edit: http://newtib.kwister.com/login
  23. Hello. I'm upgrading an old site - & created a new subdomain & copying all the code slowly - upgrading to W3CSS & validating the code.. Anyway, On the left menu, There is a side-menu. I can click on it & it disapears / re-appears. It was working up until a few days ago. But i continued upgrading it today & noticed that it no longer opens/closes. Ive double-checked & the javascript names are there - it looks OK. ive checked the full HTML & can see no duplicate ID's (2 ID's using the same name etc..) so everything looks OK. However it does not work. can anyone assist me in finding out what is wrong ? PS Ive sone a validation check on a few pages & they do validate. This is a simple page (less HTML code) - http://foe-new.kwister.com/acronym Thank you EDIT: I was not editing / upgrading the side-bar today - I was transferring other files. I do not know why the sidebar does not open/close.
  24. I'm having trouble using the w3-col feature to arrange these captioned pictures. I want to make the containers with less text match the height of the first container that has more type in it. At full screen everything displays correctly, but once the text on the first image takes an extra line, the rows below get all jumbled up. I don't want to use a table or cells because I want them to go down to 2 wide on small devices. Thanks in advance for any help. Heres the code; <!doctype html> <html> <head> <meta charset="utf-8"> <title>Red Stick Sports - Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-container w3-red w3-margin-bottom"> <h1>Our Services</h1> </div> <div class="w3-row"> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/br-blues-black-2b-jersey.jpg" style="width:100%"> <p>One color prints come out great with our design included pricing. </p> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/lsu-tiger-eye.jpg" style="width:100%"> <p>We are a licensed printer for LSU. </p> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/dream-logos-full.jpg" style="width:100%"> <p>4 Color Process prints can simulate photographs.</p> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/br-blues-black-2b-jersey.jpg" style="width:100%"> <div class="w3-container"> <p>One color prints come out great with our design included pricing. <b></b></p> </div> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/lsu-tiger-eye.jpg" style="width:100%"> <div class="w3-container"> <p>We are a licensed printer for LSU. </p> </div> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom"> <div class="w3-container"> <img src="images/home/dream-logos-full.jpg" style="width:100%"> <div class="w3-container"> <p>4 Color Process prints can simulate photographs.</p> </div> </div> </div> </div> </body> </html>
  25. I just converted my ancient website over to using w3css. I am wondering if there is a way to vertically center text in a navigation bar made with w3-bar (see attached image). I am trying to recreate an ancient navigation banner from 1998 (See other attached image.) Any tips would be appreciated. In doing some web searches, I did find one or two with the same question, but neither solution worked for me.
  • Create New...