Jump to content

hikingwithu2

Members
  • Content count

    40
  • Joined

  • Last visited

Community Reputation

0 Neutral

Contact Methods

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

Profile Information

  • Location
    Barranquilla, Colombia
  1. two side-by-side divs with differant amounts of text

    Ok, I think I have something on this topic - the two cells do indeed always match sizes as long as the cell to the right is the same or small height as the cell on the left. If the right-cell is taller, the left-cell will not adjust and match the height. It appears to work only with the right-cell matching the left-cell. I haven't done any extra testing yet, but that appears to be what is happening. What I have done today is put some text in the left-cell and an image in the right-cell, if the image is taller than what the left-cell wants for the its own text, then the right-cell (image cell) grows taller. If I put more text in the left-cell it will grow automatically of course, but the right-cell will also grow to match it. Edit: I might be wrong afterall, as I just tried it with two div of text and no matter how much text is in either, the two side by side divs will not align to the same height. It's very strange, as I use side by side boxes in many places and they all align perfectly no matter what is in each of them. More testing... More testing shows the right-cell follows the left-cell for height. As the left-cell changes height the right-cell will follow, but it does not work in the reverse. More testing...
  2. FYI - (no help needed, this is a demonstration) - I'm in the process of developing a site for non-English speakers to learn conversational English (not grammar, as is the case with most English learning websites). While writing one of the pages I was experimenting with the radius and accordion and got some cool and unexpected results, you can see what I mean by looking at the page here - http://wiegand.org/ChipsEnglishHelp/a1-u0-intro.php Maybe some of you have already come across this, I don't know, but this is the first time I've seen this effect, anywhere. The accordion code I found on a website, then I added a radius of 10% to the <li> in the .css. Here's the code - /* * Author: Michael Raffaele <michael@mraffaele.com> * Date: 25th October 2011 * Info: http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/ */ /* Shared for all accordion types */ .accordion { font-family:Verdana,Geneva,sans-serif; margin:0 auto; width:35em; padding:.5em; background:inherit; } .accordion ul { list-style:none; margin:0; padding:0; } .accordion li { margin:0; padding:0; border-radius: 10% } .accordion [type=radio], .accordion [type=checkbox] { display:none; } .accordion label { display:block; font-size:.8em; text-align:center; line-height:.8em; background:inherit; border:0; color:#542437; font-weight:600; cursor:pointer; text-transform:uppercase; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; } .accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label { background:#C02942; text-align: center; color:#FFF; } .accordion .content { padding:0 .5em; overflow:hidden; border:0; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; } .accordion p { color:#333; margin:0 0 .5em; } .accordion h3 { color:#542437; padding:0; margin:.5em 0; } /* Vertical */ .vertical ul li { overflow:hidden; margin:0 0 .05em; } .vertical ul li label { padding:.5em; text-align: center; } .vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label { border-bottom:0; } .vertical ul li label:hover { border:0; } .vertical ul li .content { height:0; border-top:0; text-align: center; } .vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content { height:20em; border:0; }
  3. two side-by-side divs with differant amounts of text

    Here's the reference - https://www.w3schools.com/w3css/w3css_layout.asp Layout Cells Adjust to Equal Height Side-by-side w3-cell elements will also automatically self-adjust to equal height: I'm still having this problem, though it is not 100%, it might be more like 10%.
  4. two side-by-side divs with differant amounts of text

    Here's the reference - https://www.w3schools.com/w3css/w3css_layout.asp Layout Cells Adjust to Equal Height Side-by-side w3-cell elements will also automatically self-adjust to equal height: I'm still having this problem, though it is not 100%, it might be more like 10%.
  5. Menubar and links that don't work in FF and IE

    I got it working, here's the code: <style> .menubar { width: 100%; clear:both; padding:.5em; box-shadow:0 .07em .07em black; background-color:yellow; border-left:.43em solid orange; border-radius:.57em; } .h1-bar a { color:#000; background-color:yellow; box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo; border-radius:.57em; padding:.5em; margin-top:.5em; } .bar { width:100%; overflow:hidden; display:inline-block; } .btnMenu { float:left; background: orange; padding:.15em; border-radius:.57em; margin-right:.75em; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } .btnMenu:hover { background-color: red; cursor: pointer; } .btnMenuReversed { float:left; background: pink; padding:.75em; margin:.5em; border-radius:.57em; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } .btnMenuReversed:hover { background-color: green; cursor: pointer; } </style> <div class="bar menubar"> <div class="h1-bar"> <div class="btnMenu"><span class="btnMenuReversed"><a href="index.html">Home</a></span></div> <div class="btnMenu"><span class="btnMenuReversed"><a href="courses.html">Courses</a></span></div> <div class="btnMenu"><span class="btnMenuReversed"><a href="why.html">Why English?</a></span></div> <div class="btnMenu"><span class="btnMenuReversed"><a href="contact.html">Contact</a></span></div> </div> </div>
  6. I have a menubar that works great in Opera 49.0 but in Firefox 57.0.2(64bit) and IE11 there are no links, therefore it doesn't work at all. If I move the link urls outside the buttons they work as expected, but the buttons are completely messed up. What could possibly be the problem? The html looks like this: <div class="w3-bar menubar "> <div class="h1-bar"> <button class="btnMenu"><a href="index.html">Home</a></button> <button class="btnMenu"><a href="courses.html">Courses</a></button> <button class="btnMenu"><a href="why.html">Why English?</a></button> <button class="btnMenu"><a href="contact.html">Contact</a></button> </div> </div> And the .css looks like this: .menubar { width: 100%; clear:both; padding:1em; box-shadow:0 .07em .07em black; background-color:yellow; border-left:.43em solid orange; border-radius:.57em; } .h1-bar a { color:#000; background-color:yellow; box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo; border-radius:.57em; padding:.5em; margin-top:1em; }
  7. two side-by-side divs with differant amounts of text

    hmm, yeah, those do not sound familiar at all, but for some reason, in the back of my mind, I just seem to recall seeing something about those two divs being automatically drawn to the same size without the use of tables. I don't like using tables for layout, they are for data.
  8. When making two side-by-side divs with different amounts of text in them, and coloring the background, the two divs are of different heights. Now, I can use the style/height to set a height in pixels for the two divs, but I seem to recall seeing something in the w3schools site that showed how to make the two divs automatically the same height without setting the height in pixels. Or am I mistaken?
  9. w3-btn and what am I doing wrong?

    Yes I do, and that particular section will not change as it is for images/graphics that need a white background, rather than making all the images/graphics transparent. So for this site that is acceptable.
  10. w3-btn and what am I doing wrong?

    Exactly, that's what I have settled on - names like - section1 (which is dark blue), section2 (which is dark green, etc, and BtnSection1 (for a contrasting button for the dark blue section. I've followed this same pattern for other subsections. It's been a lot of trial and error experimenting, but it's all coming together now. This whole process is to change an old website to a more modern site, changing not just styles but also formatting. I hope to be done with it next year (I'm working on it alone, between my private language students).
  11. w3-btn and what am I doing wrong?

    I have gotten it working as I had hoped - In my .css file I have done this: /* the dark blue section */ .section1 { content:""; float:left; width: 66.6666%; display:table; clear:both; padding:0.01em 16px; border-radius:8px; color:#fff !important; background-color:#000066 !important; border-left:6px solid #0000ff !important; } /* right-side column for images and graphics */ .whiteSection { float:left; width: 33.3333%; padding:0 8px; text-align:center!important; background-color:#fff!important; } So, what does this do for me? This is what would be needed in every page of the site if using the w3-css properties directly - <div class="w3-row"> <div class="w3-container w3-twothird w3-safety-yellow w3-text-black w3-leftbar w3-border-orange w3-round-large"> <p>stuff</p> </div> <div class="w3-container w3-third w3-white w3-center"> <img src="../images/image.png" alt="image.png" width="250" height="117" /> </div> </div> Now all of that is changed to this: <div class="w3-row"> <div class="section1"> <p>stuff</p> </div> <div class="whiteSection"> <img src="../images/image.png" alt="image.png" width="250" height="117" /> </div> </div> Obviously a huge simplification of all the webpages and much easier to manage and update later. Comments and suggestions welcome.
  12. w3-btn and what am I doing wrong?

    Ok, so after much experimenting I have gotten it to work with this code, not exactly what I was hoping for, but it works - <li>J: Where are you ______?<button class="w3-container w3-btn BtnShowAnswerPink" onclick="myFunction('l')">Answer</button> <div class="w3-container w3-hide BtnAnswerPink" id="l" style="width:65%;">Where are you from?</div> </li> So, what would be really nice if including whatever makes up "w3-container" and "w3-btn" into the BtnShowAnswerPink and "w3-container" and "w3-hide" into BtnAnswerPink. I have tried by copying everything related to those and pasting into the code but it simply doesn't work, as if something is still missing. The buttons don't open. So at this point, I'm going with the above solution. If anyone knows how to integrate the other bits please post the info here.
  13. w3-btn and what am I doing wrong?

    On a webpage I'm building the client likes his buttons to be formated with the following - <button class="w3-btn w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" onclick="myFunction('a')">Answer</button> <div id="a" class="w3-container w3-hide w3-left-align w3-aqua w3-border w3-border-indigo w3-round-xxlarge w3-small" style="width:65%;">orange</div> Problem is he wants different colors on different pages, and many of them. So in the future changing the colors will be a major drag. Using all those selectors like that defeats the purpose of the css, right? So I am working on making a selector that contains all the details of the w3-btn w3-left-align w3-aqua w3-border etc etc. I have searched the w3-css style sheet version 3 for all relevant attibutes and have come up with this - .BtnShowAnswerPink { border:none; display:block; outline:0; padding:6px 16px; vertical-align:middle; overflow:hidden; text-decoration:none!important; text-align:center; cursor:pointer; white-space:nowrap; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; box-shadow:none; float:left; width:100%; -webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s; transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s; color:#000!important; background-color:#ff9999!important; border:1px solid #ccc!important; border-color:#ff3333!important; border-radius:32px; font-size:12px!important; } .BtnHideAnswerPink { padding:0.01em 16px; display:none!important; color:#000!important; background-color:#ff9999!important; border:1px solid #ccc!important; border-color:#f44336!important; border-radius:32px; font-size:12px!important; } Problem is it doesn't actually work. The button does not expand to show the text. After much more experimenting I have found that the first part, .BtnShowAnswerPink, is ok, the problem is in the second section. What is happening is the button does not expand. I have verified the javascript, and it is fine. So, at this time, this is what I have working - <li>D: _____, I'm Donna.<button onclick="myFunction('a')" class="BtnShowAnswerPink">Answer</button> <div id="a" class="w3-container w3-hide w3-left-align w3-pink w3-border w3-border-red w3-round-xxlarge w3-small" style="width:65%;"> Hi (Hello), I'm Donna. </div> </li> The javascript also comes from this site, here it is: <script> function myFunction(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> What am I missing from the second part, .BtnHideAnswerPink? I can't provide a link to the site as it is not published, yet. Thanks.
  14. I think I read somewhere that ALL text should be enclosed inside paragraph tags. But what I don't recall is it literally ALL text regardless of other tags? For example, inside <h-> tags, inside <div> tags, inside <li> tags, etc etc etc, should literally ALL text be enclosed in paragraph tags? In <li> tags if I use <p> tags then the text is dropped one line below the list item marker symbol, which is bad, so I don't use paragraph tags inside <li> tags. In <div> tags I have used paragraph tags only when there have been more than one paragraph. For years now I have been using paragraph tags for paragraphs outside of other tags, such as those I already mentioned, but should I be enclosing text in <h-> and <li> in paragraph tags? My goal is to write the most accurate markup possible.
  15. color libraries don't apply to borders?

    Seriously? W3-CSS color libraries. https://www.w3schools.com/w3css/w3css_color_libraries.asp
×