Jump to content

hikingwithu2

Members
 View Profile  See their activity

  • Posts

    48

  • Joined

  • Last visited

 Content Type 

Everything posted by hikingwithu2

  1. hikingwithu2
    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>
  2. hikingwithu2
    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>
  3. hikingwithu2
    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?
  4. hikingwithu2
    w3-ul is unordered list, so one would assume there would also be a w3-ol for an ordered list.
  5. hikingwithu2
    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.
  6. hikingwithu2
    Yeah, I had a feeling that might be the case, thanks for the reply.
  7. hikingwithu2
    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?
  8. hikingwithu2
    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?
  9. hikingwithu2
    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>
  10. hikingwithu2
    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.
  11. hikingwithu2
    <!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> <!-- First table for positive form verb to be --> <div class="w3-row w3-center w3-grey"> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2">Pronoun</div> <div class="w3-col l2 m2 s2">To Be</div> <div class="w3-col l2 m2 s2">Contraction</div> <div class="w3-col l2 m2 s2">Verb</div> <div class="w3-col l2 m2 s2"> </div> </div> <div class="w3-row w3-center"> <div class="w3-col l2 m2 s2 w3-blue" style="height:158px"> <br> <br> <br><b>Positive</b></div> <div class="w3-col l2 m2 s2 w3-green">I</div> <div class="w3-col l2 m2 s2 w3-green">am</div> <div class="w3-col l2 m2 s2 w3-green">I'm</div> <div class="w3-col l2 m2 s2 w3-green">working.</div> <div class="w3-col l2 m2 s2 w3-white"> </div> <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>is<br> </div> <div class="w3-col l2 m2 s2 w3-indigo">He's<br>She's<br>It's</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-white"> <br> <br> </div> <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div> <div class="w3-col l2 m2 s2 w3-red"> <br>are<br> </div> <div class="w3-col l2 m2 s2 w3-red">We're<br>You're<br>They're</div> <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-white"> <br> </div> </div> <!-- end of first table --> <!-- second table for negative form of verb to be --> <div class="w3-row w3-center w3-grey"> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2">Pronoun</div> <div class="w3-col l2 m2 s2">To Be</div> <div class="w3-col l2 m2 s2">Contraction</div> <div class="w3-col l2 m2 s2">Contraction</div> <div class="w3-col l2 m2 s2">Verb</div> </div> <div class="w3-row w3-center"> <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Negative</b></div> <div class="w3-col l2 m2 s2 w3-yellow">I</div> <div class="w3-col l2 m2 s2 w3-yellow">am</div> <div class="w3-col l2 m2 s2 w3-yellow">I'm not</div> <div class="w3-col l2 m2 s2 w3-yellow"> </div> <div class="w3-col l2 m2 s2 w3-yellow">working</div> <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>is<br> </div> <div class="w3-col l2 m2 s2 w3-indigo">He's not<br>She's not<br>It's not</div> <div class="w3-col l2 m2 s2 w3-indigo">He isn't<br>She isn't<br>It isn't</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div> <div class="w3-col l2 m2 s2 w3-red"> <br>are<br> </div> <div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div> <div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div> <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div> </div> <!-- end of second table --> <!-- third table for question form of verb to be --> <div class="w3-row w3-center w3-grey"> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2">To Be</div> <div class="w3-col l2 m2 s2">Pronoun</div> <div class="w3-col l2 m2 s2">Verb</div> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2"> </div> </div> <div class="w3-row w3-center"> <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Question</b></div> <div class="w3-col l2 m2 s2 w3-yellow">Am</div> <div class="w3-col l2 m2 s2 w3-yellow">I</div> <div class="w3-col l2 m2 s2 w3-yellow">working?</div> <div class="w3-col l2 m2 s2 w3-yellow">Yes, I am.</div> <div class="w3-col l2 m2 s2 w3-yellow">No, I'm not.</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>Is<br> </div> <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div> <div class="w3-col l1 m1 s1 w3-indigo"> <br>working?<br> </div> <div class="w3-col l1 m1 s1 w3-indigo">No<br>-<br>Yes</div> <div class="w3-col l1 m1 s1 w3-indigo">he<br>she<br>it</div> <div class="w3-col l1 m1 s1 w3-indigo">isn't<br>-<br>is</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-red"> <br>Are<br> </div> <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div> <div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div> <div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div> <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div> </div> <!-- end of third table --> </body> </html>
  12. hikingwithu2
    I have created a "table" using css responsive only, and it looks fine on my laptop, but on my phone it is completely hosed. Here is the code, maybe somebody can take a look and clue me in on why it doesn't work on my phone - <!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> <!-- First table for positive form verb to be --> <div class="w3-row w3-center w3-grey"> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2">Pronoun</div> <div class="w3-col l2 m2 s2">To Be</div> <div class="w3-col l2 m2 s2">Contraction</div> <div class="w3-col l2 m2 s2">Verb</div> <div class="w3-col l2 m2 s2"> </div> </div> <div class="w3-row w3-center"> <div class="w3-col l2 m2 s2 w3-blue" style="height:158px"> <br> <br> <br><b>Positive</b></div> <div class="w3-col l2 m2 s2 w3-green">I</div> <div class="w3-col l2 m2 s2 w3-green">am</div> <div class="w3-col l2 m2 s2 w3-green">I'm</div> <div class="w3-col l2 m2 s2 w3-green">working.</div> <div class="w3-col l2 m2 s2 w3-white"> </div> <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div> <div class="w3-col l2 m2 s2 w3-indigo">is<br> <br> </div> <div class="w3-col l2 m2 s2 w3-indigo">He's<br>She's<br>It's</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-white"> <br> </div> <div class="w3-col l2 m2 s2 w3-white"> </div> <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div> <div class="w3-col l2 m2 s2 w3-red">are<br> <br> </div> <div class="w3-col l2 m2 s2 w3-red">We're<br>You're<br>They're</div> <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-white"> <br> </div> <div class="w3-col l2 m2 s2 w3-white"> </div> </div> <!-- end of first table --> <!-- second table for negative form of verb to be --> <div class="w3-row w3-center w3-grey"> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2">Pronoun</div> <div class="w3-col l2 m2 s2">To Be</div> <div class="w3-col l2 m2 s2">Contraction</div> <div class="w3-col l2 m2 s2">Contraction</div> <div class="w3-col l2 m2 s2">Verb</div> </div> <div class="w3-row w3-center"> <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Negative</b></div> <div class="w3-col l2 m2 s2 w3-yellow">I</div> <div class="w3-col l2 m2 s2 w3-yellow">am</div> <div class="w3-col l2 m2 s2 w3-yellow">I'm not</div> <div class="w3-col l2 m2 s2 w3-yellow"> </div> <div class="w3-col l2 m2 s2 w3-yellow">working</div> <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>is<br> </div> <div class="w3-col l2 m2 s2 w3-indigo">He's not<br>She's not<br>It's not</div> <div class="w3-col l2 m2 s2 w3-indigo">He isn't<br>She isn't<br>It isn't</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div> <div class="w3-col l2 m2 s2 w3-red">are<br> <br> </div> <div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div> <div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div> <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div> </div> <!-- end of second table --> <!-- third table for question form of verb to be --> <div class="w3-row w3-center w3-grey"> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2">To Be</div> <div class="w3-col l2 m2 s2">Pronoun</div> <div class="w3-col l2 m2 s2">Verb</div> <div class="w3-col l2 m2 s2"> </div> <div class="w3-col l2 m2 s2"> </div> </div> <div class="w3-row w3-center"> <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Question</b></div> <div class="w3-col l2 m2 s2 w3-yellow">Am</div> <div class="w3-col l2 m2 s2 w3-yellow">I</div> <div class="w3-col l2 m2 s2 w3-yellow">working?</div> <div class="w3-col l2 m2 s2 w3-yellow">Yes, I am.</div> <div class="w3-col l2 m2 s2 w3-yellow">No, I'm not.</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>Is<br> </div> <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div> <div class="w3-col l1 m1 s1 w3-indigo"> <br>working?<br> </div> <div class="w3-col l1 m1 s1 w3-indigo">No<br>-<br>Yes</div> <div class="w3-col l1 m1 s1 w3-indigo">he<br>she<br>it</div> <div class="w3-col l1 m1 s1 w3-indigo">isn't<br>-<br>is</div> <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div> <div class="w3-col l2 m2 s2 w3-red"> <br>Are<br> </div> <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div> <div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div> <div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div> <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div> </div> <!-- end of third table --> </body> </html>
  13. hikingwithu2
    Yes, before I saw your latest reply, I got it working by adding the font-size attribute to the <p> level, not the <div> level, and now it is working. A little more experimenting with sizes and colors, then the DB code to bring up a random image. Much more fun to come. Thanks for the info.
  14. hikingwithu2
    Hi, thanks for the reply, this is what I have tried so far - In the head style section - /* For width smaller than 400px: */ .i1 { /* background-image: url('images/LookingSouthYetmanTrail-400.jpg'); */ background-repeat: no-repeat; font-size: 2vw; } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { .i1 { /* background-image: url('images/LookingSouthYetmanTrail-1.jpg'); */ background-repeat: no-repeat; height: 449px; font-size: 2vw; } } And in the body - <div class="i1"> <div class="w3-display-container w3-text-white"> <img src="images/LookingSouthYetmanTrail-1.jpg" alt="Tucson Mtns Trail" style="width:100%"> <div class="w3-display-topmiddle w3-container"> <div class="w3-xxlarge w3-text-shadow"><p><b>chip wiegand</b></p></div> <p class="w3-text-shadow w3-xlarge" style="letter-spacing: 3px;">Welcome to my blog and website, I hope you find something of interest.</p> </div> <div class="w3-display-bottomleft w3-container w3-opacity" style="font-size: .7vw;"><p>Credit: Photo by Chip Wiegand</p></div> </div> </div> And the text does not resize. But I have only two devices to test on - my laptop and my phone. But resizing the FF window does not resize the text. Oh, BTW, the reason why I changed from loading the image in the head style section to the body is my end-goal - to grab an image at random from a DB, but all the text bits would remain where they should be regardless. I will look at the link you sent me and see what more I can learn from it.
  15. hikingwithu2
    Hi, thanks for the reply, this is what I have tried so far - In the head style section - /* For width smaller than 400px: */ .i1 { /* background-image: url('images/LookingSouthYetmanTrail-400.jpg'); */ background-repeat: no-repeat; font-size: 2vw; } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { .i1 { /* background-image: url('images/LookingSouthYetmanTrail-1.jpg'); */ background-repeat: no-repeat; height: 449px; font-size: 2vw; } } And in the body - <div class="i1"> <div class="w3-display-container w3-text-white"> <img src="images/LookingSouthYetmanTrail-1.jpg" alt="Tucson Mtns Trail" style="width:100%"> <div class="w3-display-topmiddle w3-container"> <div class="w3-xxlarge w3-text-shadow"><p><b>chip wiegand</b></p></div> <p class="w3-text-shadow w3-xlarge" style="letter-spacing: 3px;">Welcome to my blog and website, I hope you find something of interest.</p> </div> <div class="w3-display-bottomleft w3-container w3-opacity" style="font-size: .7vw;"><p>Credit: Photo by Chip Wiegand</p></div> </div> </div> And the text does not resize. But I have only two devices to test on - my laptop and my phone. But resizing the FF window does not resize the text. Oh, BTW, the reason why I changed from loading the image in the head style section to the body is my end-goal - to grab an image at random from a DB, but all the text bits would remain where they should be regardless. I will look at the link you sent me and see what more I can learn from it.
  16. hikingwithu2
    I've never seen vh or vw before, and I've been all through the w3.css tutorial pages and the last time I went through the html tutorial pages as well (that was years ago though) Anyway, here is the code I use for the images - /* For width smaller than 400px: */ .i1 { background-image: url('images/LookingSouthYetmanTrail-400.jpg'); background-repeat: no-repeat; } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { .i1 { background-image: url('images/LookingSouthYetmanTrail-1.jpg'); background-repeat: no-repeat; height: 449px; } } So do I add the vh or vw tags into those sections to get the text to scale?
  17. hikingwithu2
    I am experimenting with the w3.css image text options, and have it working very nicely when viewed on my laptop, but then when I view the same page on my cellphone, the image scales properly, but the text just flows down over everything else, it does not scale or change in any way. What is the method for dealing with the image text so it behaves on a mobile device? You can see it at http://wiegand.org/index-test.php Thanks, Chip
  18. hikingwithu2
    thank you for the tip - I have it working as desired.
  19. hikingwithu2
    I got it working as expected. I took the code from the 'other' quiz, pasted it into the problem quiz, commented out almost everything, and now it works, that is, when the results page is loaded there is no submit button - // *** check the answers *** // foreach ($_POST as $value){ if (isset ($value)){ $done++; } } if ($done !=7) //set this to 1 higher than the number of questions and answers print "<input type='submit' name='submit' value='check answers' />"; //if (($done > 0)&&($done < 7)) //set this to 1 higher than the number of questions and answers //print "<p>You haven't answered all the questions. Please finish the quiz and re-submit your answers.</p>"; //if($done==7){ //set this to 1 higher than the number of questions and answers //print "<p>Your score is $correct/6 correct.</p>"; //set this to the same number of questions and answers //if ($correct<'5') { //set this to the number of minimum correct answers //print "<p>You should review the information and try the quiz again.</p>"; } //if ($correct==0) //$correct='0'; //else { //print "<p>The correct answers:</p>"; //print "<p>$a7</p>"; //print "<p>$a8</p>"; //print "<p>$a9</p>"; //print "<p>$a10</p>"; //print "<p>$a11</p>"; //print "<p>$a12</p>"; //}} print "</form></div></body></html>"; ?> So now I will just add in a 'close window' button for those who can't seem to find the little 'x' in the corner.
  20. hikingwithu2
    My form opens with this statement, pretty standard - <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> and the submit button also - print "<tr><td><input type='submit' name='submit' value='check answers' /></td></tr><table>"; On the results page there is still the submit button. On another quiz I have there is no submit button on the results page (http://www.wiegand.org/DoDontDoesDoesntDidDidnt.php). this is the closing code for that other quiz - // *** check the answers *** // foreach ($_POST as $value){ if (isset ($value)){ $done++; } } if ($done !=7) //set this to 1 higher than the number of questions and answers print "<input type='submit' name='submit' value='check answers' />"; if (($done > 0)&&($done < 7)) //set this to 1 higher than the number of questions and answers print "<p>You haven't answered all the questions. Please finish the quiz and re-submit your answers.</p>"; if($done==7){ //set this to 1 higher than the number of questions and answers print "<p>Your score is $correct/6 correct.</p>"; //set this to the same number of questions and answers if ($correct<'5') { //set this to the number of minimum correct answers print "<p>You should review the information and try the quiz again.</p>"; } if ($correct==0) $correct='0'; else { print "<p>The correct answers:</p>"; print "<p>$a7</p>"; print "<p>$a8</p>"; print "<p>$a9</p>"; print "<p>$a10</p>"; print "<p>$a11</p>"; print "<p>$a12</p>"; }} print "</form></div></body></html>"; The two quizes are different so they require different code - one gets the answers checked and scored and the other doesn't. On another note: maybe you can reply in a PM - what do you think is wrong with the language on the first quiz above?
  21. hikingwithu2
    I have a form that is a quiz, the submit button reloads the page with the answers (using php_self). On the answer page the submit button is still there, and still resubmits the data if pressed. What am I missing that will make it not appear on the results page? You can see the quiz here - http://www.wiegand.org/ask_questions.php - just scroll to the bottom of the page to the link.
×
×
  • Create New...