hikingwithu2

Members
  • Content count

    26
  • Joined

  • Last visited

Community Reputation

0 Neutral

About hikingwithu2

  • Rank
    Newbie

Contact Methods

  • Website URL
    http://www.wiegand.org

Profile Information

  • Gender
  • Location
    Barranquilla, Colombia
  1. Seriously? W3-CSS color libraries. https://www.w3schools.com/w3css/w3css_color_libraries.asp
  2. I would like to use some of the vivid color library colors as border colors, but apparently borders cannot use them. The various color libraries seem to work only as background colors, not as border colors, is this correct?
  3. Regardless of one's opinion, the fact remains that there is a problem in the /4/w3.css stylesheet, which needs to be addressed. I can't believe that I'm the only person in the world effected by this.
  4. Wrong link? So the w3.css page with info for using/linking to/downloading w3.css is incorrect? See - www.w3schools.com/w3css/w3css_downloads.asp In the many w3.css pages, click on the Tryit boxes, every one that I have checked has the same link I am using (that is why I am using that link, because the w3.css site itself uses that link. It is not my link that is the problem. The root of the problem is somewhere in the w3.css site or code. If I change <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> to <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css"> the display of the colors is all correct, same as using the link you provide. So the problem is with the w3.css version 4 stylesheet, it seems to me.
  5. I noticed on my website that some of the border colors are not working, so I came back to the W3 colors page and verified there weren't any changes to color names, then I looked at the borders page to verify that the borders have not changed, and my code is correct. But some of the colors are only displaying as grey, below are some, not all, in a test from the W3-borders Tryit Editor page (I get the same results on my own website) - <!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>Thick Border Bars</h2> <div class="w3-panel w3-leftbar w3-border-blue"> <p>I have a thick left blue border.</p> </div> <div class="w3-container w3-rightbar w3-border-indigo"> <p>I have a thick right indigo border.</p> </div> </div> <div class="w3-panel w3-topbar w3-border-cyan"> <p>I have a thick cyan top border.</p> </div> <div class="w3-panel w3-bottombar w3-border-teal"> <p>I have a thick teal bottom border.</p> </div> <div class="w3-panel w3-leftbar w3-border-red"> <p>I have a thick red left border.</p> </div> <div class="w3-panel w3-rightbar w3-border-pink"> <p>I have a thick pink right border.</p> </div> <div class="w3-panel w3-topbar w3-border-orange"> <p>I have a thick orange top border.</p> </div> <div class="w3-panel w3-bottombar w3-border-yellow"> <p>I have a thick yellow bottom border.</p> </div> <div class="w3-container w3-leftbar w3-border-deep-orange"> <p>I have a thick deep-orange left border.</p> </div> <div class="w3-container w3-rightbar w3-border-amber"> <p>I have a thick amber right border.</p> </div> <div class="w3-panel w3-bottombar w3-border-lime"> <p>I have a thick lime bottom border.</p> </div> <div class="w3-panel w3-topbar w3-border-khaki"> <p>I have a thick khaki top border.</p> </div> </div> </body> </html>
  6. OK, I got it working. Here is the code section of the page, it had a missing </div>, that's all there was to it. <div class="w3-row"> <div class="w3-half"> <div class="w3-container w3-red w3-leftbar w3-border-pink w3-round-large" style="height:260px"> <p> <b><i>Simple Present</i></b> </p> <table summary="" width="100%"> <tr> <th colspan="5"> Question Form </th> </tr> <tr> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> Do </td> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> I<br> you<br> we<br> they </td> <td rowspan="2" valign="middle" style="border-right:1px solid black"> work </td> <td rowspan="2" valign="middle" style="border-right:1px solid black"> today? </td> <td valign="middle" style="border-bottom:1px solid black"> Yes, I/you/we/they do.<br> No, I/you/we/they don't.<br> </td> </tr> <tr> <td valign="middle" style="border-right:1px solid black"> Does </td> <td valign="middle" style="border-right:1px solid black"> he<br> she<br> it </td> <td valign="middle"> Yes, he/she/it does.<br> No, he/she/it doesn't. </td> </tr> </table> </div> <div class="w3-container w3-orange w3-leftbar w3-border-brown w3-round-large" style="height:175px"> <p> <strong>Subject Pronouns</strong> =<br> I/You/We/They/He/She/It </p> <p> <strong>Object Pronouns</strong> =<br> Me/You/Us/Them/Him/Her/It </p> <p> Do you like me? </p> <p> He likes her. </p> </div> </div> <div class="w3-container w3-half w3-indigo w3-leftbar w3-border-blue w3-round-large" style="height:435px"> <p> <b><i>Simple Present</i></b> </p> <div class="w3-center"> <p> <b>3rd Person Verb Form</b> </p> </div> <div class="w3-row"> <div class="w3-container w3-quarter w3-border-bottom"> I<br> You<br> We<br> They </div> <div class="w3-container w3-threequarter w3-border-bottom"> work today.<br> cook dinner tonight.<br> drive well.<br> watch tv. </div> </div> <div class="w3-row"> <div class="w3-container w3-quarter"> He<br> She<br> It </div> <div class="w3-container w3-threequarter"> works today.<br> cooks dinner tonight.<br> drives well.<br> watches tv. </div> </div> <p> In the 3rd person form (<i>he/she/it</i>) add <i>-es</i> to verbs that end with <i>-ch, -sh, -ss,</i> and <i>-o</i>.<br> He <i>watches</i> TV.<br> She <i>washes</i> the dishes.<br> It <i>finishes</i> at 8pm. </p> <p> </p> </div> </div> </div>
  7. I have a page with several <div>'s and one of them has left and right margins that I just cannot get rid of. The basic layout is this: | 1 || 2 | | 3 || 5 | | 4 || 5 | | 6 | <div> 4 is the problem area, it has left and right margins that I cannot get rid of. I expect it to be the same width as the <div> above it (3). As you will see in the code I have enclosed the two <div>'s 3 & 4 in their own <div> which includes w3-margin-0 and w3-padding-0, and just to test it I also added the style=width:100% to the <div> 4. Yet I still have those doggone margins. They are spoiling the layout/look of the page. Please have a look and help me figure out how to get that <div>4 to be the same width as the one above it (<div>3). The problem code is the <div> with the color: orange, below the <div> with the color:red. Thanks, Chip <html> <head> <title></title> </head> <body> <div class="w3-container w3-large w3-responsive" style="max-width: 100%;"> <div class="w3-row"> <div class="w3-container w3-half w3-blue w3-leftbar w3-border-indigo w3-round-large"> <p> <b><i>Simple Present</i></b> </p> <table summary="" width="100%"> <tr> <th colspan="3"> Positive Form </th> </tr> <tr> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> I<br> You<br> We<br> They </td> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> live<br> work </td> <td rowspan="2" valign="middle"> in Miami.<br> near my cousin.<br> next to the police station. </td> </tr> <tr> <td valign="middle" style="border-right:1px solid black"> He<br> She<br> It </td> <td valign="middle" style="border-right:1px solid black"> lives<br> works </td> </tr> </table> </div> <div class="w3-container w3-half w3-green w3-leftbar w3-border-lime w3-round-large"> <p> <b><i>Simple Present</i></b> </p> <table summary="" width="100%"> <tr> <th colspan="4"> Negative Form </th> </tr> <tr> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> I<br> You<br> We<br> They </td> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> don't </td> <td rowspan="2" valign="middle" style="border-right:1px solid black"> like<br> eat </td> <td rowspan="2" valign="middle"> meat.<br> tea.<br> salad. </td> </tr> <tr> <td valign="middle" style="border-right:1px solid black"> He<br> She<br> It </td> <td valign="middle" style="border-right:1px solid black"> doesn't </td> </tr> </table> </div> </div> <p> </p> <!-- &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& --> <!-- Here starts the problem <div>'s --> <div class="w3-row"> <div class="w3-section w3-margin-0 w3-padding-0"> <div class="w3-container w3-half w3-red w3-leftbar w3-border-pink w3-round-large" style="height:260px"> <p> <b><i>Simple Present</i></b> </p> <table summary="" width="100%"> <tr> <th colspan="5"> Question Form </th> </tr> <tr> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> Do </td> <td valign="middle" style="border-bottom:1px solid black; border-right:1px solid black"> I<br> you<br> we<br> they </td> <td rowspan="2" valign="middle" style="border-right:1px solid black"> work </td> <td rowspan="2" valign="middle" style="border-right:1px solid black"> today? </td> <td valign="middle" style="border-bottom:1px solid black"> Yes, I/you/we/they do.<br> No, I/you/we/they don't.<br> </td> </tr> <tr> <td valign="middle" style="border-right:1px solid black"> Does </td> <td valign="middle" style="border-right:1px solid black"> he<br> she<br> it </td> <td valign="middle"> Yes, he/she/it does.<br> No, he/she/it doesn't. </td> </tr> </table> <!-- This is the problem <div> with the unwanted margins --> <div class="w3-container w3-orange w3-leftbar w3-border-brown w3-round-large w3-margin-0" style="height:175px; width:100%;"> <p> <strong>Subject Pronouns</strong> =<br> I/You/We/They/He/She/It </p> <p> <strong>Object Pronouns</strong> =<br> Me/You/Us/Them/Him/Her/It </p> <p> Do you like me? </p> <p> He likes her. </p> </div> </div> <!-- end of problem <div> --> <div class="w3-container w3-half w3-indigo w3-leftbar w3-border-blue w3-round-large" style="height:435px"> <p> <b><i>Simple Present</i></b> </p> <div class="w3-center"> <p> <b>3rd Person Verb Form</b> </p> </div> <div class="w3-row"> <div class="w3-container w3-quarter w3-border-bottom"> I<br> You<br> We<br> They </div> <div class="w3-container w3-threequarter w3-border-bottom"> work today.<br> cook dinner tonight.<br> drive well.<br> watch tv. </div> </div> <div class="w3-row"> <div class="w3-container w3-quarter"> He<br> She<br> It </div> <div class="w3-container w3-threequarter"> works today.<br> cooks dinner tonight.<br> drives well.<br> watches tv. </div> </div> <p> In the 3rd person form (<i>he/she/it</i>) add <i>-es</i> to verbs that end with <i>-ch, -sh, -ss,</i> and <i>-o</i>.<br> He <i>watches</i> TV.<br> She <i>washes</i> the dishes.<br> It <i>finishes</i> at 8pm. </p> <p> </p> </div> </div> </div> <p> </p> <div class="w3-container w3-pink w3-leftbar w3-border-red w3-round-large"> <div class="w3-row"> <div class="w3-center"> <strong>Unit Vocabulary</strong> </div> </div> <div class="w3-row"> <div class="w3-center"> <strong>Adjectives</strong> </div> </div> <div class="w3-row"> <div class="w3-quarter w3-container"> tall </div> <div class="w3-quarter w3-container"> sad </div> <div class="w3-quarter w3-container"> old </div> <div class="w3-quarter w3-container"> ugly </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> rich </div> <div class="w3-third w3-container"> thin </div> <div class="w3-third w3-container"> poor </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> heavy </div> <div class="w3-third w3-container"> short </div> <div class="w3-third w3-container"> happy </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> intelligent </div> <div class="w3-third w3-container"> good-looking </div> <div class="w3-third w3-container"> young </div> </div> <div class="w3-row"> <div class="w3-center"> <strong>Jobs</strong> </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> Architects design buildings </div> <div class="w3-third w3-container"> construction workers build buildings </div> <div class="w3-third w3-container"> fashion designers design clothes </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> chefs cook food </div> <div class="w3-third w3-container"> sales reps sell things </div> <div class="w3-third w3-container"> reporters write news articles </div> </div> <div class="w3-row"> <div class="w3-center"> <strong>Daily Routines</strong> </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> get up </div> <div class="w3-third w3-container"> go to bed </div> <div class="w3-third w3-container"> watch TV </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> eat breakfast </div> <div class="w3-third w3-container"> take a shower </div> <div class="w3-third w3-container"> eat dinner </div> </div> <div class="w3-row"> <div class="w3-third w3-container"> eat breakfast </div> <div class="w3-third w3-container"> start work </div> <div class="w3-third w3-container"> finish work </div> </div> </div> </div> </body> </html>
  8. Well, I wouldn't go so far as to say it isn't very well designed. Possibly this tag, ol (ordered list), has been overlooked/forgotten/disregarded for whatever reason. Is w3.css still under development? Still being updated? Or is it a dead dog?
  9. w3-ul is unordered list, so one would assume there would also be a w3-ol for an ordered list.
  10. A couple suggestions: 1. w3-ol doesn't appear to exist, will it? 2. I think it would be nice if you had a link on the w3.css homepage that has a list of updates to the w3.css stylesheet and website. Thanks.
  11. Yeah, I had a feeling that might be the case, thanks for the reply.
  12. I'm building a site in which all the pages will have 4 - 6 sections, each section will have a different background and border colors, so the basic code looks like this: <div class="w3-container w3-twothird w3-red w3-leftbar w3-border-pink">< Since I'm re-using this same code on many pages I would like to create a class that contains that list of selectors, so the classes might be called div.container1, div.container 2, etc with each container being the same except the w3-*color* and w3-border-*color* selectors. This way we can easily change the colors in the stylesheet at any time without editing every single page (there will be hundreds of them). In the website there is an external link to the online w3-css stylesheet. The site also uses a local stylesheet for other parts of the site. At this time there are about 50 pages already completed, I don't like the prospect of going back and editing every one of them if we decide to change the colors of some of the sections. Especially in the not-too-dstant future when we have many more pages completed. This might be simpler than I think, or it might not be possible. I hope it's possible. *hmmm, just thinking about this now - I suppose it would be possible to open the w3-css stylesheet, pull out the w3-container, w3-twothird, etc relevant selectors, and paste them into my own local stylesheet, creating classes called container1, container2, etc, thereby creating custom classes. Problem is that the w3-css stylesheet is subject to updates/changes, right?
  13. Correct me if I'm wrong, but doesn't the column count below equal 12? <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;"> <strong>Positive</strong> </div> <div class="w3-col l10 m10 s10"> <div class="w3-col l10 m10 s10 w3-yellow"> <div class="w3-col s2">I</div> <div class="w3-col s2">am</div> <div class="w3-col s2">I'm</div> <div class="w3-col s2">working.</div> <div class="w3-col s2"></div> I see col-2 (green), plus the following 5 cols which are all 2, for a total of 12. Is this not correct?
  14. I discovered the problem - there is no device detection when a phone or tablet loads the page. I am using the LMS called ATutor. I have posted a message in their forums asking where in the LMS file I can insert custom headers. When I use this code in the LMS I cannot include anything above, and including, the <body> tag, therefore I cannot just insert the meta tag(s) in with the content code. Here's the code, I wonder if somebody can test it on a tablet or phone and tell me if it actually displays correctly? Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <title></title> </head> <body> <!-- First table for positive form verb to be --> <div class="w3-row w3-center"> <!-- this is the first set of rows, but has to be w3-col to work --> <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;"> <strong>Positive</strong> </div> <div class="w3-col l10 m10 s10"> <div class="w3-col l10 m10 s10 w3-yellow"> <div class="w3-col s2">I</div> <div class="w3-col s2">am</div> <div class="w3-col s2">I'm</div> <div class="w3-col s2">working.</div> <div class="w3-col s2"></div> </div> <div class="w3-col l10 m10 s10 w3-indigo"> <div class="w3-col s2">He<br>She<br>It</div> <div class="w3-col s2"><br>is<br></div> <div class="w3-col s2">He's<br>She's<br>It's</div> <div class="w3-col s2"><br>working.<br></div> <div class="w3-col s2"><br></div> </div> <div class="w3-col l10 m10 s10 w3-red"> <div class="w3-col s2">We<br>You<br>They</div> <div class="w3-col s2"><br>are<br></div> <div class="w3-col s2">We're<br>You're<br>They're</div> <div class="w3-col s2"><br>working.<br></div> <div class="w3-col s2"><br></div> </div> </div> </div><!-- end of first table --> <!-- Second table for negative form verb to be --> <div class="w3-row w3-center"> <!-- this is the second set of rows, but has to be w3-col to work --> <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;"> <strong>Negative</strong> </div> <div class="w3-col l10 m10 s10"> <div class="w3-col l10 m10 s10 w3-yellow"> <div class="w3-col l2 m2 s2">I</div> <div class="w3-col l2 m2 s2">am</div> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2">I'm not</div> <div class="w3-col l2 m2 s2">working</div> </div> <div class="w3-col l10 m10 s10 w3-indigo"> <div class="w3-col l2 m2 s2">He<br>She<br>It</div> <div class="w3-col l2 m2 s2"><br>is<br></div> <div class="w3-col l2 m2 s2">He's not<br>She's not<br>It's not</div> <div class="w3-col l2 m2 s2">He isn't<br>She isn't<br>It isn't</div> <div class="w3-col l2 m2 s2"><br>working.<br></div> </div> <div class="w3-col l10 m10 s10 w3-red"> <div class="w3-col l2 m2 s2">We<br>You<br>They</div> <div class="w3-col l2 m2 s2"><br>are<br></div> <div class="w3-col l2 m2 s2">We're not<br>You're not<br>They're not</div> <div class="w3-col l2 m2 s2">We aren't<br>You aren't<br>They aren't</div> <div class="w3-col l2 m2 s2"><br>working.<br></div> </div> </div> </div><!-- end of second table --> <!-- Third table for positive question form verb to be --> <div class="w3-row w3-center"> <!-- this is the third set of rows, but has to be w3-col to work --> <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;"> <strong>Positive<br>Question</strong> </div> <div class="w3-col l10 m10 s10"> <div class="w3-col l10 m10 s10 w3-yellow"> <div class="w3-col l2 m2 s2">Am</div> <div class="w3-col l2 m2 s2">I</div> <div class="w3-col l2 m2 s2">working?</div> <div class="w3-col l1 m1 s1">Yes,</div> <div class="w3-col l1 m1 s1">I'm</div> <div class="w3-col l2 m2 s2">working.</div> </div> <div class="w3-col l10 m10 s10 w3-indigo"> <div class="w3-col l2 m2 s2"><br>Is</div> <div class="w3-col l2 m2 s2">he<br>she<br>it</div> <div class="w3-col l2 m2 s2"><br>working</div> <div class="w3-col l1 m1 s1"><br>Yes,</div> <div class="w3-col l1 m1 s1">he's<br>she's<br>it's</div> <div class="w3-col l2 m2 s2"><br>working</div> </div> <div class="w3-col l10 m10 s10 w3-red"> <div class="w3-col l2 m2 s2"><br>Are</div> <div class="w3-col l2 m2 s2">we<br>you<br>they</div> <div class="w3-col l2 m2 s2"><br>working?</div> <div class="w3-col l1 m1 s1"><br>Yes,</div> <div class="w3-col l1 m1 s1">we're<br>you're<br>they're</div> <div class="w3-col l2 m2 s2"><br>working.</div> </div> </div> </div><!-- end of third table --> <p></p><!-- fourth table for negative question form verb to be --> <div class="w3-row w3-center"> <!-- this is the fourth set of rows, but has to be w3-col to work --> <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 293px;"> <strong>Negative<br>Question</strong> </div> <div class="w3-col l10 m10 s10"> <div class="w3-col l10 m10 s10 w3-yellow"> <div class="w3-col l1 m1 s1">Am</div> <div class="w3-col l1 m1 s1">I</div> <div class="w3-col l2 m2 s2">working?</div> <div class="w3-col l1 m1 s1">No,</div> <div class="w3-col l3 m3 s3">I'm not</div> <div class="w3-col l2 m2 s2">working.</div> </div> <div class="w3-col l10 m10 s10 w3-indigo"> <div class="w3-col l1 m1 s1"><br><br>Is</div> <div class="w3-col l1 m1 s1"><br>he<br>she<br>it</div> <div class="w3-col l2 m2 s2"><br><br>working?</div> <div class="w3-col l1 m1 s1"><br><br>No,</div> <div class="w3-col l3 m3 s3">he's not<br>he isn't<br>she's not<br>she isn't<br>it's not<br>it isn't</div> <div class="w3-col l2 m2 s2"><br><br>working.</div> </div> <div class="w3-col l10 m10 s10 w3-red"> <div class="w3-col l1 m1 s1"><br><br>Are</div> <div class="w3-col l1 m1 s1"><br>we<br>you<br>they</div> <div class="w3-col l2 m2 s2"><br><br>working?</div> <div class="w3-col l1 m1 s1"><br><br>No,</div> <div class="w3-col l3 m3 s3">we're not<br>we aren't<br>you're not<br>you aren't<br>they're not<br>they aren't</div> <div class="w3-col l2 m2 s2"><br><br>working.</div> </div> </div> </div><!-- end of third table --> </body> </html>
  15. hmm, no delete option on these posts. Anyway, I did find a couple issues and corrected those, but it still does not display properly on my phone.The problems are: no colors, and the entire thing is reduced to one long column.