...

View Full Version : Side Navigation Bar



elad
10-25-2011, 10:27 PM
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! :thumbsup:

Excavator
10-25-2011, 10:28 PM
Hello elad,
That's a pretty basic layout. Have you tried anything yet?

elad
10-25-2011, 10:42 PM
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?

Excavator
10-25-2011, 10:50 PM
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 (http://css.maxdesign.com.au/floatutorial/).

Have a look at this for starters. Just copy/paste the entire code into a new .html document and view it in your browser -
<!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>

elad
10-25-2011, 11:52 PM
Excavator thank you! I examined the code you attached, and came up with this simple result which seems to work almost fine:


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

Excavator
10-25-2011, 11:54 PM
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.

elad
10-25-2011, 11:58 PM
because of the overflow... right, thanks!

elad
11-20-2011, 08:24 PM
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? :confused:

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

Excavator
11-20-2011, 11:08 PM
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 -
<!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.

elad
11-21-2011, 01:53 AM
No I afraid it still float drops:


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

Excavator
11-21-2011, 04:06 AM
Give #page-container a width.

elad
11-21-2011, 08:19 AM
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.

Excavator
11-21-2011, 09:45 AM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum