PDA

View Full Version : Content Positioning in the center



freeroxy
06-09-2009, 04:05 AM
Hello, thank

I'm wondering how to position the website content in the middle and how to content not movable? For example, on my website, ( www.bonniechoigallery.com) I can get empty space on the right eternally if I enlarge the window to the right side. So, all the content which supposed to be positioning in the middle don't position where it should be... also, whenever I open the window with different browser, it gets different shape and size....... I set the right and left margins to 0, but unfortunately, that seemed to not enough solution to fix this. Could you please please let me know how to fix that problem? My background body is jpeg file. And, the width of window is 1000.


Thank you so much for your help and could I look forward to hearing from you?


Best Regards and Many Thanks
Bonnie

vwphillips
06-09-2009, 10:50 AM
sure there must be a better CSS method but


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#content {
position:absolute;left:100px;top:50px;width:400px;height:400px;background-Color:red;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Resize(){
var obj=document.getElementById('content');
obj.style.left=(zxcWWHS()[0]-obj.offsetWidth)/2+'px';
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}



/*]]>*/
</script>
</head>

<body onload="Resize();" onresize="Resize();" >
<div id="content" ></div>
</body>

</html>