Positioning Nav

[appdx]

Hey guys, I'm sorry if this has been addressed already, but I tried searching for it and couldn't come up with one, so here I go...

Ok, so, I'm making a simple website with a background image. My issue is that I'm trying to have the nav on the top right of the image which right now, is done with

#nav {
position: absolute; top:100px; left: 900px;
}

However, with this approach the div will move around as different screen resolutions are used...My question is, does anyone have a better way to accomplish the positioning of my navigation? Any help is greatly appreciated. Thanks!

[idev]

position: relative;

should help you with that

[swa66]

Welcome to WebmasterWorld! [webmasterworld.com]

A bit low on details to be able to point you in any direction. How is the image positioned ?

A bit more code would be helpful I guess. (the html for the image, the menu and the CSS for the image (if any) would be useful.

[appdx]

Hey guys, thanks for the speedy reply. I'm sorry here's the relevant code.

First, the Nav in the html:

<div id="nav">
¦ <a href="/central/index.html">Home</a>
¦ <a href="/central/contact.html">Contact Us</a>
¦ <a href="/central/faq.html">FAQ</a>
¦ <a href="/central/team.html">The Team</a> ¦
</div>

Which is straight forward. here's the .CSS for the background + nav div

#body {
background-image: url(/users/appdx/Desktop/central/bg.jpg);
width:1024px; height:768px;
background-repeat: no-repeat;
margin: 0 auto;
}

#nav {
color: #cecbcb;
position: absolute; top: 120px; left: 700px;
font-family: helvetica;
font-size: 13px;
line-height: 18px;
}

Like I said, if you guys have any suggestions on a better way to do this that would be fantastic! Thanks for your help!

[venomizer]

Im pretty new at this whole CSS thing myself but just looking at this from a logic point, wouldn't you want to use a relative position instead of absolute? I say this since as you change resolutions the distance in pixels to 25%, 50%, etc., of the screen will change. Either that or if your set on using absolute positioning, if its possible, use the centers of the screen as your origin.

something like:

#nav {
position: center;
}

And then just munipulate the margins to get the position your looking for. Again, im still very new at this so i could be completely wrong on it.

[idev]

You described the idea perfectly.

center-based absolute positioning would work, but that's overkill. I see no point of doing that.

[swa66]

If you give your body "position:relative", the centered body would gain "position" and that means it's children that have "position:absolute" aren't referenced from the viewport (which has an unknown size), but instead from the closest parent that has "position".

[appdx]

Thanks a lot for the help guys!

So, I assume then that giving the parent div position: relative; and giving the child div position: absolute; should fix it.