CSS Margin Problem.

slipd

slipd

slipd

Soldato
Joined
26 Feb 2004
Posts
4,803
Location
Hampshire, England.
Hey guys,

I’ve got this stupid little problem on…

Basically, I’ve made a template and got it all working in the main browsers, but now I’ve started testing it in lower resolution – 800*600 in particular and that’s where I’ve noticed the problem :(

untitledul5.png


I want the main content to be central when possible (In 1280*1024 etc) and automatically scaled down, to the left (Like it is on the right), when viewed in the lower resolutions.

Can someone check out my .css and see where I’m going wrong – it’s got to be a simple margin value hasn’t it? I really want someone else giving it the once over :)

http://www.wightgame.co.uk/example/ and

http://www.wightgame.co.uk/example/mycss.css

Cheers,

SW.
 
addy_010 said:
i can tell you exactly whats wrnog. You have put margin-left so no matter what size the browser page is you will always have that margin.

Nothing is being scaled down as you can still scroll right and left so its still full size.

To center the page make a wrapper if you haven't got one that contains everything.

have margin: 0 auto;

This will "auto"maticlally put the same margin left and right so it centers it no matter what screen size.

hope this helped
Click to expand...
Thanks mate, my wrapper is the 'container' div.

So by setting that to: margin: 0 auto; - should fix the problem then?

What if I've got a top margin set, which i think I have actually :rolleyes:

Wouldn't that cause me a problem :(

I'll give it a go now!

Cheers,

SW.
 
No, that didn't work :(

I set margin-left/right to auto and that brought the container hard-left. I think I've done that before...

How should I get it back to the center then :p

SW.
 
Thanks for your help mate ;)

I think I’m nearly there! It resizes up a treat in lower resolutions.

I just need to make a few tiny adjustments…

Check out: http://www.wightgame.co.uk/example/

And http://www.wightgame.co.uk/example/mycss.css

It views great in Opera and Firefox, but there is still a major problem with IE7…

The links dive seems to be offset for some reaso :(

Any ideas, it’s got to be something simple hasn’t it?

Cheers,

SW.
 
Wow - thanks for that mate ;)

I'll give that a go!

One question tho, I'd still have the container div wouldn't I? That would be what the left/middle/right bars would be placed into, in that order?

As in:

<div id="container">
<div id="left">-----</div>
<div id="middle">-----</div>
<div id="right">-----</div>
</div>

Am I on the right lines before I start :p

Cheers,

SW.
 
You must log in or register to reply here.
Back
Top Bottom