1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Moving Sidebar?

Discussion in 'Web Design & Development' started by Tanis, Jan 18, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    I am putting together some training material in .html at our customers request. My html knowledge is quite limited having only done a 2 day intro course to Dreamweaver CS5 (did some basic html programming many years ago).

    The setup they want is a simple sidebar for navigation with the main information being in the div content area of each page. The pages themselves are likely to be fairly long in some cases which the customer isn't concerned about, however they have asked that the unordered list items in the sidebar move down as you scroll down the page, basically so the sidebar stays visible on the page regardless where the user scrolls to.... hope that makes sense haha.

    However, if this is possible I have no idea how to do so am asking if anyone on here can help me out.

    Another significant limitation is that the resultant html must be fully compatible with Internet Explorer 6! (veryold etc. I know, don't even go there haha).

    Any help or pointers very much appreciated, even if someone says 'it can't be one' thats not ideal but if it is the case so be it.

    Edit: I should point out I am using an external CSS for overall formatting, so if it can be done using that it would be ideal.
     
  2. DrP

    DrP

    Joined:
    Jul 23, 2005
    Messages:
    739
    Was going to try and help but then saw the IE6 gag! Ha ha!

    Seriously, though - have you tried giving the sidebar the CSS attribute position:fixed?
     
  3. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    Going to be having a play around with it today so ill have a look at that.

    Yea, making it IE6 compatible is limiting possibilities to say the least, it will only be accessible on the customers closed work network an they have never upgraded that as there has never been a need. The network is never, and never will be, connected to the internet in any way, shape or form.
     
  4. omuyelijah

    omuyelijah

    Joined:
    Jan 10, 2006
    Messages:
    120
    Hi,

    Try this. It should work regardless of browser version. I believe MSIE 6+ supports css 2.0. Put the navigation list inside a div block, then set its css position property to fixed. It can take the structure below:

    HTML:
    <!... this should be inside the external css file ..>
    div#navblock{
      position: fixed;
      left: /* set this one d way it will appear on the site  */
      top: /* set this one d way it will appear on the site */
    }
    
    <!... this should be inside the html blocks ..>
    
    <div id='navblock'>
     <ul>
       <li>Link 1</li>
       <li>Link 2</li>
     </ul>
    </div>
     
  5. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    Hi, many thanks for the replies so far, this is pretty new to me so a steep learning curve :)
    This is what I have at the moment:

    HTML:
    <...inside html block...>
    <div class="sidebar1">
        <ul class="nav">
              <li>link</li>
              <li>link</li>
        </ul>
    </div>
    
    <...inside external css...>
    .sidebar1 {
        position: fixed;
        background-image: url ...
        background-repeat: repeat-y;
        width: 185px;
        float: left;
    
    What I am assuming, from what has been said, is that I am missing a seperate div ID that the sidebar ul elements need to sit inside, then apply the class attributes to that specific div tag?

    Edit: According to this site (http://www.webdevout.net/browser-support-css) IE6 does not support the 'fixed' position in CSS! So I may not be able to do this at all.
     
  6. omuyelijah

    omuyelijah

    Joined:
    Jan 10, 2006
    Messages:
    120
    Ok. I had fears for this during the last post but all hope isn't lost. MSIE should support frames. So, I suggest you use frames for the task.
     
  7. Tanis

    Tanis Thread Starter

    Joined:
    May 29, 2006
    Messages:
    3,969
    First Name:
    Shane
    Now theres an idea, think I will leave that for the next iteration of the document though as I need to get the content finished and am running out of time haha. I hadn't even thought about using frames (does anyone use frames anymore :) ), I used to do a bit of that when I was teaching myself basic html many years ago using Notepad.
     
  8. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/975393

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice