Hey guys. Got a pretty simple question about getting my navigation DIV to stay in one spot. I've got a DIV that I have given a height and width of 100% and a fixed position to. I also have a background image aligned to center in this div. My problem is I am trying to have my navigation bar STAY in the same spot just above the background. I can correctly position it when the browser is maximized but when the browser window is resized my navigation bar does not stay in the same spot and 'moves' over the top of the image the smaller you make the browser. Once the browser is maximized it returns to the correct position. My HTML:
<div class="wrapper">
<div style="nav">
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>My .css
.wrapper
{
position:fixed;
height:100%;
width:100%;
background-image:url(images/dumbBells.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center;
background-color:#262626;
}
.container
{
width: 981px;
height:1000px;
}
.nav
{
position:fixed;
width:200px;
right:100px;
}I've tried everything to get this thing to work! I thought 'position:fixed' would solve the problem but it still 'moves' when you resize the browser. How do I get to 'STAY' or be 'anchored' in the same spot I have specified in the '.nav' class? Would appreciate any comments or suggestions!
