Jump to content

vmars316

Members
  • Content Count

    398
  • Joined

  • Last visited

Posts posted by vmars316


  1. Yes , and I can select/copy each Table individually . 

    Thanks 

    What I don't like is that if I hit enter-key It creates what loos like a whole line . 

    Is there a way to stop it from creating a whole new colored line ,

    it looks like a whole new paragraph (sort of) . 

    And keep enter-key  text in the same line . 

    I could ignore the enter-key with .js , but then how would I create a new line ?

    Type in blanks til I overflow to a new line ? 

    Thanks


  2. Thanks ;

    JMRKR "What does the desired output look like?

    Here is exactly how I would like it to behave :

    <!DOCTYPE html>
    <html>
    <style>
    .Lcol {
    
    }
    .Rcol {
    
    }
    </style>
    <body>
    <h4>Editable-Simple-P.html Needs Copy Button + Which Col InputBox</h4>
    <p  class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 1. Lcol</p>
    <p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 4. Rcol<hr></p>
    
    <p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 2. Lcol</p>
    <p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 5. Rcol<hr></p>
    
    <p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 3. Lcol</p>
    <p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 6. Rcol<hr></p>
    
    </body>
    </html>

    Thanks


  3. Thanks ;

    JMRKER :  Watch what happens when you hold down the 1 key .

    The whole left table stretches way on top of the right table . 

     

    Quote

    What does the desired output look like?

    I want it to each table to stay in place , and wrap each line .  

    Thanks

    Validated :

    <!doctype html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
    	<!-- https://www.freeformatter.com/html-validator.html  --> 
        <!-- // or  /* GOOD For Javascript */  -->
        <!-- GOOD For HTML -->  
        <!--  /* GOOD For CSS */   --> 
    	<style>
    	table {
    	text-align: left; width: 100%;  background-color: rgb(232, 230 , 228);   border-style: solid;
        border-color: rgb(113, 30 , 19); 
    	}
    	p { background-color: rgb(246, 244, 242); 
    	}
    	</style>
    </head>
    <body>
    <h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
            <aside style="float: right; width: 50%; font: 20px Calibri;">
    <div>
    <table  contenteditable="true" >
    <tbody>
    <tr>
    <td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;  overflow-wrap: break-word;  " ><p>2</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;  overflow-wrap: break-word; "><p>3</p>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
            </aside>
    		
        <aside style="float: left; width: 50%; font: 20px Calibri ">
    <div>
    <table contenteditable="true">
    <tbody>
    <tr>
    <td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;  overflow-wrap: break-word;" ><p>2</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; overflow-wrap: break-word;"><p>3</p>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
       </aside>
       
    </body>
    </html>

     


  4. Pls , Let me ask you this 

    This time using <aside> 

    How can I get   "word-wrap: break-word; "  to work for each cell (td) ?  

    Right now it appears to stretch on into infinity . 

    <!doctype html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
            <aside style="float: right; width: 50%; font: 20px Calibri;">
    <div>
    <table  contenteditable="true" style="text-align: left; width: 100%;  " border="1" cellpadding="2" cellspacing="2">
    <tbody>
    <tr>
    <td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;  overflow-wrap: break-word;  " ><p>2</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;  overflow-wrap: break-word; "><p>3</p>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
            </aside>
    
        <aside style="float: left; width: 50%; font: 20px Calibri ">
    <div>
    <table contenteditable="true" style="text-align: left; width: 100%;  " border="1" cellpadding="2"
    cellspacing="2">
    <tbody>
    <tr>
    <td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;  overflow-wrap: break-word;" ><p>2</p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; overflow-wrap: break-word;"><p>3</p>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
       </aside>
    </body>
    </html>

    Thanks 

     


  5. Hello & Thanks ;

    See Code below ;

    I would like to Put two tables side by side (on same line) . 

    <!DOCTYPE html>
    <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title></title>
    <style>
    
    #span01 {
        display: inline-block;
    }
    
    #span02 {
        display: inline-block;
    }
    
    </style>
    </head>
    <body contenteditable="true">
      <br>
      <span id="span01">
    <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
      </tbody>
    </table>
      </span>  <!--  <span id="span01"> ---->
    <br>
    <br>
    <br>
      <span id="span02">
    <table  style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;"><br>
          </td>
        </tr>
      </tbody>
    </table>
      </span> <!--  <div id="span02">  -->
    <br>
    <br>
    <br>
    <br>
    <br>
    
    </body></html>

    Thanks for your help .  


  6. Hello & Thanks ;

    Below is my workaround code to create a margin for <tr> .  

    And How to stop border line from appearing between .td1 and .td2 ?  

    Here is the code at :

    https://www.w3schools.com/code/tryit.asp?filename=GEY9809882WT  

    And or see the code below

    <!DOCTYPE html>
    <html><head><meta content="text/html; ">
    <!--  http://w3schools.invisionzone.com/forum/6-css/  -->
    <title>Jesus'sWordsOnly-Forum-Exaample.html</title>
    <style>
    body {
         background-color: rgb(113, 30 , 19);
    }
    table {
    border-style: none;  
    }
    tr {
    border-style: none;  
    }
    
    .trBetween {
    
    }
    
    .td1 {
    color: rgb(0, 0, 0);
    vertical-align: top;
    width: 50%;
    font-size: 17px;
    border-style:none;
    //border-color: white white rgb(246, 244, 242) white; 
    //border-width: 2px;
    background-color: rgb(232, 230 , 228);
    }
    
    .td2 {
    color: rgb(0, 0, 0);
    vertical-align: top;
    width: 50%;
    font-size: 18px;
    border-style:none;
    //border-color: white white rgb(246, 244, 242) white; 
    //border-width: 2px;
    background-color: rgb(246, 244, 242); }
    </style>
    </head>
    <body>
    <h6 style="text-align: center; color: rgb(246, 244, 242);">Jesus's-Words-Only.html</h6>
    
    <table style="text-align: left; width: 100%;">
    <tbody>
    
    <tr>
    <td class="td1" contenteditable="false" style="text-align: center;"> 
    Hover over Bible references in this column 
    <br>to see the GNT version .
    </td>
    <td class="td2" contenteditable="false" style="text-align: center;"> 
    Jesus's words in ESV in this column .
    </td>
    </tr>
    
    <tr class="trBetween">&nbsp;</tr>
    <tr>
    <td class="td1" contenteditable="false" style="vertical-align: top;"> 
    The Young Jesus at the Temple (Luke 2:41-52) To His parents looking for Him, Jesus said.
    </td>
    <td class="td2" contenteditable="false" style="vertical-align: top; background-color: rgb(246, 244, 242); "> 
    Why were you looking for me? Did you not know that I must be in my Father's house?
    </td>
    </tr>
    
    <tr class="trBetween">&nbsp;</tr>
    <tr>
    
    <td class="td1" contenteditable="false" style="vertical-align: top;"> 
    John Baptizes Jesus (Matthew 3:13-17, Mark 1:9-11, Luke 3:21-3, John 1:33-4) John protests.
    </td>
    <td class="td2" contenteditable="false" style="vertical-align: top; background-color: rgb(246, 244, 242); "> 
    Let it be so now, for thus it is fitting for us to fulfill all righteousness.
    </td>
    </tr>
    
    <tr class="trBetween">&nbsp;</tr>
    <tr>
    
    <td class="td1" contenteditable="false" style="vertical-align: top;"> 
    Temptation of Jesus (Matthew 4:1-11, Mark 1:12-13, Luke 4:1-13) By satan in the desert.
    </td>
    <td class="td2" contenteditable="false" style="vertical-align: top; background-color: rgb(246, 244, 242); "> 
    It is written, 
    Man shall not live by bread alone,
        but by every word that comes from the mouth of God.
    <br>Again it is written, You shall not put the Lord your God to the test.
    <br>You shall worship the Lord your God
        and him only shall you serve.
    </td>
    </tr>
    
    <tr class="trBetween">&nbsp;</tr>
    <tr>
    
    <td class="td1" contenteditable="false" style="vertical-align: top;"> 
    Calling the First Disciples (Matthew 4:18-22, Mark 1:16-20, Luke 5:1-11, John 1:35-42)
    James and John.
    </td>
    <td class="td2" contenteditable="false" style="vertical-align: top; background-color: rgb(246, 244, 242); "> 
    Follow me, and I will make you fishers of men.
    <br>Put out into the deep and let down your nets for a catch.
    <br>Do not be afraid; from now on you will be catching men.
    </td>
    </tr>
    
    </tbody>
    </table>
    
    <script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
    </script>
    
    <script type="text/javascript">
    BGLinks.version = "GNT";
    BGLinks.linkVerses();
    </script>
    <div id="bg_popup-container"></div>
    
    </body></html>

     


  7. Thanks dsonesuk

    But even those changes I get same crazy results .

    https://www.w3schools.com/code/tryit.asp?filename=GEUOARBLQG0S 

    AND 

    <!DOCTYPE html>
    <html>
    <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title></title>
    <style>
    body {
        background-color: rgba(217, 176, 78, 0.1); 
    }
    table {
    border-style: none;  
    }
    
    tr {
    border-style: none;  
    }
    
    .td1 {
    color: rgb(0, 0, 0);
    vertical-align: top;
    width: 50%;
    font-size: 16px;
    border-style:solid;
    border-color: white white rgb(217, 176, 78) white;
    border-width: 2px;
    background-color: rgba(217, 176, 78 , 0.5;
    }
    
    .td2 {
    vertical-align: top;
    color: rgb(255, 0, 0); 
    font-size: 18px;
    width: 50%;
    border-style:solid;
    border-color: white white rgb(217, 176, 78) white;
    border-width: 2px;
    background-color: rgba(217, 176, 78, 0.5);
    }
    </style>
    </head>
    
    <body>
    <h6>Jesus's-Words-Only.html</h6>
    <table style="text-align: left; width: 100%;">
    <tbody >
    
    <tr>
    <td class="td1">
    The Young Jesus at the Temple>Luke 2:41-52) To His parents looking for Him, Jesus said.
    </td>
    
    <td class="td2">
    Why were you looking for me? Did you not know that I must be in my Father's house?
    </td>
    </tr>
    
    <tr>
    <td class="td1">
    John Baptizes Jesus (Matthew3:13-17, Mark 1:9-11, Luke 3:21-3, John 1:33-4) John protests.
    </td>
    
    <td class="td2">
    Please do so, because it’s good for us to do what God says is right,
    </td>
    </tr>
    
    </tbody>
    </table>
    
    <script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
    </script>
    
    
    <script type="text/javascript">
    BGLinks.version = "ESV";
    BGLinks.linkVerses();
    </script><div id="bg_popup-container"></div>
    
    </body></html>

    Thanks for your help !
     


  8. Hello & Thanks ;

    I am getting some Css Crazy Results from html/css page .

    It seems crazy to me any ways 'cause I cant figure it out . 

    Pls , take a look :https://www.w3schools.com/code/tryit.asp?filename=GETYVPJQ0B13 

    Here is the code also

    <!DOCTYPE html>
    <html>
    <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title></title>
    <style>
    body {
        background-color: rgba(217, 176, 78, 0.1); 
    }
    table {
    border-style: none;  
    }
    
    tr {
    border-style: none;  
    }
    
    .td1 {
    vertical-align: top;
    width: 50%;
    font-size: 16px;
    border-style:solid;
    border-color: white white rgb(217, 176, 78) white;
    border-width: 2px;
    background-color: rgba(217, 176, 78 , 0.5;
    }
    
    .td2 {
    vertical-align: top;
    color:  rgb(217, 176, 78);
    font-size: 18px;
    width: 50%;
    border-style:solid;
    border-color: white white rgb(217, 176, 78) white;
    border-width: 2px;
    background-color: rgba(217, 176, 78, 0.5);
    }
    </style>
    </head>
    
    <body>
    <h6>Jesus's-Words-Only.html</h6>
    <table style="text-align: left; width: 100%;">
    <tbody >
    
    <tr>
    <td class="td1";>
    The Young Jesus at the Temple (<a class="bibleref" target="_BLANK" href="https://www.biblegateway.com/passage/?search=Luke%202:41-52&amp;version=ESV&amp;src=tools">Luke 2:41-52</a>) To His parents looking for Him, Jesus said.
    </td>
    
    <td class="td2";">
    Why were you looking for me? Did you not know that I must be in my Father's house?
    </td>
    </tr>
    
    <tr>
    <td class="td1";>
    John Baptizes Jesus (Matthew3:13-17, Mark 1:9-11, Luke 3:21-3, John 1:33-4) John protests.
    </td>
    
    <td class="td2";">
    Please do so, because it’s good for us to do what God says is right,
    </td>
    </tr>
    
    </tbody>
    </table>
    
    <script src="https://www.biblegateway.com/public/link-to-us/tooltips/bglinks.js" type="text/javascript">
    </script>
    
    
    <script type="text/javascript">
    BGLinks.version = "ESV";
    BGLinks.linkVerses();
    </script><div id="bg_popup-container"></div>
    
    </body></html>

    Why isnt the css not working for ".td2" ?

    Thanks


  9. Ahh... 

                min-width: max-content;

    Works perfectly !

            .RowH1 {
                display: inline-block;
                border-style: solid solid solid solid;
                border-width: 2px;
                border-color: black;
                margin: 8px;
                min-width: max-content;
            }

    Btw: the whole reason I went with Fake-Tables rather than real-tables i

    s that I wanted to be able to select text by individual columns . 


  10. On 4/28/2020 at 12:12 PM, dsonesuk said:

    Its called being responsive, if the width of device is to to small to accommodate two column layout set column widths to 100% so they stack above each other.


    Thanks dsonesuk ;
    Oops! I didn't under what you meant . Ok I got it now .

    Yes I see the example here :

    https://www.w3schools.com/css/tryit.asp?filename=trycss_max-width

    But can't duplicate it on my page .

    https://www.w3schools.com/code/tryit.asp?filename=GEB8JFRQOJ9V 

    Can you show me what I am doing wrong .
    Thanks
     


  11. Hello & Thanks ;

    Here is my example code 

    http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable-BEST.html

    Happily , I can select copy paste each column .

    But I have a problem when I resize browser window horizontally and make it smaller .

    Column 2 gets relocated under column 1 .

    What is the name of that behavior (that I want to stop) , so that I can research it .

    I want to keep cols parallel (not stacked) , if column 2 gets partially hidden , during resizing , that's ok , that's what I am after .

    Thanks


  12. Thanks 

    Things are looking better 

    http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable-BEST.html

    I can select copy paste each column .

    But I still have a problem when I resize browser window horizontally and make it smaller .

    Column 2 gets relocated under column 1 .

    I don't remember , what is the name of that behavior (that I want to stop) . 

    I want to keep cols horz , if column 2 gets partially hidden , that's ok .

    Thanks


  13. Hello & Thanks :

    1) How can I create parallel tables (ie. side by side) .

    2) How can I select 1 column in a table (or table like structure) . 

    3) And I want Tables to be width-20% and width=80% respectively .

    4) Also he rows need to line up .

        Because eventually the borders will be eliminatad .

    I am doing that here with fake Tables:

    http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable.html 

    (It is contenteditable so you can see what I mean)

    But the problem comes in when I enter text that overflows ,

    the tables get stacked on top of each other . 

    Thanks

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>2Parallel-Tables-P-Editable.html</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
    	body {
         font-family: "Tahoma", Times, serif;
         font-size: 14px;
    }
            .Table {
                border-style: solid;
                text-align: center;
                border-color: #282A36;
                border-width: 2px;
                padding: 24px;
                */
            }
            
            .Title {
                text-align: center;
            }
            
            .Heading {
                font-weight: bold;
                text-align: center;
            }
            
            .Row {
                border-style: solid solid solid solid;
                border-width: 2px;
                border-color: #D9B04E;
            }
            
            .Cell {
                text-align: left;
                vertical-align: middle;
                display: inline-block;
                padding-left: 5px;
                padding-right: 5px;
                border-style: solid solid solid solid;
                border-width: 1px;
                border-color: #D9B04E;
            }
            
            .StackCell {}
            
            .StackRow {}
            
            .button {
                background-color: #282A36;
                border: none;
                color: #C8982B;
                color: #D9B04E;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
                font-family: "Comic Sans MS", cursive, sans-serif;
                font-size: 24px;
                cursor: pointer;
            }
            
            span.RedTxt {
                color: red;
            }
        </style>
    </head>
    
    <body style="background-color:#EbE8E4; font-family: Tahoma; font-size:18px; color:black;"> 
        <br>
    
        <div class="Table">
            <div class="Title">
                <p>
                    <button class="button">Main Table</button>
    				<br>
                </p>
            </div>      <!--  <div class="Title">  -->
            <p></p>
    <!-- ============NewRow============== -->
            <p></p>
            <div class="Row">
                <p></p>
    <!-- ---------------------NewCell------------------ -->
                <div class="Cell">
                
                    <p style="text-align:center;">
    
        <div class="Table">
            <div class="Title">
                <p>
                    <button class="button">TABLE 1</button>
    				<br>
                </p>
            </div>      <!--  <div class="Title">  -->
            <p></p>
    <!-- ============NewRow============== -->
            <p></p>
            <div class="Row">
                <p></p>
    <!-- ---------------------NewCell-----------DancingMan - mp4 ------- -->
                <div class="Cell">
                
                    <p contenteditable="true" style="text-align:center;">
    TABLE 1 row1  col1
                    </p>
    <br>
        
                </div>
            </div>  <!-- <div class="Row"  -->
    
    <!-- ============NewRow============== -->
            <p></p>
            <div class="Row">
                <p></p>
    <!-- ---------------------NewCell-----------DancingMan - mp4 ------- -->
                <div class="Cell">
                
                    <p contenteditable="true" style="text-align:center;">
    TABLE 1 row2  col1
                    </p>
    <br>
        
                </div>
            </div>  <!-- <div class="Row"  -->
    
    
        </div>  <!--  div class="Table">  -->
                    </p>
    <br>
        
                </div>  
    <!-- ---------------------End of Cell------------------ -->
    
    <!-- ---------------------NewCell------------------ -->
                <div class="Cell">
                
                    <p style="text-align:center;">
    
        <div class="Table">
            <div class="Title">
                <p>
                    <button class="button">TABLE 2</button>
    				<br>
                </p>
            </div>      <!--  <div class="Title">  -->
            <p></p>
    <!-- ============NewRow============== -->
            <p></p>
            <div class="Row">
                <p></p>
    <!-- ---------------------NewCell-----------DancingMan - mp4 ------- -->
                <div class="Cell">
                
                    <p contenteditable="true" style="text-align:center;">
    TABLE 2 row1  col1
                    </p>
    <br>
        
                </div>
            </div>  <!-- <div class="Row"  -->
    <!-- ============NewRow============== -->
            <p></p>
            <div class="Row">
                <p></p>
    <!-- ---------------------NewCell-----------DancingMan - mp4 ------- -->
                <div class="Cell">
                
                    <p contenteditable="true" style="text-align:center;">
    TABLE 2 row2  col1
                    </p>
    <br>
        
                </div>
            </div>  <!-- <div class="Row"  -->
    
        </div>  <!--  div class="Table">  -->
                    </p>
    
                    </p>
    <br>
        
                </div>  
    <!-- ---------------------End of Cell------------------ -->
    
    <br>
            </div>  <!-- <div class="Row"  -->
            
        </div>  <!--  div class="Table">  -->
        
    
        <div>
            <p style="text-align:center;">
            <span style="font-size: 14pt; font-family: &quot;Avenir Next&quot;;">
    <br><br> <a href="http://vmars.us/">  http://vmars.us/  </a>
          </span>
                <br>
                <br>"All things in moderation , except for love and forgiveness"
                <br>
            </p>
        </div>
    
    
    </body></html>

     

     

     


  14. Ah yes ,

    <style type="text/css">
    #video1{
      object-fit: initial;
      width: 800px;
      height: 600px;
    }
    </style>

    Works great !  THANKS 

     

    PS: Here's what I am working on: 

    http://vmars.us/freeware/HtmlCodeAssist/Html-Color-Names-Tutorial.html

    A friend asked me to help with an Acrobat prob :

    There is apparently no pdf-editor 'known to mankind'  

    that can convert 'highlighted .pdf TEXT' 

    into  'highlighted .html TEXT' ,  properly .

    Most turn text into images . 

    Anyways , my little program HtmlCodeAssist.exe 

    makes that task easier .

    As Always , Thanks for your help .

×
×
  • Create New...