Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Posts posted by vmars316

  1. Thanks;

    I thought I would try global variables .

    
    <script type='text/javascript' > 
        var  NewLink = "New Link"
        var  TextParagraph = "Text Paragraph"
        var  ArticleHeading = "Article Heading"
    </script>
    
    	<script id="js" contenteditable >
    function createNewLink() {
              var li_nl = document.createElement("li");
              li_nl.innerHTML = NewLink;
    		  alert(' function createNewLink = ' + NewLink);  
              li_nl.setAttribute("contenteditable", "true");
              var nav = document.getElementById("nav"); 
              nav.appendChild(li_nl);
            }
    		</script>	
    

    The Alert works fine .

     Thanks

  2. Hello & Thanks :

    Here is my code:

    	<script id="js" contenteditable >
    function createArticleHeader(text= "Article Heading") {
      var p_ah = document.createElement('p');
        alert{"p_ah"};
      p_ah.innerHTML = text;
      p_ah.setAttribute('contenteditable', 'true');
      var content = document.getElementById('content');
      content.appendChild(p_ah);
    }
    createArticleHeader("Article Header");
    </script>

    This code runs great, without the alert .

    But when I add the alert{} line , it doesn't run at all .

    Is alert{} in the wrong place or what ?

    Thanks for your help .

     

  3. Thanks;

    "Your text is 'undefined' due to the fact you call CreateTextArea() 
    without any arguments. 
    Which means the text variable is undefined." 
    Sorry , I don't understand what you mean.
    Pls , explain further.

    The other errors , I'm working on them.

    Thanks

  4. Hello & Thanks ,

    I have been away from coding a while:

    I'm having trouble connecting css  html and js .

    Problem areas are:

             p, ah  {  font-size: 2em; color: #ffdddd; }
             p, tgh  {  font-size: 1em;  color: #ddffdd; }

    and 

          <div id="wrapper">
          <section id="section">
             <div id="content">
                <div class="innertube">
                   <p contenteditable id="ah" >Article Heading</p>
                   <p contenteditable id="tgh">Text goes here:</p>
                   <p>
                      <!--  <script>generateText(20)<script>  -->
                   </p>
                </div>
             </div>
          </section>
          <div>

    and 

          <script id="js" contenteditable >
             function createArticleHeader(text) {
               var p = document.createElement('p');
               p.innerHTML = text;
               p.setAttribute('contenteditable', 'true');
               var content = document.getElementById('content');
               content.appendChild(p);
             }
             createArticleHeader("ArticleHeader...");
             createTextArea();
          </script>
          <script id="js" contenteditable >
             function createTextArea(text) {
               var p.tgh = document.createElement('p.tgh');
               p.tgh.innerHTML = text;
               p.tgh.setAttribute('contenteditable', 'true');
               var content = document.getElementById('content');
               content.appendChild(p.tgh);
             }
             createTextArea("Text goes here:");
          </script>

    Start-up time thru it runs fine but"

    When click createArticleHeader button it runs fine the first time but from then on it shows an "undefined" error .

    When click TextGoesHere button it doesn't run at all .

    I need help . 

    <!DOCTYPE html>
    <html>
       <!--  How to link css to  html and js ?  -->
       <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>MiniCode-For-Forum.html</title>
          <style >
             body {
             margin:0;
             padding:0;
             font-family: Sans-Serif;
             line-height: 1.5em;
             }
             #section {
             padding-bottom: 10010px;
             margin-bottom: -10000px;
             float: left;
             width: 100%;
             }
             #wrapper {
             overflow: hidden;
             }
             #content {
             margin-left: 230px; /* Same as 'nav' width */
             }
             .innertube {
             margin: 15px; /* Padding for content */
             margin-top: 0;
             }
             p {
             color: #000555;
             }
          </style>
          <style>
             p, ah  {  
                        font-size: 2em;
                        color: #ffdddd;
             }
             p, tgh  {  
                        font-size: 1em;
                        color: #ddffdd;
             }
          </style >
       </head>
       <body>
          <div id="wrapper">
          <section id="section">
             <div id="content">
                <div class="innertube">
                   <p contenteditable id="ah" >Article Heading</p>
                   <p contenteditable id="tgh">Text goes here:</p>
                   <p>
                      <!--  <script>generateText(20)<script>  -->
                   </p>
                </div>
             </div>
          </section>
          <div>
             <!--  Buttons Header  -->
             <button onclick="createArticleHeader()">Add New Article Heading</button>
             <button onclick="createTextArea()">Text goes here:</button>
          </div>
          <!--  Buttons Header  -->
          <script id="js" contenteditable >
             function createArticleHeader(text) {
               var p = document.createElement('p');
               p.innerHTML = text;
               p.setAttribute('contenteditable', 'true');
               var content = document.getElementById('content');
               content.appendChild(p);
             }
             createArticleHeader("ArticleHeader...");
             createTextArea();
          </script>
          <script id="js" contenteditable >
             function createTextArea(text) {
               var p.tgh = document.createElement('p.tgh');
               p.tgh.innerHTML = text;
               p.tgh.setAttribute('contenteditable', 'true');
               var content = document.getElementById('content');
               content.appendChild(p.tgh);
             }
             createTextArea("Text goes here:");
          </script>
       </body>
    </html>

    Sorry for the long Post .

    Thanks for your help ! 

  5. Oops , I posted the wrong code ,

    Here is the correct one"

    
    
    <!DOCTYPE  html>  
    <html><head>
    <title>OneRowTwoCells-ALL.html</title> 
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>DivsOnlyTemplate</title>
    <!--  DivsOnlyFullTemplateEmpty.html
            https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
            https://htmlformatter.com/
    -->  
      <style type="text/css">
        .Table
        {
            border-style: solid;
            text-align: center;    
            border-color: #5A697D;
            border-width: 16px;
    <!--          width: 500px; -->
    <!--        padding: 24px ;  -->  
        }
        .Title
        {
            text-align: center;
        }
        .Heading
        {
            font-weight: bold;
            text-align: center;
        }
        .Row
        {
            border-style: solid solid solid solid;
            border-width: 4px;
            border-color: #000000;
        }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 15%;
        background-color: #D3DDEB;
        text-align: center;
        position: fixed;
        height: 85%;
        border-style: solid;
        border-color: #5A697D;
        border-width: 1px;
        overflow: auto;
    }
            .button {
                background-color: #5A697D;
                border-style: 1px; border-width: 1px; border-color: black;
                color: #C8982B;
                color: #D9B04E;
                text-align: center;
                text-decoration: none;
                text-shadow: 1px 1px #000000;
    <!--             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;
            }
    
        .LeftCell
        {
        width: 15%; min-width: 150px;
        background-color: #D3DDEB;
        text-align: center;
        position: fixed;
        height: 68%;
        border-style: solid;
        border-color: #5A697D;
        border-width: 1px;
        overflow: auto;
        margin-top: 10;
        margin-left: 10;
    
            }
        .RightCell
        {
            display: inline-block;
            padding-left: 5px;  
            padding-right: 5px;  
            width: 60%;
    <!--         height: 400px;  -->
            margin-left:25%; 
            overflow: auto;  -->
        }
        .StackCell
        {
        }
        .StackRow
        {
        }
      </style>
    </head>
    <body style="width: 800px;">
    <div style="border-style: solid ; border-width: 2px;">  
     <div class="Table" style="">  
    <!-- ============NewRow============== -->
        <div class="Row" style="">
            <div class="LeftCell" style="float: left; border-style: solid ; border-width: 1px;">
    
        <br><a href="http://vmars.us/automaton/automaton-index.html" target="_blank">
                            <button class="button">Automaton</button></a>
        <br><br><a href="http://vmars.us/freeware/index.html" target="_blank">
                            <button class="button">Freeware</button></a>
        <br><br><a href="http://vmars.us/javascript/ListOfGames.html" target="_blank">
                            <button class="button">Games</button></a>
        <br><br><a href="http://vmars.us/Helps/HelpsPage.html" target="_blank">
                            <button class="button">Helps</button></a>
        <br><br><a href="http://vmars.us/myFavsLinks.html" target="_blank">
                            <button class="button">Links</button></a>
        <br><br><a href="http://vmars.us/Spiritual/SpiritualPage.html" target="_blank">
                            <button class="button">Spiritual</button></a>
            </div>  <!-- <div class="LeftCell"  -->
    <br>
    <div class="RightCell" style="margin-left:18%; padding:0px 0px; height:500px; 
                      text-align: center; font-size: 16px;
                      border-style: solid; border-color: #5A697D; border-width: 1px;">
    <span style="display: block;"><img src="http://vmars.us/javascript/images/myPic-min.jpg" alt="">
    <a href="http://vmars.us/index.html"" >
    <br><button class="button" > Welcome ! </button>
    </a></span>
    
        <br> Thanks for stopping by ! 
        <br> Here you will fnd freeware and browser games I have written , 
        <br> some automata I enjoy , and some I am working on ,
        <br> a Build your own 'Dancing Man Automaton Kit' ,  
        <br> plus some helps and information I hope you will find useful . 
        <br> My freeware includes : 
        <br><br> <a href="http://vmars.us/freeware/clipLog/clipLog-Help.html" target="_blank"  style="text-decoration: underline;">
                           clipLog/clipFind : Personal Information Manager</a>
        <br><br> <a href="http://vmars.us/freeware/myFavs/myFavs_Help.html" target="_blank"  style="text-decoration: underline;">
                           myFavs : Internet Bookmark Manager</a>
        <br><br> <a href="http://vmars.us/freeware/mySort/mySort_Help.html" target="_blank" style="text-decoration: underline;">
                           mySort : Handy Text Sorter</a>
        <br><br>
        <br><br>"All things in moderation , except for love and forgiveness"
        </div> <!-- RightCell -->
     </div>  <!-- <div class="Row"  -->
     </div> <!-- <div class="Table">  -->
     </div> <!-- <div style="border-style: solid ; border-width: 2px;">  -->
    </body></html>

    Thanks

    LeftSideNAV.jpg

  6. hanks All ;

    Looks like this is as close as I am going to get .

    LiftSideNAV.jpg.2aa5e05e4c733c9abe08fcb3455367f6.jpg

     

    
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        margin: 0;
    }
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 15%;
        background-color: #D3DDEB;
        text-align: center;
        position: fixed;
        height: 85%;
        border-style: solid;
        border-color: #5A697D;
        border-width: 1px;
        overflow: auto;
        
    }
    
    li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
    
    li a.active {
        background-color: #4CAF50;
        color: white;
    }
    
    li a:hover:not(.active) {
        background-color: #eef0f2; <!--  #cdd2d8; #BDC3CB;  -->
        color: white;
    }
            .button {
                background-color: #5A697D;
                border-style: 1px; border-width: 1px; border-color: black;
                color: #C8982B;
                color: #D9B04E;
                text-align: center;
                text-decoration: none;
                text-shadow: 1px 1px #000000;
    <!--             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;
            }
    </style>
    </head>
    <body>
    
    <div style="border-style: solid; border-color: black; border-width: 4px;">
    <div style="border-style: solid; border-color: #5A697D; border-width: 16px;">
    <div style="border-style: solid; border-color: black; border-width: 4px;">
    
    <!--   <ul style="border-style: solid; border-color: black; border-width: 2px;">  -->
    <ul>
        <br>
        <li><a href="http://vmars.us/automaton/automaton-index.html" target="_blank">
                            <button class="button">Automaton</button></a>
        <li><a href="http://vmars.us/freeware/index.html" target="_blank">
                            <button class="button">Freeware</button></a>
        <li><a href="http://vmars.us/javascript/ListOfGames.html" target="_blank">
                            <button class="button">Games</button></a>
        <li> <a href="http://vmars.us/Helps/HelpsPage.html" target="_blank">
                            <button class="button">Helps</button></a>
        <li><a href="http://vmars.us/myFavsLinks.html" target="_blank">
                            <button class="button">Links</button></a>
        <li><a href="http://vmars.us/Spiritual/SpiritualPage.html" target="_blank">
                            <button class="button">Spiritual</button></a>
        </li>
    </ul>
    
    <div style="margin-left:18% ;padding:0px 0px;height:600px; text-align: center; font-size: 16px;
                      border-style: solid; border-color: #5A697D; border-width: 1px;">
    <span style="display: block;"><img src="http://vmars.us/javascript/images/myPic-min.jpg" alt="">
    <a href="http://vmars.us/index.html"" >
    <br><button class="button" > Welcome ! </button>
    </a></span>
    
        <br><br> Thanks for stopping by ! 
        <br><br> Here you will fnd freeware and browser games I have written , 
        <br><br> some automata I enjoy , and some I am working on ,
        <br><br> a Build your own 'Dancing Man Automaton Kit' ,  
        <br><br> plus some helps and information I hope you will find useful . 
        <br><br> My freeware includes : 
        <br><br> <a href="http://vmars.us/freeware/clipLog/clipLog-Help.html" target="_blank"  style="text-decoration: underline;">
                           clipLog/clipFind : Personal Information Manager</a>
        <br><br> <a href="http://vmars.us/freeware/myFavs/myFavs_Help.html" target="_blank"  style="text-decoration: underline;">
                           myFavs : Internet Bookmark Manager</a>
        <br><br> <a href="http://vmars.us/freeware/mySort/mySort_Help.html" target="_blank" style="text-decoration: underline;">
                           mySort : Handy Text Sorter</a>
        <br><br>
        <br><br>"All things in moderation , except for love and forgiveness"
        <br><br>
    </div> <!-- <style="margin-left:22%;padding:1px 16px;height:1000px; ">  -->
    </div> <!--  style="border-style: solid; border-color: black; border-width: 4px;"  -->
    </div> <!--  style="border-style: solid; border-color: #5A697D; border-width: 16px;"  -->
    </div> <!--  style="border-style: solid; border-color: black; border-width: 4px;"  -->
    </body>
    </html>

     

  7. Thanks Funce

    I'll try the fixed position , and the overflow:hidden on my stack of rows and cells .

    I just realized that I am confusing myself because I am working on two different web pages . 

    I was hoping I could use the same coding for both .

    One page as the image above where each row and cell is a block (a stack of rows and cells ) . 

    The other page , each cell is an inline-block , which will not work with overflow-hidden .

    In fact  overflow-hidden won't even show rows with inline-block s , or any rows or cells that follow  an inline-block  row .

     I don't like it , but I think I will have to give up on inline-block s  and  overflow-hidden .  Boo hiss !

    Unless there is some javascript magic that can do it .

    Thanks , I'll work on the above image one first . 

     

  8. Hello & Thanks ,

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

    I was trying  to make an 'inline-block'  element act like a 'block' (top <div>) .  

    I don't know the name for that , i.e.  when I manually decrease the width of the browser window , 

    I want the 'inline-block'  'cell' to stay 'inline' , not pop down on the next line .  

    But no such luck . Eventually (long time and many trials) , I  tried  the 'display: flex' option on the 'row' containing the 'cell' in question .

    Surprise surprise , it worked .

    Now the other thing I want to happen is to float  the  "left cell's"  menu buttons ,

    so that when I scroll the page , the 'menu cell' scrolls along with it . 

    Pls , how can I make this happen .  Thanks ! 

    <!DOCTYPE  html>
    <html>
    
    <head>
        <title>DIVs Template WIP</title>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DivsOnlyTemplate</title>
        <!--  file:///C:/vmars.us/DivsOnly-STARTover.html 
            https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
            https://htmlformatter.com/
            https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 
    -->
        <style type="text/css">
            .button {
                background-color: #5A697D;
                border: none;
                color: #C8982B;
                color: #D9B04E;
                text-align: center;
                text-decoration: none;
                text-shadow: 1px 1px #000000;
                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;
            }
        </style>
    </head>
    
    <body style="background-color: #000000;">
        <br>
    
        <div class="Table" style="border-style: solid;
            
            text-align: center;    
            border-color: #5A697D;
            border-width: 16px;">
            <!-- ============NewRow============== -->
            <div class="Row" style="border-style: solid solid solid solid; display: flex; 
            border-width: 4px; background-color: #000000; text-align: left; ">
            
                <div class="Cell" style="width: 200px; border-style: solid; border-color: #000000; 
            background-color: #D3DDEB; display: inline-block; text-align: center; padding-left: 5px;  
            padding-right: 5px; ">
    
           
           
    <br><br> <a href="http://vmars.us/automaton/automaton-index.html" target="_blank">
                            <button class="button">Automaton</button></a>
    <br><br> <a href="http://vmars.us/freeware/index.html" target="_blank">
                            <button class="button">Freeware</button></a>
    <br><br> <a href="http://vmars.us/javascript/ListOfGames.html" target="_blank">
                            <button class="button">Games</button></a>
    <br><br> <a href="http://vmars.us/Helps/HelpsPage.html" target="_blank">
                            <button class="button">Helps</button></a>
    <br><br> <a href="http://vmars.us/myFavsLinks.html" target="_blank">
                            <button class="button">Links</button></a>
    <br><br>  <a href="http://vmars.us/Spiritual/SpiritualPage.html" target="_blank">
                            <button class="button">Spiritual</button></a>
    <br><br><br><br>
    
                            
    
                            </div>  <!-- <div class="Cell"  -->
                
                <div class="Cell" style="text-align:center; border-style: none; border-color: none; 
                        background-color: #FFFFFF; display: inline-block; width: 100%; margin:2px; ">
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2    Row 1 Column 2    Row 1 Column 2    Row 1 Column 2    Row 1 Column 2  
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2
            <br>Row 1 Column 2    Row 1 Column 2    Row 1 Column 2    Row 1 Column 2    Row 1 Column 2  
    
    
        </div>  <!-- <div class="Cell"  -->
            </div>
            <!-- <div class="Row"  -->
        </div>
        <!--  <div class="Table">  -->
    
    </body>
    
    </html>

     

     

     

     

    website.png

  9. Hello & Thanks , 

    I am having trouble giving a <div>  a background color :

    <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block;
            padding-left: 5px;  
            padding-right: 5px; "> 

    I am using this example: https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7  

    I am using inline style= , when I get proper results , then I will transpose code into css styles .

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>HTML5</title>
    <meta charset="utf-8">
    <style>
    body {
        font-family: Verdana, sans-serif;
        font-size: 0.8em;
    }
    
    header, nav, section, article, footer, div.city {
        border: 1px solid grey;
        margin: 5px;
        padding: 8px;
    }
    
    nav ul {
        margin: 0;
        padding: 0;
    }
    
    nav ul li {
        display: inline;
        margin: 5px;
    }
    </style>
    </head>
    
    <body>
    <header>
      <h1>HTML5 Skeleton</h1>
    </header>
    
    <nav>
    <ul>
      <li>News</li>
      <li>Sports</li>
      <li>Weather</li>
    </ul>
    </nav>
    
    <article>
    
    <h2>Famous Cities</h2>
    
    <div class="London" style="background-color: #00FF00;">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    
    <div class="Paris" style="background-color: #FF0000;">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </div>
    
    <div class="Tokyo" style="background-color: #0000FF;">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>
    
    </article>
    
    <footer>
    <p>&copy; 2014 W3Schools. All rights reserved.</p>
    </footer>
    
    </body>
    </html>

    And here is my example code:

    <!DOCTYPE  html>
    <html>
    
    <head>
        <title>DIVs Template WIP</title>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DivsOnlyTemplate</title>
        <!--  file:///C:/vmars.us/DivsOnly-STARTover.html 
            https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
            https://htmlformatter.com/
            https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 
    -->
        <style type="text/css">
    
        </style>
    </head>
    
    <body style="background-color: #FFFFFF;">
        <br>
    
        <div class="Table" style="border-style: solid;
            text-align: center;    
            border-color: #5A697D;
            border-width: 16px;">
            <!-- ============NewRow============== -->
            <p></p>
            <div class="Row" style="border-style: solid solid solid solid;
            border-width: 4px;
            border-color: #000000;">
                <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block;
            padding-left: 5px;  
            padding-right: 5px; ">
                    <p style="border-style: solid; border-color: #0000FF; background-color: D3DDEB"> Row 1 Column 1
                        <br><img src="Empty.png" alt="Empty.png"></p>
                </div>
                <!-- <div class="Cell"  -->
                <div class="Cell" style="width:70%; border-style: solid; border-color: #00FF00; background-color: 000000; display: inline-block;
            padding-left: 5px;  
            padding-right: 5px; ">
                    <p> Row 1 Column 2
                        <br><img src="Empty.png" alt="Empty.png"> </p>
                </div>
                <!-- <div class="Cell"  -->
            </div>
            <!-- <div class="Row"  -->
    
        </div>
        <!--  <div class="Table">  -->
    
    </body>
    
    </html>

    Please what am I doing wrong ?

    Thanks

  10. Hello & Thanks ,

    In the code below , I am getting an extraneous  "_"  underscore after each "Button" . 

    Pls , how can I avoid this ? 

    Thanks

    <!DOCTYPE html>
    <html>
    <head>
    <title>Previous-Next-Buttons-NoCss</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <h2>Previous-Next-Buttons-NoCss-W3invision.html</h2>
    
    <p style="text-align:center">
      <br>  <br>  
     <a href="Previous-Next-Buttons-NoCss-01.html"> <input type="button" value="Previous-Next-Buttons-NoCss-01.html" /> </a>
    &nbsp; &nbsp <a href="Previous-Next-Buttons-NoCss-02.html"> <input type="button" value="Previous-Next-Buttons-NoCss-02.html" /> </a>
    &nbsp; &nbsp <a href="Previous-Next-Buttons-NoCss-03.html"> <input type="button" value="Previous-Next-Buttons-NoCss-03.html" /> </a>
     <br>  <br>
    </p>
      
    </body>
    </html> 

     

  11. Also tried :

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Divs & Blocks</title>
    <style>
    
    .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;
    }
      table.center {
                           margin-right:auto; 
                           margin-left:auto;      
    }
    
      table { border: 8px solid #D9B04E;
                 width: auto;
                 height: auto;
      }
    
      #DivWholePage {  border: 24px solid #282A36;
      }
    
    span.a {
        display: inline; /* the default for span */
        width: 100px;
        height: 100px;
        padding: 5px;
        border: 1px solid blue;    
        background-color: yellow; 
    }
    
    span.b {
        display: inline-block;
        margin-top: 1px;
        width: 250px;
        height: 300px;
        border: 0px ;        
        padding: 5px;
        background-color: lightblue; 
    }
    
    span.c {
        display: block;
        margin-top: 1px;
        width: 500px;
        height: 300px;
        padding: 5px;
        border: 0px ;        
        background-color: yellow; 
    }
    </style>
    </head>
    <body>
    
    <div id="DivWholePage">
    <div id="TopRightImage" style="text-align:center;">      
        <br><button class="button">Dancing Man Kit -Docs & Pics</button>
    </div> <!-- TopRightImage  -->   
    
        <br><br>
    
    <div>
    	<table  class="center" style="text-align: left; height:100vh;">
    <tr>
    <td>
    <span class="b"><img src="Arms-1.png" alt="SmileyFace.png">
             <br><br>&nbsp;  &nbsp;  &nbsp;  
                  &nbsp; Attaching Arms </span> 
    </td>              
    <td>
    <span class="c">      <br><br>     Attaching Arms :
          <br><br> Notice how the forearms turn out and away from the body .        
          <br>The purpose of this is so that the arms don't collide with the body
          <br>as they swing while dancing .
          <br>To make this happen , you need to twist the forearm out a bit  
          <br>as you glue the upper arm to the forearm . Make one forearm  
          <br>twist to the right . And twist the other forearm to the left ,
          <br> as shown in the photo to left . </span> 
    </td>
    </tr>
    </table>
    </div>
    <br><br>
    <div>
    	<table  class="center" style="text-align: left; height:100vh;">
    <tr>
    <td>
    <span class="b"><img src="Arms-1.png" alt="SmileyFace.png">
             <br><br>&nbsp;  &nbsp;  &nbsp;  
                  &nbsp; Attaching Arms 
    </span> 
    </td>              
    <td>
    <span class="c">      <br><br>     Attaching Arms :
          <br><br> Notice how the forearms turn out and away from the body .        
          <br>The purpose of this is so that the arms don't collide with the body
          <br>as they swing while dancing .
          <br>To make this happen , you need to twist the forearm out a bit  
          <br>as you glue the upper arm to the forearm . Make one forearm  
          <br>twist to the right . And twist the other forearm to the left ,
          <br> as shown in the photo to left . 
    </span> 
    </td>
    </tr>
    </table>
    </div>
    </div>
    </body>
    </html>

    But ran into extra spacing at top .

  12. For example :

      table.center {
                           margin-top:1px;
                           margin-right:auto; 
                           margin-left:auto;      
    }

      table { border: 8px solid #D9B04E;
                 width: auto;
                 height: auto;
      }
      td,tr .MarginTop { margin-top:1px; 
      }

         <table  class="center"  style="text-align: left; height:100vh;">
          <tbody>
          <tr class="MarginTop">
          <td class="MarginTop" >
                 <img src="Arms-1.png" alt="SmileyFace.png">
             <br><br>&nbsp;  &nbsp;  &nbsp;  
                  &nbsp; Attaching Arms 
          </td>
          <td class="MarginTop">  


    None of these work . 

  13. Thanks ,

    I understand what you are saying 

    But actually I have put in may hours trying all sorts of things with margins .

    I was hopeful that  margin-top:1px; would do the trick , but nogo . 

    Also tried Divs and Blocks . 

    But haven't gotten the results I am after .

    So my last   post  is the best I came up with .

    So I'll keep trying .

    Thanks

  14. https://validator.w3.org/nu/#textarea


    Thanks , no errors now .

    This is the closest I can get so far .

    Still table 1  has too much  space at top and bottom .

    Can you help me out here .  Thanks

    <!DOCTYPE html>
    <html  lang="en">
    <head>
    <title>Table spacing problem</title>
    <style>
    .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;
    }
      table.center {
                           margin-right:auto; 
                           margin-left:auto;      
    }
    
      table { border: 8px solid #D9B04E;
                 width: auto;
                 height: auto;
      }
    
      #DivWholePage {  border: 24px solid #282A36;
      }
    
    </style>
    </head>
    <body>
    <div id="DivWholePage">
    <div id="TopRightImage" style="text-align:center;">      
        <br><button class="button">Dancing Man Kit -Docs & Pics</button>
    </div> <!-- TopRightImage  -->   
    
        <br><br>
    <!-- =====================NEW TABLE==================== -->
    	<table  class="center" style="text-align: left; height:100vh;">
          <tbody>
          <tr>
          <td>
                 <img src="Arms-1.png" alt="SmileyFace.png">
             <br><br>&nbsp;  &nbsp;  &nbsp;  
                  &nbsp; Attaching Arms 
          </td>
          <td>  
          <br><br>     Attaching Arms :
          <br><br> Notice how the forearms turn out and away from the body .        
          <br>The purpose of this is so that the arms don't collide with the body
          <br>as they swing while dancing .
          <br>To make this happen , you need to twist the forearm out a bit  
          <br>as you glue the upper arm to the forearm . Make one forearm  
          <br>twist to the right . And twist the other forearm to the left ,
          <br> as shown in the photo to left . 
          </td> 
          </tr>      
          </tbody>
      </table>
          <br><br>
    <!-- =====================NEW TABLE==================== -->
    	<table  class="center" style="text-align: left; height:100vh; " >
          <tbody>
          <tr>
          <td >  
                 <img src="ArmsToShoulder-2.png" alt="SmileyFace.png">
          <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png">
                  <img src="Axle-EnndCap-1.png" alt="SmileyFace.png">
          <br>       
                  Attaching Arms to Shoulders
          </td>
    
          <td>  
          <br>              Attaching Arms to Shoulders :
          <br><br> Make sure the forearms turn out away from the body .        
          <br>Thread the axle thru the arm and thru the 
          <br>end cap piece and into the shoulder hole . 
          <br>Test it out to make sure axle is the correct length . 
          <br>as shown in photos at left .
          </td>
          </tr>      
          </tbody>
      </table>
        
    </div> <!--  <div id="DivWholePage">  -->
    </body>
    </html>

     

     

  15. This works for the 2nd <td>

    But for 1st <td> there is 200px of space of the bottom .

    td { padding-top: 5px;
           padding-right: 5px;
           padding-left: 5px;
           padding-bottom: 5px;
           vertical-align: top;  
      }
    so right now code looks like:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .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;
    }
      table.center { 
        margin-right:auto; 
        margin-left:auto; 
    }
      table { border: 8px solid #D9B04E;
      }
    td { padding-top: 5px;
           padding-right: 5px;
           padding-left: 5px;
           padding-bottom: 5px;
           vertical-align: top;  
      }
    #DivWholePage {  border: 24px solid #282A36;
      }
    
    </style>
    </head>
    <body>
    <div id="DivWholePage">
    <div id="TopRightImage" style="text-align:center;">      
        <br><button class="button">Dancing Man Kit -Docs & Pics</button></a>
    </div> <!-- TopRightImage  -->   
    
        <br><br>
    <!-- =====================NEW TABLE==================== -->
    	<table  class="center" style="text-align: left; height:100vh; " >
          <tbody>
          <tr >
          <td>  
                 <img src="Arms-1.png" alt="SmileyFace.png">
             <br><br>&nbsp;  &nbsp;  &nbsp;  
                  Attaching Arms 
          </td>
          <td >  
          <br><br>     Attaching Arms :
          <br><br> Notice how the forearms turn out and away from the body .        
          <br>The purpose of this is so that the arms don't collide with the body
          <br>as they swing while dancing .
          <br>To make this happen , you need to twist the forearm out a bit  
          <br>as you glue the upper arm to the forearm . Make one forearm  
          <br>twist to the right . And twist the other forearm to the left ,
          <br><==== as shown in the photo .
                 
          </td>
          </tr>      
          </tbody>
      </table>
          <br><br>
    <!-- =====================NEW TABLE==================== -->
    	<table  class="center" style="text-align: left; height:100vh; " >
          <tbody>
          <tr>
          <td >  
                 <img src="ArmsToShoulder-2.png" alt="SmileyFace.png">
          <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png">
                  <img src="Axle-EnndCap-1.png" alt="SmileyFace.png">
          <br>       
                  Attaching Arms to Shoulders
          </td>
    
          <td>  
          <br>              Attaching Arms to Shoulders :
          <br><br> Make sure the forearms turn out away from the body .        
          <br>Thread the axle thru the arm and thru the 
          <br>end cap piece and into the shoulder hole . 
          <br>Test it out to make sure axle is the correct length . 
          <br>You may have cut the axle a bit .
          <br>Next glue the axle into the endcap , making sure to keep
          <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> .
          <br>When glue is dry , mount the arm making sure the arm
          <br>swings freely . If not you may have to sand off excess glue .
          <br>Next glue the axle (which now includes the arm and endcap) 
          <br>into the shoulder hole . Again making sure the arm swings . 
          <br>Repeat same procedure for the other arm .
          <br><==== as shown in photos .
          </td>
          </tr>      
          </tbody>
      </table>
        <br><br>
    </div id="DivWholePage">
    </body>
    </html>

    How do I eliminate all that space at bottom ?

    Thanks

  16. When I use this:

    td { padding-top: 5px;
           padding-right: 5px;
           padding-left: 5px;
           padding-bottom: 5px;
      }
    The right and left padding works fine

    but top and bottom padding don't work .

    Still need help Thanks

×
×
  • Create New...