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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question New to CSS, need help with floating navigation side menu,please.

    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:
    Code:
    <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>

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scriptet View Post
    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...
    Last edited by UCPChar; 06-09-2010 at 08:22 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Yep adding position:fixed; 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.


  •  

    Posting Permissions

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