vmars316
-
Posts
480 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by vmars316
-
-
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>
-
-
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
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 finebut top and bottom padding don't work .
Still need help Thanks
Trouble with alert placement ?
in CSS
Posted
Thanks;
I thought I would try global variables .
The Alert works fine .
Thanks