Jump to content

vmars316

Members
  • Posts

    434
  • Joined

  • Last visited

Everything posted by vmars316

  1. Hi Funce , Those are all cleared up the link below . Kindly go to : http://vmars.us/ShowMe/Html-MasterWIP-Mini.html Try clicking on the [Add New Text Area] Button . Note that the 1st 'Text Paragraph' is Grey , all subsequent 'Text Paragraph's are black . I want them all to be Grey . Pls , how can I correct that ? Thanks for your help !
  2. Here is page code minified . What is troubling me , is that the style settings for ArticleHeading(#p_ah) & TextHeading(p_tgh) are not working . Here is the working page online: Pls, show me how to fix this . http://vmars.us/ShowMe/Html-MasterWIP-Mini.html Thanks for your help ! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Master-WIP-Mini.html</title> <style> body {margin:0; padding:0; font-family: Sans-Serif; line-height: 1.5em; } #header, h1 { margin: 0; padding-top: 10px; text-align: center; background: #ccc; height: 50px; } #wrapper { overflow: hidden; } #section { padding-bottom: 10010px; margin-bottom: -10000px; float: left; width: 100%; } #content { margin-left: 230px; /* Same as 'nav' width */ } .innertube {margin: 15px; /* Padding for content */ margin-top: 0; } p { color: #000555; } #p_bn { text-align: left; } #p_ah { color: #555555; text-align: left; font-size: 18px } #p_tgh { color: #999999; text-align: left; font-size: 12px font-size: 12px } #footer { clear: left; width: 100%; background: #ccc; text-align: center; padding: 4px 0; } </style> </head> <body onload="documentURL()"> <p id="CurrentPageAddress" align="center">Html-MasterWIP-Mini.html</p> <header id="header"> <div id="innertube-01"> <br> <h1 contenteditable="">my Main Header</h1> </div> </header> <div id="wrapper"> <section id="section"> <div id="content"> <div id="innertube-02"> <!-- div.section.content.innertube.p --> <p contenteditable="" id="p_ah">Article Heading</p> <p contenteditable="" id="p_tgh">Text paragraph</p> </div> </section> <nav id="nav-01"> <h1 contenteditable="">Go To Links</h1> <ul> <div id="innertube-03"> <li><a id="li-01" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li> <li><a id="li-02" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li> <li><a id="li-03" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li> <li><a id="li-Last" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li> </nav> </div> <footer id="footer"> <div id="innertube-04"> <p contenteditable="">Footer...</p> </div> </footer> <div id="buttonDiv" align="center"> <!-- Buttons Header createNewLink --> <button onclick="createNewButton()">Add New Button</button> <button onclick="createArticleHeading()">Add New Article Heading</button> <button onclick="createTextArea()">Add New Text Area</button> </div> <script id="js" contenteditable=""> function createTextArea() { var p_tgh = document.createElement("p"); p_tgh.innerHTML = TextParagraph; p_tgh.setAttribute("contenteditable", "true"); var content = document.getElementById("innertube-02"); content.appendChild(p_tgh); } </script> <script id="js" contenteditable=""> function createArticleHeading() { var p_ah = document.createElement('p'); p_ah.innerHTML = ArticleHeading; p_ah.setAttribute('contenteditable', 'true'); var content = document.getElementById('innertube-02'); content.appendChild(p_ah); } </script> <script> var ArticleHeading = "Article Heading" var TextParagraph = "Text Paragraph" var ButtonParagraph = "New Link" var document_URL function documentURL() { document_URL = document.URL; document.getElementById("CurrentPageAddress").innerHTML = document_URL; } </script> <script id="js" contenteditable=""> function createNewButton() { var p_bn = document.createElement('li-Last'); p_bn.innerHTML = ButtonParagraph; p_bn.setAttribute('contenteditable', 'true'); var content = document.getElementById('innertube-03'); content.appendChild(p_bn); } </script> </body> </html>
  3. I am thinking the reason I haven't received any replies is that this Post is too long . So I am working on a miniature version of this . I'll be back .
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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 .
  9. Thanks Funce Wow Thank you very much ! It works great ! http://vmars.us/ShowMe/DIY-Html-Master-WIP-01.html I have a lot more to do , but you jump started me . I will Post the final version here later. Thanks
  10. 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
  11. Thanks BILU KUMAR SAU : Plenty interesting . Sorry , I should have specified , pure js only . At this point I would rather not tackle learning jquery . Thanks
  12. 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 !
  13. THanks Funce , This is useful : https://www.w3schools.com/tags/default.asp . This is useful too : https://www.w3.org/TR/CSS2/propidx.html But the one I am looking for Lists the element "table", then shows what properties are valid for that element "same table" . I am thinking it was on w3schools .
  14. 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
  15. Hello & Thanks , Seems to me that I once saw a chart of Html elements showing the allowable properties and values and inheritances of each element . Anyone know where this is located ? Ugh ! I forgot to bookmark it . Thanks
  16. hanks All ; Looks like this is as close as I am going to get . <!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>
  17. 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 .
  18. Aha , this looks promising : https://www.w3schools.com/css/css_navbar.asp Kind of the inverse of what I was thinking ,. Here , the side menu stays still , while the main window scrolls , a full-height, "sticky" verticle side navigation bar . Are these terms reserved words , or are they just an agreed upon standard : header , nav , sidenav , footer , etc.. ? Thanks
  19. 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>
  20. Ugh ! Thanks dsonesuk , Sorry , I missed that .
  21. 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
  22. Thanks dsonesuk , I tried it on several browsers Only Tor showed Buttons with underline as part of Button value . But I couldn't quite make the connection . Thanks a:link {text-decoration: none;}
  23. 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>
  24. Thank you very much ! End of problem .
  25. However , this works fine : td.VaTop { vertical-align: top; } Now , how do I get rid of all that space at the bottom ? Thanks
×
×
  • Create New...