CSS positioning

I'm having trouble positioning elements within a new template I am designing at http://fusionnx.com/style.

There are two issues: the first is the navigation bar at the top of each page. Although it looks fine when I view it in full screen on most screens, if you see it on a narrower screen, or resize your browser, the links get hiddden behind the logo. I reckon it is because of the position:absolute attribute, but I would like to know how I can solve this problem whilst still having the links in the top left. Can't the screen just scroll?

The second problem is with the footer (the small links and validator images). I can't get it to display in the center of the screen, even with html attributes and a lot of CSS playing around. How can it be done? If you need the CSS source you can find it's location (there are three files) in the html source. The site uses php, but this shouldn't get in your way if you need to see any code.

If you need any more info please ask- I really need this problem sorted out for a deadline.

Thanks for any help in advance!

 

This will center your footer:

#footer {
position: absolute;
right: 20%;
left: 20%;
text-decoration: none;
...

J.D.

 

Nope, it centers the validate links in comparison to the text links above them, but it is still showing some way over to the left on my screen

 

I checked and setting left and right will center your footer div. Add a border to #footer to see it for yourself:

border: 1px solid red;

If you don't see the border, then your old stylesheet is cached somewhere.

J.D.

 

It really isn't centering the footer- I've done it and put it up online.

I still see it over to the left.

Please help!

 

I see it centered.

 

centered in the page? What resolution are you using?

 

Yes, screen resolution can make a difference if you're not using absolute positioning.

For some more CSS help, see:
http://www.htmlhelp.com/reference/css/
http://www.w3.org/Style/CSS/

 

Ok, it is centered in FF and Opera, but shifted to the left in IE. Hang on, I will check what's wrong with IE.

J.D.

 

IE doesn't expand the div to satisfy left and right constraints, which results in the box shifted to the left. It's as if MS folks never read the CSS spec! Setting width explicitly should do the trick:

#footer {
position: absolute;
right: 20%;
left: 20%;
width: 60%;

J.D.

 

Thanks- i'll get it done right now and report the results (I have to use IE at work on breaks)