Home/ Questions/Q 6369225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:46:36+00:00

This is my 2nd attempt at getting this fixed! I fixed the first problem

  • 0

This is my 2nd attempt at getting this fixed! I fixed the first problem with help from Stobor, now this second problem seems to be a bit tricky, but it cant be that hard right?

As you can see here http://dekkro.no-ip.org/ I have a completely centered image, and a styled div with a login box.

What I am trying to achieve is that the login box, is ALWAYS 100% dead center of that image. It is centered for me, but for a lot of people with smaller resolutions it is not.

Here is the problem: http://dekkro.no-ip.org/problem.png

Is there a way to fix this? My code is a bit messy but understandable. I have been trying to do this since 5am and it’s now 5pm! Struggling a bit here!
Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go…tested in firefox, ie9, chrome and opera. Hope this works in the problem resolution or gives you a start.

    screenshot

    <html>
<head>
    <style type='text/css'>
    html, body{
        margin: 0px; /* some browsers add a margin at the top, get rid of it to have proper positioning */
    }
    body{
        background-image: url('blahbg.png');
    }
    .Centered{
        margin-right: auto;
        margin-left: auto;
        align: center;
    }
    .LayoutContainer{
        background-image: url('blink.gif');
        background-position: bottom left;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
    }
    .BodyContainer{
        background-image: url('testimage.png');
        background-repeat: no-repeat;
        margin-top: 50px; /* to bring the layout-body down a bit you want this */
        height: 425px;
        width: 690px;
    }
    .MiddleContainer{
        text-align: center;
        padding-top: 20px;
        width: 200px;
    }
    .LoginContainer{
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin-top: 20px;
        height: 230px;
    }
    .InfoContainer{
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin-top: 20px;
        height: 30px;
    }
    </style>
</head>
<body>

<div class='LayoutContainer'>
    <div class='BodyContainer Centered'>
        <div class='MiddleContainer Centered'>
            <div class='LoginContainer'><img src='logo.png' /></div> 
            <div class='InfoContainer'></div>
        </div>
    </div>
</div>

<body>
</html>
    • 0