Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem with centering container and display (for all resolutions)

    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.

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    25
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Cipherflak View Post
    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

  • Users who have thanked ScottBaxter for this post:

    Cipherflak (02-13-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    25
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Cipherflak View Post
    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

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    8
    Thanked 4 Times in 4 Posts

    Post

    Quote Originally Posted by Cipherflak View Post
    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.

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    25
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Cipherflak View Post
    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:

    Code:
    #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

  • #11
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •