Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    41
    Thanks
    27
    Thanked 0 Times in 0 Posts

    Question CSS Side Menu "position:fixed;"

    [RESOLVED] Okay so I've recently started a class for Programmer Analyst. Right now we just started the Web Development module and I'm trying to impress the teacher!

    So my goal is to have a Side Navigation menu Menu follow the scroll up and down the screen. I got that working but theirs a problem. When I minimize the browser ("restore down" button between the exit and minimize at the top-right(turns the browser into a smaller box)).

    It's clearly an issue with my CSS file, to be more specific:
    Code:
    position:fixed;
    margin-right:10px;
    Code:
    .sidenav{
    	margin-top:10px;
    	width:175px;
    	margin-right:10px;
    	margin-left:850px;
    	position: fixed;
    	float:right;
    	background-color:#000;
    	text-align:center;
    	border:thick #FFF solid;
    	border-radius:30px;
    	transition: all 5s ease;
    	-webkit-transition: all 5s ease;
    	-moz-transition: all 5s ease; 
    	-o-transition: all 5s ease; 
    	-ms-transition: all 5s ease;
    }
    So my question is: how can I setup the side nav so it follows the screen up and down; but also stays in the right position. As Shown in image_1 and 2 bellow.
    PS: Due tomorrow morning and I'm staying up all night trying to figure it out.

    Last edited by matz0rz; 03-15-2013 at 04:39 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Using position: fixed; is correct, but it is better to place the fixed object using top/bottom and left/right selectors.
    Your margin-left:850px; really makes a lot of empty space if it was followed.
    Try this (I have commented out what you don't need):
    Code:
    .sidenav{
    	//margin-top:10px;
    	//margin-right:10px;
    	//margin-left:850px;
    	//float:right;
    	position: fixed;
    	top: 10px;
    	right: 10px;
    	width:175px;
    ....

  • Users who have thanked sunfighter for this post:

    matz0rz (03-14-2013)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    41
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Using position: fixed; is correct, but it is better to place the fixed object using top/bottom and left/right selectors.
    Your margin-left:850px; really makes a lot of empty space if it was followed.
    Try this (I have commented out what you don't need):
    Code:
    .sidenav{
    	//margin-top:10px;
    	//margin-right:10px;
    	//margin-left:850px;
    	//float:right;
    	position: fixed;
    	top: 10px;
    	right: 10px;
    	width:175px;
    ....
    Thanks it's a little better but it still isn't perfect when I minimize. Is it possible to make a ".SideNavContainer" and have it stay fixed inside that container? I even got my teacher trying to figure it out at the moment.
    Last edited by matz0rz; 03-14-2013 at 05:54 PM.

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    I don't think you can put a fixed element inside a container.

    Anyway, I've never tried something like this, but theoretically, this should work.

    Code:
    body {
        margin:0;
        padding:0;
    }
    #container {
        margin: 0 auto; /* Centering the container */
        width: 80%; /* Giving it a width of 80% */
    }
    .SideNavContainer {
        position:fixed;
        right: 10%;
    }
    Code:
    <body>
        <div id="container">I am the container</div>
        <div class="SideNavContainer">I am the side nav</div>
    </body>
    The main container is centered as shown by margin: 0 auto;. The width is 80% so margin-left is 10% and margin-right is 10%.

    Then, your .SideNavContainer has a fixed position that is 10% away from the right.

    The main container's margin-right = .SideNavContainer's right.
    Last edited by ttkim; 03-14-2013 at 06:07 PM.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Thanks it's a little better but it still isn't perfect when I minimize.
    You might want to change the px's, which are hard coded, to %'s, which shrink when the browser is shrunk down. But that means all px's. As ttkim has shown.
    Last edited by sunfighter; 03-14-2013 at 07:53 PM.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Play with this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    body {
        margin:0;
        padding:0;
    }
    #container {
        margin: 0 auto;
        width: 90%;
    	height: 100%;
    	padding-bottom: 10px;
    	border: 1px solid blue;
    }
    .SideNavContainer {
        position:fixed;
        right: 5%;
    	top: 10px;
    	border: 1px solid red;
    	color: white;
    	background-color:#000;
    	text-align:center;
    	border:thick #FFF solid;
    	border-radius:30px;
    	transition: all 5s ease;
    	-webkit-transition: all 5s ease;
    	-moz-transition: all 5s ease;
    	-o-transition: all 5s ease;
    	-ms-transition: all 5s ease
    }
    #main {
        position:relative;
    	right: 1%;
    	padding-left: 2%;
    	padding-right: 2%;
    	margin-left: 2%;
        width: 70%;
    	height: 100%;
    	border: 1px solid red;
    }
    </style>
    </head>
    
    <body>
    <div id="container">I am the container
        <div id="main">
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    	</div>
        <div class="SideNavContainer">
    		I am the side nav<br />
    		I am the side nav<br />
    		I am the side nav<br />
    		I am the side nav<br />
    	</div>
    </div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    matz0rz (03-15-2013)

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    41
    Thanks
    27
    Thanked 0 Times in 0 Posts
    You are truly a genius! Thank you!

    Quote Originally Posted by sunfighter View Post
    Play with this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    body {
        margin:0;
        padding:0;
    }
    #container {
        margin: 0 auto;
        width: 90%;
    	height: 100%;
    	padding-bottom: 10px;
    	border: 1px solid blue;
    }
    .SideNavContainer {
        position:fixed;
        right: 5%;
    	top: 10px;
    	border: 1px solid red;
    	color: white;
    	background-color:#000;
    	text-align:center;
    	border:thick #FFF solid;
    	border-radius:30px;
    	transition: all 5s ease;
    	-webkit-transition: all 5s ease;
    	-moz-transition: all 5s ease;
    	-o-transition: all 5s ease;
    	-ms-transition: all 5s ease
    }
    #main {
        position:relative;
    	right: 1%;
    	padding-left: 2%;
    	padding-right: 2%;
    	margin-left: 2%;
        width: 70%;
    	height: 100%;
    	border: 1px solid red;
    }
    </style>
    </head>
    
    <body>
    <div id="container">I am the container
        <div id="main">
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    		I am the main body<br />
    	</div>
        <div class="SideNavContainer">
    		I am the side nav<br />
    		I am the side nav<br />
    		I am the side nav<br />
    		I am the side nav<br />
    	</div>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •