Relative Navigation Bar

[PDB1982]

I'm trying to see if there is a way to have my navigation bar follow the user as he/she scrolls down the page....I think it might have to do with JAVA, but I wanted to see if anyone knew a css trick first.

HTML Code:

<div id="sidebar">
<ul class="sidenav">
	<li>
		<a href="#">History of HTML
		<span>A brief, but informative, look into the inception of HTML and it's 

effect on the transition of the internet.</span>
		</a>
	</li>
	<li>
		<a href="#">Beginner's Guide
		<span>A look into the basic coding guidlines, and steps to take, in order to 

create your own web page.</span>
		</a>
	</li>
	<li>
		<a href="#">HTML and UNIX
		<span>Take a look at the connection that HTML and UNIX share with respect to 

sharing information and processing code.</span>
		</a>
	</li>
	<li>
		<a href="#">WYSIWYG Editors
		<span>Learn the differences between Basic, Souce Code, and WYSIWYG Editors 

when creating and finalizing your web page.</span>
		</a>
	</li>
</ul>
</div>

CSS code:

ul.sidenav {
	font-size: 1.2em;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #005094;
	border-bottom: 1px solid #3373a9;
	border-top: 1px solid #003867;
}

ul.sidenav li a{
	display: block;
	color: #fff;
	text-decoration: none;
	width: 175px;
	padding: 10px 10px 10px 35px;
	background: url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #3373a9;
	border-bottom: 1px solid #003867;
}

ul.sidenav li a:hover {
	background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #1a4c76;
}

ul.sidenav li span{  display: none; }

ul.sidenav li a:hover span {
	display: block;
	font-size: 0.8em;
	padding: 10px 0;
}

[ShawnCplus]

Use position:fixed which will keep the element in the same place on the screen even if the user scrolls the page. Also, Java != Javascript

[PDB1982]

I have tried using position: relative; within the ul.sidenav portion, but it's still stuck in the left corner.....any other ideas? Should I use the relative position in all portions?

Also, I don't know if it makes a distance, but I am using IE 7...

[ShawnCplus]

I have tried using position: relative; within the ul.sidenav portion, but it's still stuck in the left corner.....any other ideas? Should I use the relative position in all portions?

Also, I don't know if it makes a distance, but I am using IE 7...

When you use position:fixed you have to use the left and top CSS properties to position it on the page.

[PDB1982]

When you use position:fixed you have to use the left and top CSS properties to position it on the page.

do you mind passing on a quick example? Would they be auto?

[ShawnCplus]

do you mind passing on a quick example? Would they be auto?

ul#navigation {
  position: fixed;
  top: 10px;
  left: 10px;
}
/* place the ul with the ID navigation 10px from the top-left corner of the screen */

[PDB1982]

ul#navigation {
  position: fixed;
  top: 10px;
  left: 10px;
}
/* place the ul with the ID navigation 10px from the top-left corner of the screen */

so, I would add it to my code as:

ul.sidenav {
	font-size: 1.2em;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #005094;
	border-bottom: 1px solid #3373a9;
	border-top: 1px solid #003867;
	position: fixed;
	top: 10px;
	left: 10px;
}

....And it works.....I have to adjust the height for my logo, but all is well! Thanks a ton!