1,105,334 Community Members

Get DIV to stay in one spot?

Member Avatar
RunTimeError
Junior Poster in Training
54 posts since Oct 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 0 [?]
 
0
 

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!

Member Avatar
Kraai
Senior Poster
3,937 posts since Feb 2008
Reputation Points: 56 [?]
Q&As Helped to Solve: 96 [?]
Skill Endorsements: 4 [?]
Featured
 
0
 

Try

position:absolute;

and let us know!

Member Avatar
RunTimeError
Junior Poster in Training
54 posts since Oct 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 0 [?]
 
0
 

Hey thanks. So I ended up just moving the background image into it's own image tag and it works now.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: