Fixed position header / logo / home link / spry menu dreamweaver cs5

Question

Hi all,
I'm starting a new discussion on this:
I have posted the code below for the header and the spry.
The header with logo and homelink keeps going underneath the spry and the spry jumps to the top of the page, this has only happened when I addded position: fixed;
However I do need this to have a fixed postion as I want to Spry and Header to remain fixed when scrolling, I'm hoping someone can help me with this
Thankyou
HTML:
<div id="header">
  <div align="center"><a href="index.html" id="homeLink"></a></div>
</div>
<div id="container">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="../mall.html">MENS</a>
        <ul>
          <li><a href="../mall.html">ALL</a></li>
          <li><a href="../mouterwear.html">Outerwear</a></li>
          <li><a href="../msweatsknitwear.html">Sweats + Knitwear</a></li>
          <li><a href="../mtops.html">Tops</a></li>
          <li><a href="../mshirts.html">Shirts</a></li>
          <li><a href="../mdenim.html">Denim</a></li>
          <li><a href="../mtrousers.html">Trousers</a></li>
          <li><a href="../mshorts.html">Shorts</a></li>
          <li><a href="../mfootwear.html">Footwear</a></li>
          <li><a href="../maccessories.html">Accessories</a></li>
        </ul>
      </li>
      <li><a href="../womens.html" class="MenuBarItemSubmenu">WOMENS</a>
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">Outerwear</a></li>
          <li><a href="#">Sweats + Knitwear</a></li>
          <li><a href="#">Tops</a></li>
          <li><a href="#">Shirts</a></li>
          <li><a href="#">Dresses</a></li>
          <li><a href="#">Playsuits + Jumpsuits</a></li>
          <li><a href="#">Skirts</a></li>
          <li><a href="#">Denim</a></li>
          <li><a href="#">Trousers</a></li>
          <li><a href="#">Shorts</a></li>
          <li><a href="#">Footwear</a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="../footwear.html">FOOTWEAR</a>
        <ul>
          <li><a href="#">Mens</a> </li>
          <li><a href="#">Womens</a></li>
          <li><a href="#">Unisex</a></li>
        </ul>
      </li>
      <li><a href="../accessories.html" class="MenuBarItemSubmenu">ACCESSORIES</a>
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">Bags</a></li>
          <li><a href="#">Wallets + Purses</a></li>
          <li><a href="#">Belts</a></li>
          <li><a href="#">Hats</a></li>
          <li><a href="#">Scarves</a></li>
          <li><a href="#">Sunglasses + Glasses</a></li>
          <li><a href="#">Watches</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="../maccessories.html">Mens</a></li>
<li><a href="#">Womens</a></li>
        </ul>
      </li>
      <li><a href="../about.html">ABOUT</a></li>
      <li><a href="../blog.html">BLOG</a></li>
      <li><a href="../contact.html">CONTACT</a></li>
    </ul>
</div>
<p> </p>
<div id="content"><!-- TemplateBeginEditable name="content" -->content<!-- TemplateEndEditable --></div>
CSS:
#header {
          background-color: #FFF;
          background-image: url(LOGO/CHAIN%20logo%20new%2024.png);
          background-repeat: no-repeat;
          background-position: center center;
          height: 200px;
          width: 100%;
          position: fixed;
#container {
          height: 60px;
          width: 100%;
          margin-right: auto;
          margin-left: auto;
          position: fixed;
#homeLink {
          width: 100%; /* set width to width of background image */
          height: 200px; /* set height to height of background image */
          display: block;
          position: fixed;

Answer 1

I'm not 100% sure where you find them in CS5 (I use CS4) I would just add them manually to the container, header and homelink css. All you need to do is open the .css file and add...
top:#px;   /* The # you use defines how close to the top of the window the div sits */
left:#px;   /* The # you use defines how close to the left of the window the div sits */
EDIT: So it would look something like this...
#header {
          background-color: #FFF;
          background-image: url(LOGO/CHAIN%20logo%20new%2024.png);
          background-repeat: no-repeat;
          background-position: center center;
          height: 200px;
          width: 100%;
          position: fixed;
          top:0px;
          left:0px;
#container {
          height: 60px;
          width: 100%;
          margin-right: auto;
          margin-left: auto;
          position: fixed;
          top:100px;
          left:100px;
#homeLink {
          width: 100%; /* set width to width of background image */
          height: 200px; /* set height to height of background image */
          display: block;
          position: fixed;
         top:10px;
          left:10px;
Obviously, use the pixel dimensions you need to position everything correctly.