Jump to content

vmars316

Members
  • Content Count

    269
  • Joined

  • Last visited

Community Reputation

1 Neutral

About vmars316

  • Rank
    Member

Profile Information

  • Location
    Brownsville, Tx
  1. vmars316

    Chart of Html elements & allowable properties ?

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

    How to scroll left side menu ?

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

    How to scroll left side menu ?

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

    How to scroll left side menu ?

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

    How to scroll left side menu ?

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

    How to scroll left side menu ?

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

    Having Trouble with <div style="background-color:">

    Ugh ! Thanks dsonesuk , Sorry , I missed that .
  9. 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
  10. vmars316

    Extraneous  "_"  underscore after Button

    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;}
  11. 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>
  12. vmars316

    Html spacing of Tables

    Thank you very much ! End of problem .
  13. 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
  14. 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 .
  15. 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 .
×