Thursday, 8 March 2012

The JavaScript function center_body() is used to center the main elements within the body. 

<html>
<head>
<style>
body {
   margin: 0px;
   overflow: hidden;
   background: #000;
}
#background {
   position: absolute;
   margin-top: 50px;
   width: 1024px;
   height: 600px;
}
#container {
   height: 600px;
   width: 1024px;
   position: absolute;
   top: 100px;
}
span {
   color: #bcd2ee;
   font-size: 28px;
}
</style>
<script>
function center_object(v)
{
 var obj = document.getElementById(v);
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape") {
   var ww = window.innerWidth;
   var gw = obj.clientWidth;
   var l = ((ww-gw)/2)-4;
   obj.style.left = l+"px";
  }
  if (navigator.appName.indexOf("Microsoft")!=-1) {
   var ww = document.body.offsetWidth;
   var gw = obj.offsetWidth;
   var l = ((ww-gw)/2)+16;
   obj.style.left = l+"px";
  }
 }
}
</script>
</head>
<body onload="center_object('background');center_object('container');" onresize="center_object('background');center_object('container');">
<img id="background" src="myImage.jpg" width="512" height="100%" border="6" />
<div id="container">
<span>
 <p>The div with the ID "container" is used as the new body of your web page.</p>
 <p>Any thing you want displayed above the background image, must be contained in this div.</p>
 <p>The "container" div is totally independant of the background image.</p>
 <p>The background image's dimensions can be set to any dimensions you choose.</p>
 <p>The background image and the "container" div can be positioned anywhere on the screen you choose.</p>
 <p>The JavaScript function center_body() is used to center the main elements within the body.</p>
</span>
</div>
</body>
</html>
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)