Jump to content

How to scroll left side menu ?


vmars316

Recommended Posts

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>

 

 

 

 

website.png

Link to comment
Share on other sites

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 , 

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

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 by Funce
Old attachments
  • Like 1
Link to comment
Share on other sites

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

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 by Funce
Link to comment
Share on other sites

hanks All ;

Looks like this is as close as I am going to get .

LiftSideNAV.jpg.2aa5e05e4c733c9abe08fcb3455367f6.jpg

 



<!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

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

LeftSideNAV.jpg

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...