...

View Full Version : Problem with centering container and display (for all resolutions)



Cipherflak
02-13-2012, 12:45 AM
Hey! I'm back with more despair and questions to boot.

I have a page with a container element I want positioned in the middle of your screen, no matter the resolution. That is, if you run a higher resolution you will simply see more of the body background on each side, while the actual container will always be equally big.

I've searched through the web and tried a lot of different things, but it always seems to displace itself when I change resolution. Do anyone have an idea of how to proceed? I'm very grateful for all help.


To put my problem in context, you can see the page here www.astralvault.net/games/SA
There it is simply brute placed so it will (probably) work in 1920 resolution, but not anything else.

ScottBaxter
02-13-2012, 12:58 AM
Hey! I'm back with more despair and questions to boot.

I have a page with a container element I want positioned in the middle of your screen, no matter the resolution. That is, if you run a higher resolution you will simply see more of the body background on each side, while the actual container will always be equally big.

I've searched through the web and tried a lot of different things, but it always seems to displace itself when I change resolution. Do anyone have an idea of how to proceed? I'm very grateful for all help.


To put my problem in context, you can see the page here www.astralvault.net/games/SA
There it is simply brute placed so it will (probably) work in 1920 resolution, but not anything else.


Hi Mate,

Ok first of there are a few changes that you need to make for it so resize..

- On the body css remove the width - (This may mess you background up a little...)

- On you container div remove the following css rules, overflow, position, top and left and just simple change the margin to margin: 0 auto;

That will make the container centralise in any browser...

One thing I have noticed is you have alot of divs that use absolute or relative positions... Some of these may look a little out of place once you have made the above changes.

Any problems let me know.

Thanks,

Scott

Cipherflak
02-13-2012, 01:09 AM
Thanks for the super fast reply!

At first glance when tuning the resolution it indeed seems to work, although as you said, many of the items are displaced.
I see I've been messing up with the choice of absolute or relative positioning, which is probably because I haven't really wrapped my head around the different ways of positioning items in CSS and what to use when. Any suggestions or words of wisdom right off the bat?

Cheers.

ScottBaxter
02-13-2012, 01:14 AM
Thanks for the super fast reply!

At first glance when tuning the resolution it indeed seems to work, although as you said, many of the items are displaced.
I see I've been messing up with the choice of absolute or relative positioning, which is probably because I haven't really wrapped my head around the different ways of positioning items in CSS and what to use when. Any suggestions or words of wisdom right off the bat?

Cheers.

Instead of using absolute / relative position just use the float left / right atribute - its a lot easier to use and for your layout it will work wonders...

Just remember to use the margins correctly and if you struggle making sure you have the divs in the correct positions using background colours until your happy...

Any problems let me know.

Thanks,

Scott

Cipherflak
02-13-2012, 01:40 PM
Now it seems to work much better. Well, in Firefox, at least. In IE the hover-effects are constantly there, and a friend just reported that a few of the smaller items are displaced in Chromium(?!), despite that it's working in IE, safari, opera and firefox.

Sure is a lot to think about when making web pages!

DarkLaika
02-13-2012, 02:30 PM
Now it seems to work much better. Well, in Firefox, at least. In IE the hover-effects are constantly there, and a friend just reported that a few of the smaller items are displaced in Chromium(?!), despite that it's working in IE, safari, opera and firefox.

Sure is a lot to think about when making web pages!

Your friend is right. I'm viewing it in Chromium, and quite a few things are in what I would guess to be the wrong place.

Note that if this affects Chromium, it will affect Google Chrome as well, which is very widely used.

Cipherflak
02-13-2012, 02:43 PM
I see. I'll better roll up my sleeves and fix it then. I'll fiddle around and see if I can manage to place those last items where they belong (in all browsers).

---
As a correction to my last post, it seems that IE9 (just upgraded) handles the hover opacity effect, just without the transition. But it seemingly displays a few of the items just like Chrome.

Cipherflak
02-13-2012, 03:10 PM
Allright, now the download should now be displayed correctly in all browsers. But I have this little "archive" button to place as well, that should be in the lower right corner of the newsbox thingy (you can see the spot for it).

What's weird though, is that this link (and its background) is completely visible when I display it as absolute, but it collapses when I set it to relative of float (like it ignores the hight- and width properties I've given it). Can anyone offer an explanation to this?

Cipherflak
02-14-2012, 10:57 AM
I think I have to give up. It should be easy to properly place that single silly button where it belongs, but there's always something messing up.

help? :)



it's this item:
<a href=blank id=archive></a>

ScottBaxter
02-14-2012, 11:56 PM
I think I have to give up. It should be easy to properly place that single silly button where it belongs, but there's always something messing up.

help? :)



it's this item:
<a href=blank id=archive></a>

Hi mate,

For a quick fix just just change the #archive div to the following:




#archive {
position: absolute;
margin-top: 250px;
margin-left: 450px;
background: url(../../images/SA/archive.png) no-repeat;
background-position: bottom center;
width: 100px;
height: 35px;
z-index: 20;
}



Cheers,

Scott

Cipherflak
02-16-2012, 05:47 PM
Hey, thanks for your reply. That looks perfect in IE, but if you open it in Firefox it's really displaced :/

And I still don't understand why the button vanishes if position not set to absolute..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum