vmars316
-
Posts
480 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by vmars316
-
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
-
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 .
-
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
-
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
-
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
-
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 !
-
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 .
-
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
-
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
-
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>
-
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 .
-
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
-
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>
-
Having Trouble with <div style="background-color:">
vmars316 replied to vmars316's topic in HTML/XHTML
Ugh ! Thanks dsonesuk , Sorry , I missed that . -
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>© 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
-
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;}
-
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>   <a href="Previous-Next-Buttons-NoCss-02.html"> <input type="button" value="Previous-Next-Buttons-NoCss-02.html" /> </a>   <a href="Previous-Next-Buttons-NoCss-03.html"> <input type="button" value="Previous-Next-Buttons-NoCss-03.html" /> </a> <br> <br> </p> </body> </html>
-
Thank you very much ! End of problem .
-
However , this works fine : td.VaTop { vertical-align: top; } Now , how do I get rid of all that space at the bottom ? Thanks
-
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> 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> 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 .
-
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> Attaching Arms </td> <td class="MarginTop"> None of these work .
-
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
-
https://validator.w3.org/nu/#textarea Thanks , no errors now . This is the closest I can get so far . Still table 1 has too much space at top and bottom . Can you help me out here . Thanks <!DOCTYPE html> <html lang="en"> <head> <title>Table spacing problem</title> <style> .button{ background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif ; font-size: 24px; cursor: pointer; } span.RedTxt{ color: red; } table.center { margin-right:auto; margin-left:auto; } table { border: 8px solid #D9B04E; width: auto; height: auto; } #DivWholePage { border: 24px solid #282A36; } </style> </head> <body> <div id="DivWholePage"> <div id="TopRightImage" style="text-align:center;"> <br><button class="button">Dancing Man Kit -Docs & Pics</button> </div> <!-- TopRightImage --> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh;"> <tbody> <tr> <td> <img src="Arms-1.png" alt="SmileyFace.png"> <br><br> Attaching Arms </td> <td> <br><br> Attaching Arms : <br><br> Notice how the forearms turn out and away from the body . <br>The purpose of this is so that the arms don't collide with the body <br>as they swing while dancing . <br>To make this happen , you need to twist the forearm out a bit <br>as you glue the upper arm to the forearm . Make one forearm <br>twist to the right . And twist the other forearm to the left , <br> as shown in the photo to left . </td> </tr> </tbody> </table> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td > <img src="ArmsToShoulder-2.png" alt="SmileyFace.png"> <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png"> <img src="Axle-EnndCap-1.png" alt="SmileyFace.png"> <br> Attaching Arms to Shoulders </td> <td> <br> Attaching Arms to Shoulders : <br><br> Make sure the forearms turn out away from the body . <br>Thread the axle thru the arm and thru the <br>end cap piece and into the shoulder hole . <br>Test it out to make sure axle is the correct length . <br>as shown in photos at left . </td> </tr> </tbody> </table> </div> <!-- <div id="DivWholePage"> --> </body> </html>
-
This works for the 2nd <td> But for 1st <td> there is 200px of space of the bottom . td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; vertical-align: top; } so right now code looks like: <!DOCTYPE html> <html> <head> <style> .button{ background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif ; font-size: 24px; cursor: pointer; } span.RedTxt{ color: red; } table.center { margin-right:auto; margin-left:auto; } table { border: 8px solid #D9B04E; } td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; vertical-align: top; } #DivWholePage { border: 24px solid #282A36; } </style> </head> <body> <div id="DivWholePage"> <div id="TopRightImage" style="text-align:center;"> <br><button class="button">Dancing Man Kit -Docs & Pics</button></a> </div> <!-- TopRightImage --> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr > <td> <img src="Arms-1.png" alt="SmileyFace.png"> <br><br> Attaching Arms </td> <td > <br><br> Attaching Arms : <br><br> Notice how the forearms turn out and away from the body . <br>The purpose of this is so that the arms don't collide with the body <br>as they swing while dancing . <br>To make this happen , you need to twist the forearm out a bit <br>as you glue the upper arm to the forearm . Make one forearm <br>twist to the right . And twist the other forearm to the left , <br><==== as shown in the photo . </td> </tr> </tbody> </table> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td > <img src="ArmsToShoulder-2.png" alt="SmileyFace.png"> <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png"> <img src="Axle-EnndCap-1.png" alt="SmileyFace.png"> <br> Attaching Arms to Shoulders </td> <td> <br> Attaching Arms to Shoulders : <br><br> Make sure the forearms turn out away from the body . <br>Thread the axle thru the arm and thru the <br>end cap piece and into the shoulder hole . <br>Test it out to make sure axle is the correct length . <br>You may have cut the axle a bit . <br>Next glue the axle into the endcap , making sure to keep <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> . <br>When glue is dry , mount the arm making sure the arm <br>swings freely . If not you may have to sand off excess glue . <br>Next glue the axle (which now includes the arm and endcap) <br>into the shoulder hole . Again making sure the arm swings . <br>Repeat same procedure for the other arm . <br><==== as shown in photos . </td> </tr> </tbody> </table> <br><br> </div id="DivWholePage"> </body> </html> How do I eliminate all that space at bottom ? Thanks
-
When I use this: td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; } The right and left padding works fine but top and bottom padding don't work . Still need help Thanks
