Jump to content

Search the Community

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

  1. 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 image tag, so I removed the "background-image" from the above css code and added an <img src="/w3images/parallax1.jpg"> tag under the div where the class name was bgimg-1: <!-- First Parallax Image with Logo Text --> <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <img src="/w3images/parallax1.jpg"> <div class="w3-display-middle" style="white-space:nowrap;"> <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span> </div> </div> However, the image now has an empty white space from it's right side and I can't make it full. Does anybody know how to fix that?
  2. Hi, I searched the forums but haven't found an answer about this. I have created a simple eBay template based on w3.css inline style sheet. When I paste into the eBay form it passes checks and the mobile test also works. When I publish the advert, however, the images in Chrome, IE, Firefox (latest versions) all are fixed at original size. If I browse from my mobile phone, however, the resizing works well and appears as intended. Any idea why it doesn't work on desktop browsers? Advert is here: https://www.ebay.co.uk/itm/202385270343 and the template I created: <!DOCTYPE html> <html> <title>Keith eBay Template 2018</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> <style> body,p,a,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif} </style> <body> <div class="w3-container w3-light-green"> <h2>Harry Potter and the Philosopher's Stone</h2> <h4>Ted Smart First Edition, Hardback, 3rd Print</h4> <div class="w3-panel w3-round-large w3-khaki"> <h3>Description</h3> <p>This is an auction for my Harry Potter and the Philosopher's Stone Ted Smart First Edition. It is a 3rd Print as you can see from the inside cover. These are still highly sought after and I'm sure will continue to gain value over time!</p> <p>This edition has lived for at least 10 years in a box in a cool dry cupboard, and prior to that on a shelf in the shade so the cover hasn't faded at all. There is a little wear that can be seen to the top edge of the sleeve but there are no marks on or in the book itself.</p> <p>How do you identify which edition and print run? I found the following link helpful:</p> <p></p> <a href="https://www.peterharrington.co.uk/blog/is-my-harry-potter-book-valuable-2/" target=_blank">Peter Harrington - Is my Harry Potter Book Valuable</a> </p> </div> <div class="w3-panel w3-round-large w3-khaki"> <h3>Shipping</h3> <p>I will ship this item using the Hermes ParcelShop service. If you would like me to use an alternate courier please contact me. </div> <div class="w3-panel w3-round-large w3-khaki"> <h3>Photographs</h3> <img class="w3-image w3-round-large" src="https://image.ibb.co/gFRCJo/IMG_2036.jpg" style="width:100%"> <img class="w3-image w3-round-large" src="https://image.ibb.co/jn5sjT/IMG_2041.jpg" style="width:100%"> <img class="w3-image w3-round-large" src="https://image.ibb.co/iGJWB8/IMG_2037.jpg" style="width:100%"> <img class="w3-image w3-round-large" src="https://image.ibb.co/cBfiPT/IMG_2039.jpg" style="width:100%"> <img class="w3-image w3-round-large" src="https://image.ibb.co/kzuk4T/IMG_2038.jpg" style="width:100%"> </div> </div> </body> </html>
  3. nampara17

    W3.css modal forms issue with mobiles

    When you add a form that is modal and view on a mobile device (apple mostly) the background still scrolls with your finger. This creates a problem as the form fields (Inputs) do not line up and it almost impossible to edit or add text to input fields as you cannot select them. To reproduce just run the modal login example on your mobile phone and move your finger then try to add text to the input fields - !
  4. absolutebeginner

    W3.CSS Card Heights

    Hi everyone, I borrowed part of the Marketing / Website Template (W3.CSS), specifically the <!-- Work Row --> portion. It looks fantastic, but according to the device browser, (specifically phones and tablets) when in "landscape" mode, the "w3-card" divs have different height according to the text. I've been trying for days to find a solution - flexbox, w3-cell, pseudo-elements - mostly way above my understanding, and nothing has worked so far. Wouldn't be surprising if I've found a valid solution and mucked it up because of my inexperience Anyway, here's the code from the template. Maybe delete <p>Blablabla</p> from one one of the divs inside the cards to see the issue. Actually the length of text I have inside those divs results in the cards showing the same height down to 1440px, any smaller results in the cards showing unequal height. <!-- Work Row --> <div class="w3-row-padding w3-padding-64 w3-theme-l1" id="work"> <div class="w3-quarter"> <h2>Our Work</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/fjords.jpg" alt="Vernazza" style="width:100%"> <div class="w3-container"> <h3>Customer 1</h3> <h4>Trade</h4> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> </div> </div> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/lights.jpg" alt="Cinque Terre" style="width:100%"> <div class="w3-container"> <h3>Customer 2</h3> <h4>Trade</h4> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> </div> </div> </div> <div class="w3-quarter"> <div class="w3-card w3-white"> <img src="/w3images/mountains.jpg" alt="Monterosso" style="width:100%"> <div class="w3-container"> <h3>Customer 3</h3> <h4>Trade</h4> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> <p>Blablabla</p> </div> </div> </div> </div>
  5. absolutebeginner

    Accordion Javascript to change button text

    I have some W3.CSS accordions on a webpage based on this tutorial. They work fine, but I'd like to change the button text too (not just show/hide the div) When shown, I'd like the button to show "Click for details". When hidden, I'd like the button to show "Hide details". Thanks in advance for any assistance/advice you can give me.
  6. Kolin456

    Input field text not visible

    Text in input field isnt visible. I'm trying to create a nav with an input field using w3.css. When I input text, nothing comes up. And also how do I remove the hover effect in w3.css? Thanks a lot
  7. Coffeebuzz

    W3 website templates?

    if i want to use a free ws.ccs website templates, do i have to keep it linked to the w3 site and the other sources i.e. cloudflare? or can i download the source files i.e. ( <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> ) and rename them to my servers? thanks
  8. Hi, I need to reference the w3.css stylesheet on a server for a competition (building a website is required and we want a good looking one, but we can't have the stylesheet reference a link it has to be on the server). When I went to download the css the link provided me with a page filled with a bunch of code that I couldn't fully understand, but it did not download any files. Anyways I simply don't know what I'm doing and would appreciate some help on this. Thanks
  9. sue

    W3.css Tabs

    Hi, I am using the w3.css tabs and have a customised cursor. However the cursor will not work over the tabs. What do I need to set to get it to work over the tabs also?
  10. 1. Glad that there is no conflict of w3.css with bootstrap. 2. But materialize.css ruins w3.css which also disturbs my mind. Lets build our own conflict free materialize css or some edits to w3.css 3. Wappalyzer doesnt recognize w3.css as a technology. Please help me work on these.
  11. Jorgensen

    w3.ccs -

    hi i'n new here - i have done homepage designs on and off for the last twenty as a hobby (i'm no a programmer), mostly using serverside php and the tabels for building the side at clientside. it's now time to update the company site, and that the mobiles has come into the scene i have searched the net to find out how to set flexible sites, and i'ts my impression that i can do a lot with w3.css. but as this is all new to me i have got some problems / questions. i use a <div class="w3-row"> to display some items, and every item is in their own <div class="w3-col l4 w3-margin-bottom"> but if one of the items has more text than others, then the layout jumps around. i'm sure the is a way to avoid this, and that it's quite simple - but i just cant figure out how :-( can anyone help? thanks jorgensen
  12. 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
  13. 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
  14. 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.
  15. 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.
  16. 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>
  17. 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!
  18. 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 &#9776;</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>
  19. Wanderlust

    w3.css: w3-panel breaks CSS Grids

    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.
  20. kahlin

    W3.CSS Dropdown content issues

    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.
  21. Sandor

    Designing for mobile -- short pages

    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?
  22. JoshuaVdM

    W3.CSS: responsively crop image to square

    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
  23. 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.
  24. 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; } }
  25. raylaur

    w3-accordion-content problem

    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>
×