Jump to content

vmars316

Members
  • Content Count

    431
  • Joined

  • Last visited

Posts posted by vmars316

  1. I am still working on the same html, css and js, problem (contenteditable & creating Articleheader/TexrArea) working code here: 

    http://vmars.us/ShowMe/DIY-Html-Master-WIP-02.html 

    
    <!DOCTYPE html>
    <html> 
    <!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
    <!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		
    <title>DIY-Html-Master-WIP-01.html</title>
    		<style >
    		
    			body {
    				margin:0;
    				padding:0;
    				font-family: Sans-Serif;
    				line-height: 1.5em;
    			}
    			
    			#header  {
    				background: #ccc;
    <!-- 				height: 100px;  -->
    				text-align: center;
    			}
    			
    			#header {
    				margin: 0;
    				padding-top: 0px;
    				padding-bottom: 15px;
        text-align: center;
    				font-size: 12px;
    			}
    
    			p {
    				font-size: 18px;
        font-style: normal;
        }
    
    			#p_tgh {
    				font-size: 12px;
        font-style: normal;
    			}
    
    			#p_ah {
    				font-size: 18px;
        font-style: bold;
        }
    			
    			#section {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 100%;
    			}
    			
    			#nav {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 230px;
    				margin-left: -100%;
    				background: #eee;
    			}
    
    			#footer {
    				clear: left;
    				width: 100%;
    				background: #ccc;
    				text-align: center;
    				padding: 4px 0;
    			}
    	
    			#wrapper {
    				overflow: hidden;
    			}
    						
    			#content {
    				margin-left: 230px; /* Same as 'nav' width */
    			}
    			
    			.innertube {
    				margin: 15px; /* Padding for content */
    				margin-top: 0;
    			}
    		
    			li {
       list-style-type:none;
    
    <!--   				color: #555555;  -->
    			}
    	
    			nav ul {
    				list-style-type: none; 
    				margin: 0;
    				padding: 0;
    			}
    			
    			nav ul a {
    				color: darkgreen;
    				text-decoration: none;
            }
    		
            </style>
    	
    	</head>
    	
    	<body>		
    
    		<header id="header">
    			<div class="innertube">
    			    <br>
    				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
    			</div>
    		</header>
    		
    		<div id="wrapper"> <!--    -->
    			<section id="section">
    				<div id="content">
    					<div class="innertube">
    						<p contenteditable id="p_ah" >Article Heading</p>
    						<p contenteditable id="p_tgh" >Text paragraph</p>
    					</div>
    				</div>
    			</section>
    			
    			<nav id="nav">
    				<div class="innertube">
    					<h2 contenteditable >URL Links</h2>
    					<ul>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
    					</ul>
    				</div>
    			</nav>
    		
    		</div>
    		
    		<footer id="footer">
    			<div class="innertube">
    				<p contenteditable >Footer...</p>
    			</div>
    		</footer>
    
          <div>
             <!--  Buttons Header  createNewLink  -->
             <button onclick="createNewLink()">Add New Link</button>
             <button onclick="createArticleHeader()">Add New Article Heading</button>
             <button onclick="createTextArea()">Add New Text Area</button>
          </div>
          <!--  Buttons Header  -->
    
    	<script id="js" contenteditable >
    function createNewLink(text= "NewLink") {
              var li_nl = document.createElement("li");
    <!--		  alert("I am an alert box!");  -->
              li_nl.innerHTML = text;
              li_nl.setAttribute("contenteditable", "true");
              var nav = document.getElementById("nav"); 
              nav.appendChild(li_nl);
            }
    		</script>	
    
    	<script id="js" contenteditable >
    function createTextArea(text= "Text paragraph") {
              var p_tgh = document.createElement("p");
              p_tgh.innerHTML = text;
              p_tgh.setAttribute("contenteditable", "true");
              var content = document.getElementById("content");
              content.appendChild(p_tgh);
            }
    		</script>	
    
    	<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);
    }
    </script>
    
    <!DOCTYPE html>
    <html> 
    <!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
    <!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		
    <title>DIY-Html-Master-WIP-01.html</title>
    		<style >
    		
    			body {
    				margin:0;
    				padding:0;
    				font-family: Sans-Serif;
    				line-height: 1.5em;
    			}
    			
    			#header  {
    				background: #ccc;
    <!-- 				height: 100px;  -->
    				text-align: center;
    			}
    			
    			#header {
    				margin: 0;
    				padding-top: 0px;
    				padding-bottom: 15px;
        text-align: center;
    				font-size: 12px;
    			}
    
    			p {
    				font-size: 18px;
        font-style: normal;
        }
    
    			#p_tgh {
    				font-size: 12px;
        font-style: normal;
    			}
    
    			#p_ah {
    				font-size: 18px;
        font-style: bold;
        }
    			
    			#section {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 100%;
    			}
    			
    			#nav {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 230px;
    				margin-left: -100%;
    				background: #eee;
    			}
    
    			#footer {
    				clear: left;
    				width: 100%;
    				background: #ccc;
    				text-align: center;
    				padding: 4px 0;
    			}
    	
    			#wrapper {
    				overflow: hidden;
    			}
    						
    			#content {
    				margin-left: 230px; /* Same as 'nav' width */
    			}
    			
    			.innertube {
    				margin: 15px; /* Padding for content */
    				margin-top: 0;
    			}
    		
    			li {
       list-style-type:none;
    
    <!--   				color: #555555;  -->
    			}
    	
    			nav ul {
    				list-style-type: none; 
    				margin: 0;
    				padding: 0;
    			}
    			
    			nav ul a {
    				color: darkgreen;
    				text-decoration: none;
            }
    		
            </style>
    	
    	</head>
    	
    	<body>		
    
    		<header id="header">
    			<div class="innertube">
    			    <br>
    				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
    			</div>
    		</header>
    		
    		<div id="wrapper"> <!--    -->
    			<section id="section">
    				<div id="content">
    					<div class="innertube">
    						<p contenteditable id="p_ah" >Article Heading</p>
    						<p contenteditable id="p_tgh" >Text paragraph</p>
    					</div>
    				</div>
    			</section>
    			
    			<nav id="nav">
    				<div class="innertube">
    					<h2 contenteditable >URL Links</h2>
    					<ul>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
    					</ul>
    				</div>
    			</nav>
    		
    		</div>
    		
    		<footer id="footer">
    			<div class="innertube">
    				<p contenteditable >Footer...</p>
    			</div>
    		</footer>
    
          <div>
             <!--  Buttons Header  createNewLink  -->
             <button onclick="createNewLink()">Add New Link</button>
             <button onclick="createArticleHeader()">Add New Article Heading</button>
             <button onclick="createTextArea()">Add New Text Area</button>
          </div>
          <!--  Buttons Header  -->
    
    	<script id="js" contenteditable >
    function createTextArea(text= "Text paragraph") {
              var p_tgh = document.createElement("p");
              p_tgh.innerHTML = text;
              p_tgh.setAttribute("contenteditable", "true");
              var content = document.getElementById("content");
              content.appendChild(p_tgh);
            }
    		</script>	
    
    	<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);
    }
    </script>
    </body></html></script>

    Thanks for help

  2. I am still working on the same html, css and js, problem (contenteditable & creating Articleheader/TexrArea) full code here: 

    http://vmars.us/ShowMe/DIY-Html-Master-WIP-02.html  

    
    <!DOCTYPE html>
    <html> 
    <!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
    <!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		
    <title>DIY-Html-Master-WIP-01.html</title>
    		<style >
    		
    			body {
    				margin:0;
    				padding:0;
    				font-family: Sans-Serif;
    				line-height: 1.5em;
    			}
    			
    			#header  {
    				background: #ccc;
    <!-- 				height: 100px;  -->
    				text-align: center;
    			}
    			
    			#header {
    				margin: 0;
    				padding-top: 0px;
    				padding-bottom: 15px;
        text-align: center;
    				font-size: 12px;
    			}
    
    			p {
    				font-size: 18px;
        font-style: normal;
        }
    
    			#p_tgh {
    				font-size: 12px;
        font-style: normal;
    			}
    
    			#p_ah {
    				font-size: 18px;
        font-style: bold;
        }
    			
    			#section {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 100%;
    			}
    			
    			#nav {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 230px;
    				margin-left: -100%;
    				background: #eee;
    			}
    
    			#footer {
    				clear: left;
    				width: 100%;
    				background: #ccc;
    				text-align: center;
    				padding: 4px 0;
    			}
    	
    			#wrapper {
    				overflow: hidden;
    			}
    						
    			#content {
    				margin-left: 230px; /* Same as 'nav' width */
    			}
    			
    			.innertube {
    				margin: 15px; /* Padding for content */
    				margin-top: 0;
    			}
    		
    			li {
       list-style-type:none;
    
    <!--   				color: #555555;  -->
    			}
    	
    			nav ul {
    				list-style-type: none; 
    				margin: 0;
    				padding: 0;
    			}
    			
    			nav ul a {
    				color: darkgreen;
    				text-decoration: none;
            }
    		
            </style>
    	
    	</head>
    	
    	<body>		
    
    		<header id="header">
    			<div class="innertube">
    			    <br>
    				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
    			</div>
    		</header>
    		
    		<div id="wrapper"> <!--    -->
    			<section id="section">
    				<div id="content">
    					<div class="innertube">
    						<p contenteditable id="p_ah" >Article Heading</p>
    						<p contenteditable id="p_tgh" >Text paragraph</p>
    					</div>
    				</div>
    			</section>
    			
    			<nav id="nav">
    				<div class="innertube">
    					<h2 contenteditable >URL Links</h2>
    					<ul>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
    					</ul>
    				</div>
    			</nav>
    		
    		</div>
    		
    		<footer id="footer">
    			<div class="innertube">
    				<p contenteditable >Footer...</p>
    			</div>
    		</footer>
    
          <div>
             <!--  Buttons Header  createNewLink  -->
             <button onclick="createNewLink()">Add New Link</button>
             <button onclick="createArticleHeader()">Add New Article Heading</button>
             <button onclick="createTextArea()">Add New Text Area</button>
          </div>
          <!--  Buttons Header  -->
    
    	<script id="js" contenteditable >
    function createNewLink(text= "NewLink") {
              var li_nl = document.createElement("li");
    <!--		  alert("I am an alert box!");  -->
              li_nl.innerHTML = text;
              li_nl.setAttribute("contenteditable", "true");
              var nav = document.getElementById("nav"); 
              nav.appendChild(li_nl);
            }
    		</script>	
    
    	<script id="js" contenteditable >
    function createTextArea(text= "Text paragraph") {
              var p_tgh = document.createElement("p");
              p_tgh.innerHTML = text;
              p_tgh.setAttribute("contenteditable", "true");
              var content = document.getElementById("content");
              content.appendChild(p_tgh);
            }
    		</script>	
    
    	<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);
    }
    </script>
    
    <!DOCTYPE html>
    <html> 
    <!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
    <!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		
    <title>DIY-Html-Master-WIP-01.html</title>
    		<style >
    		
    			body {
    				margin:0;
    				padding:0;
    				font-family: Sans-Serif;
    				line-height: 1.5em;
    			}
    			
    			#header  {
    				background: #ccc;
    <!-- 				height: 100px;  -->
    				text-align: center;
    			}
    			
    			#header {
    				margin: 0;
    				padding-top: 0px;
    				padding-bottom: 15px;
        text-align: center;
    				font-size: 12px;
    			}
    
    			p {
    				font-size: 18px;
        font-style: normal;
        }
    
    			#p_tgh {
    				font-size: 12px;
        font-style: normal;
    			}
    
    			#p_ah {
    				font-size: 18px;
        font-style: bold;
        }
    			
    			#section {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 100%;
    			}
    			
    			#nav {
    				padding-bottom: 10010px;
    				margin-bottom: -10000px;
    				float: left;
    				width: 230px;
    				margin-left: -100%;
    				background: #eee;
    			}
    
    			#footer {
    				clear: left;
    				width: 100%;
    				background: #ccc;
    				text-align: center;
    				padding: 4px 0;
    			}
    	
    			#wrapper {
    				overflow: hidden;
    			}
    						
    			#content {
    				margin-left: 230px; /* Same as 'nav' width */
    			}
    			
    			.innertube {
    				margin: 15px; /* Padding for content */
    				margin-top: 0;
    			}
    		
    			li {
       list-style-type:none;
    
    <!--   				color: #555555;  -->
    			}
    	
    			nav ul {
    				list-style-type: none; 
    				margin: 0;
    				padding: 0;
    			}
    			
    			nav ul a {
    				color: darkgreen;
    				text-decoration: none;
            }
    		
            </style>
    	
    	</head>
    	
    	<body>		
    
    		<header id="header">
    			<div class="innertube">
    			    <br>
    				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
    			</div>
    		</header>
    		
    		<div id="wrapper"> <!--    -->
    			<section id="section">
    				<div id="content">
    					<div class="innertube">
    						<p contenteditable id="p_ah" >Article Heading</p>
    						<p contenteditable id="p_tgh" >Text paragraph</p>
    					</div>
    				</div>
    			</section>
    			
    			<nav id="nav">
    				<div class="innertube">
    					<h2 contenteditable >URL Links</h2>
    					<ul>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
    						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
    					</ul>
    				</div>
    			</nav>
    		
    		</div>
    		
    		<footer id="footer">
    			<div class="innertube">
    				<p contenteditable >Footer...</p>
    			</div>
    		</footer>
    
          <div>
             <!--  Buttons Header  createNewLink  -->
             <button onclick="createNewLink()">Add New Link</button>
             <button onclick="createArticleHeader()">Add New Article Heading</button>
             <button onclick="createTextArea()">Add New Text Area</button>
          </div>
          <!--  Buttons Header  -->
    
    	<script id="js" contenteditable >
    function createTextArea(text= "Text paragraph") {
              var p_tgh = document.createElement("p");
              p_tgh.innerHTML = text;
              p_tgh.setAttribute("contenteditable", "true");
              var content = document.getElementById("content");
              content.appendChild(p_tgh);
            }
    		</script>	
    
    	<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);
    }
    </script>
    </body></html></script>

    Thanks for help

  3. Hello & Thanks ;

    I did read  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters 

    But it was too much info , I couldn't understand it  . 

    I have heard that using global variables is bad practice .

    Is that true here ? 

    It all runs fine .

    I read thru w3Schools  js css html  Tutorials years ago .

    So yesterday & today , i read thru this series of Tutorials :

     https://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model 

    I highly recommend it to newbies or oldies like me .

    Thanks All

     

  4. 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

  5. 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 .

     

  6. 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

  7. 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 ! 

  8. 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

  9. 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>

     

  10. 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 . 

     

  11. 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

  12. 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

  13. 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> 

     

  14. 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 .

  15. 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 . 

  16. 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

×
×
  • Create New...