Jump to content

vmars316

Members
  • Content count

    258
  • Joined

  • Last visited

Community Reputation

1 Neutral

About vmars316

  • Rank
    Member

Profile Information

  • Location
    Brownsville, Tx
  1. vmars316

    Html spacing of Tables

    Thank you very much ! End of problem .
  2. vmars316

    Html spacing of Tables

    However , this works fine : td.VaTop { vertical-align: top; } Now , how do I get rid of all that space at the bottom ? Thanks
  3. vmars316

    Html spacing of Tables

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

    Html spacing of Tables

    For example : table.center { margin-top:1px; margin-right:auto; margin-left:auto; } table { border: 8px solid #D9B04E; width: auto; height: auto; } td,tr .MarginTop { margin-top:1px; } <table class="center" style="text-align: left; height:100vh;"> <tbody> <tr class="MarginTop"> <td class="MarginTop" > <img src="Arms-1.png" alt="SmileyFace.png"> <br><br>&nbsp; &nbsp; &nbsp; &nbsp; Attaching Arms </td> <td class="MarginTop"> None of these work .
  5. vmars316

    Html spacing of Tables

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

    Html spacing of Tables

    https://validator.w3.org/nu/#textarea Thanks , no errors now . This is the closest I can get so far . Still table 1 has too much space at top and bottom . Can you help me out here . Thanks <!DOCTYPE html> <html lang="en"> <head> <title>Table spacing problem</title> <style> .button{ background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif ; font-size: 24px; cursor: pointer; } span.RedTxt{ color: red; } table.center { margin-right:auto; margin-left:auto; } table { border: 8px solid #D9B04E; width: auto; height: auto; } #DivWholePage { border: 24px solid #282A36; } </style> </head> <body> <div id="DivWholePage"> <div id="TopRightImage" style="text-align:center;"> <br><button class="button">Dancing Man Kit -Docs & Pics</button> </div> <!-- TopRightImage --> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh;"> <tbody> <tr> <td> <img src="Arms-1.png" alt="SmileyFace.png"> <br><br>&nbsp; &nbsp; &nbsp; &nbsp; Attaching Arms </td> <td> <br><br> Attaching Arms : <br><br> Notice how the forearms turn out and away from the body . <br>The purpose of this is so that the arms don't collide with the body <br>as they swing while dancing . <br>To make this happen , you need to twist the forearm out a bit <br>as you glue the upper arm to the forearm . Make one forearm <br>twist to the right . And twist the other forearm to the left , <br> as shown in the photo to left . </td> </tr> </tbody> </table> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td > <img src="ArmsToShoulder-2.png" alt="SmileyFace.png"> <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png"> <img src="Axle-EnndCap-1.png" alt="SmileyFace.png"> <br> Attaching Arms to Shoulders </td> <td> <br> Attaching Arms to Shoulders : <br><br> Make sure the forearms turn out away from the body . <br>Thread the axle thru the arm and thru the <br>end cap piece and into the shoulder hole . <br>Test it out to make sure axle is the correct length . <br>as shown in photos at left . </td> </tr> </tbody> </table> </div> <!-- <div id="DivWholePage"> --> </body> </html>
  7. vmars316

    Html spacing of Tables

    This works for the 2nd <td> But for 1st <td> there is 200px of space of the bottom . td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; vertical-align: top; } so right now code looks like: <!DOCTYPE html> <html> <head> <style> .button{ background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif ; font-size: 24px; cursor: pointer; } span.RedTxt{ color: red; } table.center { margin-right:auto; margin-left:auto; } table { border: 8px solid #D9B04E; } td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; vertical-align: top; } #DivWholePage { border: 24px solid #282A36; } </style> </head> <body> <div id="DivWholePage"> <div id="TopRightImage" style="text-align:center;"> <br><button class="button">Dancing Man Kit -Docs & Pics</button></a> </div> <!-- TopRightImage --> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr > <td> <img src="Arms-1.png" alt="SmileyFace.png"> <br><br>&nbsp; &nbsp; &nbsp; Attaching Arms </td> <td > <br><br> Attaching Arms : <br><br> Notice how the forearms turn out and away from the body . <br>The purpose of this is so that the arms don't collide with the body <br>as they swing while dancing . <br>To make this happen , you need to twist the forearm out a bit <br>as you glue the upper arm to the forearm . Make one forearm <br>twist to the right . And twist the other forearm to the left , <br><==== as shown in the photo . </td> </tr> </tbody> </table> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td > <img src="ArmsToShoulder-2.png" alt="SmileyFace.png"> <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png"> <img src="Axle-EnndCap-1.png" alt="SmileyFace.png"> <br> Attaching Arms to Shoulders </td> <td> <br> Attaching Arms to Shoulders : <br><br> Make sure the forearms turn out away from the body . <br>Thread the axle thru the arm and thru the <br>end cap piece and into the shoulder hole . <br>Test it out to make sure axle is the correct length . <br>You may have cut the axle a bit . <br>Next glue the axle into the endcap , making sure to keep <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> . <br>When glue is dry , mount the arm making sure the arm <br>swings freely . If not you may have to sand off excess glue . <br>Next glue the axle (which now includes the arm and endcap) <br>into the shoulder hole . Again making sure the arm swings . <br>Repeat same procedure for the other arm . <br><==== as shown in photos . </td> </tr> </tbody> </table> <br><br> </div id="DivWholePage"> </body> </html> How do I eliminate all that space at bottom ? Thanks
  8. vmars316

    Html spacing of Tables

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

    Html spacing of Tables

    Thanks , Can someone give me an example of correct css & html coding . In the mean time I will look for how to's on css margins . Thanks
  10. vmars316

    Html spacing of Tables

    Hello & Thanks , win 10 , chrome: <!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-left:auto; margin-right:auto; } table { border: 8px solid #D9B04E; } #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 width="226" height="200"> <img src="Arms-1.png" alt="SmileyFace.png"> <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Attaching Arms </td> <td> 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 width="226" height="200"> <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> 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> Pls , why does 1st table have more space showing at the Top than does 2nd table ? I would like them both to show 1 <br> from the top . Thanks
  11. vmars316

    Favourite html editors...

    Add me to the Notpad++ list :)
  12. vmars316

    How to get an iframe with no borders ?

    Please respond , Thanks
  13. vmars316

    How to get an iframe with no borders ?

    Thanks , got rid of '}' & width "" : Width is working fine now . How come this page can use html { height: 100%; https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_height_percent Also , on same page they are showing Resize values . Theoretically , could I likewise calculate a Resize value , then plug this absolute value into "td height: value" ? ? Also , I am using css .thumb:hover, .thumb:hover span { . It works fine when not using <iframe . But when I use <iframe , instead the hover object and <img show up side by side . Is there a way to get hover working ? Thanks
  14. vmars316

    How to get an iframe with no borders ?

    Hello & Thanks, Yes, the <iframe> is working , But shows up as very small height & width . My attempts to get height:100%; are not working . I whittled down my code. Can you take a look at my code & see what's the prob . Thanks <!DOCTYPE html> <head> <!-- http://vmars.us/index.html http://vmars.us/default.html --> <title> vmars.us.html </title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <style type="text/css"> /* html5 semantics tags */ article, aside, div, figure, footer, header, hgroup, menu, nav, p, section, summary{ display: block; } html { height: 100%; } #thumbwrap { } .thumb img { } .thumb span { } } body { font-size: 18px; line-height:1.25em; height: 100%;} iframe {height: 100%; } table { border-style: solid; border-color: #5A697D; border-width: 20px; } #tdLeft { text-align: center; height:100%; width:25%"; } #tdRight { text-align: left; height:100%; width:75%"; } h1, h2, h3 {font-size:22px;} </style> </head> <body style="background-color:#000000"> <!-- <body style="color:#FFFFFF"> --> <!-- =======================================TOP TABLE======== --> <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2" > <tbody> <tr> <!-- ============================================== --> <td id="tdLeft" style="background-color:#D3DDEB; text-align:center; " > <!-- <div id="topLeft" style="text-align:center;"> --> <br> <iframe src="buttons_iframe.html" style="border:none; "> </iframe> <!-- </div> <!-- id="topLeft" --> </td> <!-- https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe_frameborder_css --> <td id="tdRight" style="text-align: center; " bgcolor="#FFFFFF"> <div id="TopRightImage" style="text-align:center;"> <img src="http://vmars.us/javascript/images/Welcome-gold.png" alt="SmileyFace.png" width="150" height="35"> </div> <!-- TopRightImage --> <div id="TopRightContent" style="text-align:center;"> <br><br> ************************************ , <br><br> ============================= . <br><br> ********** <br><br> ============================= . <br><br> ************************************ : <br><br> <a href="http://vmars.us/freeware/clipLog/clipLog-Help.html" target="_blank">clipLog/clipFind : Personal Information Manager</a> <br><br> <a href="http://vmars.us/freeware/myFavs/myFavs_Help.html" target="_blank">myFavs : Internet Bookmark Manager</a> <br><br> <a href="http://vmars.us/freeware/mySort/mySort_Help.html" target="_blank">mySort : Handy Text Sorter</a> <br> <br>"All things in moderation , except for love and forgiveness" <br> </div> <!-- TopRightContent --> </td> </tr> </tbody> </table> <br> <!-- ============================================== --> </body> </html>
  15. vmars316

    How to get an iframe with no borders ?

    Foxy Mod Thanks
×