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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Side Navigation Bar

    Hello!

    I'm working on a website, I want a navigation bar on the left side, and I want the content of the site to be centered in the remaining space. Is this possible to do with CSS?

    Thanks alot!!!
    Ha-va nagila hava!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello elad,
    That's a pretty basic layout. Have you tried anything yet?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok right, yes. I put up the navigation bar in a <div> tag and positioned it in the left side (using left: 0px), and the rest of the site is just center aligned. Problem is that its centered relative to the whole page, and I want it to be centered in the remaining space between the navbar and the right edge of the page. I'm actually very new to CSS throw me a bone here?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I put up the navigation bar in a <div> tag and positioned it in the left side (using left: 0px)
    Your best bet there would be floating the side navigation. See a decent float tutorial here.

    Have a look at this for starters. Just copy/paste the entire code into a new .html document and view it in your browser -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #wrap {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #sidebar {
    	width: 150px;
    	height: 600px; /*for demo only*/
    	float: left;
    	background: #0fc;
    }
    #container {
    	margin: 0 0 0 150px;
    	background: #f90;
    	overflow: auto;
    }
    	#content {
    		width: 80%;		
    		margin: 10%;
    	}
    </style>
    </head>
    <body>
        <div id="wrap">
        	<div id="sidebar">
            <!--end sidebar--></div>
        <div id="container">
            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end content--></div>
        <!--end container--></div>
        <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excavator thank you! I examined the code you attached, and came up with this simple result which seems to work almost fine:
    Code:
    .page{
        margin-left:auto;
        margin-right:auto;
    }
    
    .navbar{
        float:left;
        width:80px;
    }
    However now I face a new problem. If I narrow the browser's window to the extent that the page's cotent is smaller then the window can contain, all of the content jumps below the navbar. I would much rather it staying put and adding a sliding handle.

    here's the relevant page so you can see the problem: http://earpiano.freehostingcloud.com/keyboard.html

    thanks!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by elad View Post
    However now I face a new problem. If I narrow the browser's window to the extent that the page's cotent is smaller then the window can contain, all of the content jumps below the navbar. I would much rather it staying put and adding a sliding handle.
    The containing #wrap in my example would accomplish this.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    elad (10-25-2011)

  • #7
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    because of the overflow... right, thanks!

  • #8
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I still have a problem. Please consider the following code as an example. it works fine but if you try narrowing down your window all of the content DIV will jump below the nav-bar. what should I do?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin: 0;
    background: #FC6;
    }

    #sidebar {
    width: 150px;
    height: 400px; /*for demo only*/
    float: left;
    background: #0fc;
    }
    #container {

    margin-left: auto;
    margin-right: auto;
    width:400px;
    background: #f90;
    overflow: auto;
    }
    #content {

    margin-left: 50px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    }
    </style>
    </head>
    <body>
    <div id="sidebar">
    <!--end sidebar--></div>
    <div id="container">
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <!--end content--></div>
    <!--end container--></div>
    </body>
    </html>

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    To stop elements from dropping when they run out of room, float drop is what that's called, make your container enclose your entire site.

    Something like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 600px;
    	margin: 0 auto;
    	background: #f90;
    	overflow: auto;
    }
    #sidebar {
    	height: 400px; /*for demo only*/
    	width: 150px;
    	float: left;
    	background: #0fc;
    }
    #content {
    	margin: 0 0 0 155px;
    	padding: 0 10px;
    }
    </style>
    </head>
    <body>
        <div id="container">
                <div id="sidebar"> 
                <!--end sidebar--></div>
            <div id="content">
                <p> 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                </p>
                <p> 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                </p>
            <!--end content--></div>
        <!--end container--></div>
    </body>
    </html>
    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No I afraid it still float drops:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    
    #page-container {
    
    	overflow: auto;
    }
    
    #sidebar {
    	width: 150px;
    	height: 400px; /*for demo only*/
    	float: left;
    	background: #0fc;
    }
    #container {
    
    	margin-left: auto;
    	margin-right: auto;
                  width:400px;
    	background: #f90;
    	overflow: auto;
    }
    	#content {
    		
    		margin-left: 50px;
    		margin-right: 10px;
    		padding-left: 10px;
    		padding-right: 10px;
    	}
    </style>
    </head>
    <body>
    <div id="page-container">
    	<div id="sidebar">
    	        <!--end sidebar--></div>
        <div id="container">
            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>d
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end content--></div>
        <!--end container--></div>
    <!--end page container--></div>
    </body>
    </html>

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Give #page-container a width.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    But if I do so it will not center the content between the sidebar and the end of the window but in a fixed positioned. I want the content to be centered relative to the window size and the side bar.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #page-container {
    	width: 80%;
    	min-width: 550px;
    	margin: 30px auto;
    	border: 1px solid #000;
    	overflow: auto;
    }
    #sidebar {
    	width: 150px;
    	height: 400px; /*for demo only*/
    	float: left;
    	background: #0fc;
    }
    #container {
    	margin-left: auto;
    	margin-right: auto;
    	width:400px;
    	background: #f90;
    	overflow: auto;
    }
    #content {
    	margin-left: 50px;
    	margin-right: 10px;
    	padding-left: 10px;
    	padding-right: 10px;
    }
    </style>
    </head>
    <body>
    <div id="page-container">
    	<div id="sidebar">
    	        <!--end sidebar--></div>
        <div id="container">
            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>d
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end content--></div>
        <!--end container--></div>
    <!--end page container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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