Absolute Centering Div Overlay
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://dekk开发者_运维百科ro.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!
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>
加载中,请稍侯......
精彩评论