CODEWITHSUNDEEP
javascripthtmlcss
WebDevDanno
WebDevDanno

Reputation: 1122

Website looks zoomed on load

I am building a website for my tennis club: http://users.aber.ac.uk/dwd/aut/

Can anyone tell me why it looks zoomed in and push to the right? Click view source to see the HTML/CSS/Javascript as its quite a lot to post in the comment thread.

If you zoom out once that's what the site SHOULD look like.

Any ideas guys? Dan

Upvotes: 3

Views: 706

Answers (4)

Mitya
Mitya

Reputation: 34598

Others have pointed out why this is happening. Here's some more points, though:

  • to truly centre a container, use a value of auto on the margin X/Y axes. You are doing this currently, but it's being undermined by the fact that you have also specified absolute positioning, so remove the latter

  • incidentally, your current attempt to centre may work on your screen, but on a different resolution it will not, since you're essentially just bumping the page to the right by an arbitrary number of pixels

  • whilst a target resolution is something every site designer has to decide for him/herself, the standard is to make the page work in 1024 * 768. Your page container is currently 1024 pixels in width along, with a further 32px padding added either side. Either reduce your width or take advantage of the CSS property box-sizing, which means any specified padding eats into your element's width, rather than adding to it

Upvotes: 0

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

Remove the font-size from the body CSS, and then remove position: absolute and left: 12em from your #wrapper div.

Upvotes: 0

dbr
dbr

Reputation: 169693

It looks lopsided because it's not properly centre-aligned (if you use the Ctrl+- shortcut it becomes more obvious)

If you remove position: absolute; from #wrapper it displays correctly centred for me (in Chrome)

Upvotes: 1

Quentin
Quentin

Reputation: 944443

You've set the content to have an above average width and absolutely positioned it some distance from the left of the page.

Upvotes: 3

Related Questions