vmars316 Posted August 13, 2018 Share Posted August 13, 2018 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> Link to comment Share on other sites More sharing options...
vmars316 Posted August 13, 2018 Author Share Posted August 13, 2018 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 Link to comment Share on other sites More sharing options...
Funce Posted August 14, 2018 Share Posted August 14, 2018 (edited) If I'm reading you correctly, (Which I hope I am) there are two ways you can do this. You can attempt that sticky navigation, with position:fixed and some position definitions Your alternative is, constrain the height of your row (I measured 380px) and use `overflow: hidden` on your cell with your row 1 column 2's in it. This will make it scroll separately, if you're putting other things on the page (Outside the cells), I recommend the fixed position solution. Scrolled Up: Scrolled Down: Edited June 13, 2019 by Funce Old attachments 1 Link to comment Share on other sites More sharing options...
vmars316 Posted August 14, 2018 Author Share Posted August 14, 2018 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 . Link to comment Share on other sites More sharing options...
Funce Posted August 16, 2018 Share Posted August 16, 2018 (edited) On 8/14/2018 at 4:18 PM, vmars316 said: Thanks Funce , I'll try the fixed position , and the overflow:hidden on my stack of rows and cells . On 8/14/2018 at 1:32 PM, Funce said: `overflow: hidden` Oops! It seems I may have quoted the wrong property value. Very sorry. `Overflow: Auto;` works a little better for this. Edited August 16, 2018 by Funce Link to comment Share on other sites More sharing options...
vmars316 Posted August 16, 2018 Author Share Posted August 16, 2018 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> Link to comment Share on other sites More sharing options...
vmars316 Posted August 16, 2018 Author Share Posted August 16, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2018 Share Posted August 17, 2018 You can't or shouldn't use html comments <!-- --> in CSS it only causes css following the html comment in some cases ignored. CSS comments are /* */, also you have double quotes in one link at end of href source. AND MANY MORE! validate https://validator.w3.org/ Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now