...

View Full Version : New to CSS, need help with floating navigation side menu,please.



UCPChar
06-09-2010, 06:30 PM
Hello,

I've been learning as I go with HTML and CSS, and I've been asked to make a few changes on our webpage for work. I am trying to make the side navigation links float with you when you scroll. I can't seem to amend the existing code with any of the codes I've found in books and online for floating a navigation menu. So I am thinking I have to completely re-code it. If that is the case instead of just the standard plain links it has, I'd like to make the menu look nice with buttons and have it float up and down on the side of the page.

This is the original code that is there:

<tr>
<th scope="col" bgcolor="#acacac" valign="top" width="25%">
<p style="text-align: left;" class="style2"><a href="index.html" title="Home">Home</a></p>
<p style="text-align: left;" class="style2"><a href="locations.html" title="Location">Locations</a></p>
<p style="text-align: left;" class="style2"><a href="line_card.html" title="Line Card">Line Card</a></p>
<p style="text-align: left;" class="style2"><a href="specials.html" title="Specials">Specials</a></p>
<p style="text-align: left;" class="style2"><a href="contact_us.html" title="Contact Us">Contact Us</a></p>
<p style="text-align: left;" class="style2"><a href="http://epartconnection.com/" title="Online_Catalog">Online Ordering</a></p>
<p class="style2"><a href="http://epartconnection.com/"><img src="pictures/Epart.jpg" alt="Online_Catalog" longdesc="http://epartconnection.com/" width="172" height="67" /></a></p>
</th>

Scriptet
06-09-2010, 07:29 PM
I am trying to make the side navigation links float with you when you scroll.

What do you mean that the even if you scroll down the page the navigation stays on the screen where it is? To do this you just add position:fixed; to the menu, although you may need to find a workaround for IE6 as I believe there was a problem with it understanding this.

UCPChar
06-09-2010, 08:09 PM
What do you mean that the even if you scroll down the page the navigation stays on the screen where it is? To do this you just add position:fixed; to the menu, although you may need to find a workaround for IE6 as I believe there was a problem with it understanding this.

Yes, exactly. It stays in place when someone scrolls down the page. I don't see where I would put this code within the table. The menu isn't like a typical code, it is set up like on a side table with in the page, each page has the same table set up. It isn't actually apart of the style.css and I think that's my problem... hmm! I think I just figured out my problem...

Scriptet
06-09-2010, 08:21 PM
Yep adding position:fixed; (http://www.w3schools.com/Css/pr_class_position.asp) to the navigation is what you are looking for then.

Note: This will take the navigation out of normal flow so you might need to re-position some other things depending out the layout.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum