CSS Centering

They have: 13 posts

Joined: May 2006

Hi,

I am trying to center my navMenu but it is not "all the way centered" at different screen resolutions.

My monitor is 1024 x 768...on this it looks fine. But if I look at it on 1280 x 1024 or 1280 x 800 it is not centered. Any suggestions? Thanks for any help.

Here are my links:

Link to my page: http://dreamland.tcs.tulane.edu/~testlib/index.php

Link to the page CSS: http://dreamland.tcs.tulane.edu/~testlib/css/layouts/homepage_layout.css

Link to my navMenu CSS: http://dreamland.tcs.tulane.edu/~testlib/css/nav_menu.css

teammatt3's picture

He has: 2,102 posts

Joined: Sep 2003

You're using pixels to position the menu, that doesn't really work when you want it centered because the amount of pixels can change from monitor to monitor. You need to wrap the navigation in a new with it styled like:

#new-navigation-wrapper {
margin:auto
}

and change

#navMenu {
position:absolute;
left:125px;
top:164px;
font:0.8em Arial, Tahoma, Verdana;
line-height:normal;
text-align:center;
}

to

#navMenu {
font:0.8em Arial, Tahoma, Verdana;
line-height:normal;
text-align:center;
}

I think that will fix your problem. Smiling

They have: 13 posts

Joined: May 2006

Hey,

I tried that but that seemed to throw the whole page off. Take a look..

http://dreamland.tcs.tulane.edu/~testlib/index.html

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

You seem to have absolute and relative positioning mixed together, try switching all to relative. Also, this isn't just a simple "add that and it will work" type solution. You'll have to play around a bit more with your positioning, especially since you have a lot of floats.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.