A friend once asked me how to position an image perfectly as he is wanting to create an under construction or coming soon page, but he is having trouble on positioning it perfectly on every browser most especially on larger screens.
I’m no master of css and all but I know a thing or two on converting PSD to XHTML, and looks fine on most major browsers. I took the time to search the web, luckily I’ve found some and finally created my own take on this problem.
Here’s my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Chemist2dio - Coming Soon</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" title="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="image_wrapper"></div>
</body>
</html>
Note: code in gray are just needed to validate the file as XHTML 1.0 Strict, the black ones are the only important parts.
And Here is my CSS Code:
@charset "UTF-8";
/* CSS Document */
body{
background:#8ba1ae url(../images/bg.jpg);
}
#image_wrapper
{
background:#8ba1ae url(../images/main_image.jpg);
position:absolute;
width:592px;
height:512px;
left:50%;
top:50%;
margin-left:-296px;
margin-top:-256px;
}
Click on the image below for a sample coming soon page.
This one is easy to implement as you’ll only change 4 values.
height, width, margin-left and margin-top
where:height and width are the actual height and width of your imagemargin-left = width divided by 2margin-top = height divided by 2
Tips: it’s best to slice your images and maintain it as even numbers, so you’ll not be having problems dividing the numbers by 2 and not getting integer.
That’s it, he was happy and thankful after having known this code.
If you want to download the source files, then you may do so. If ever you’ve found this tutorial helpful then a link back to this tutorial would always be appreciated.
Popularity: 5% [?]
Nice detailed explanation! Maybe in the future on a new project I start I can come re visit your blog for tips and trick!
Thanks for sharing this Chemist