 | Re: Centering Oversize Flash Movies in Dreamweaver
by Abraham Chaffin on May 5, 2008 at 4:42:42 pm |
I'd suggest using javascript to do this. I'm not sure really there is any other way to do it besides javascript. What you want to do is have your element always absolutely positioned in the center no matter the size of the users browser window. To do this you need javascript to detect the browser window size and then realign the element right in the center. Using the regular centering commands in html won't work because the window might be too small and the left size of the browser window will not allow the element to truly be centered since elements only are allowed to go outside of the window on the right and bottom through normal positioning.
Absolute positioning will allow the element to not be restrained in its position by the left or top of the browser window, which is what you want. The problem with absolute positioning is there is no "center" alignment it is based on coordinates starting at the top left and not in the center. For our solution to work these coordinates (at least the x coordinate) will need to change depending on the browser window size.
The solution:
Insert a absolute positioned div in Dreamweaver or use the code below and put whatever you want centered into that div:
When you insert the div you'll have some styling in the head part of the code of your page.
CSS FOR THE DIV:
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 0px;
top: 0px;
}
-->
</style>
The position is absolute which will allow it not to be pushed around by the borders of the browser window. The width and height should be set to whatever the content is in the div. The left position doesn't matter as it will be set by javascript. The top should be wherever you want it vertically on your page. 0 means it's at the very top.
THE JAVASCRIPT:
<script language="JavaScript">
<!--
function returnObjById( id )
{
if (document.getElementById)
var returnVar = document.getElementById(id);
else if (document.all)
var returnVar = document.all[id];
else if (document.layers)
var returnVar = document.layers[id];
return returnVar;
}
function abscenter( id,idwidth ){
var winW = 800;
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
}else{
winW = window.innerWidth;
}
disone = returnObjById( id )
disone.style.left = ((winW/2)-(idwidth/2))+"px";
}
}
//-->
</script>
This is the javascript that will align your element perfectly in the center of the browser window.
<body onResize="abscenter('apDiv1','200');" onLoad="abscenter('apDiv1','200')">
This is the body tag with two commands one to have it run the javascript function to center your element when the page loads and one to center your element when the window is resized. "apDiv1" should be changed to the id of your absolute positioned div that you want to align in the center of the window. "200" should be changed to the width of the absolute positioned div.
<div id="apDiv1" align="center">PUT ALL YOUR CONTENT YOU WANT CENTERED IN HERE</div>
This is an example of the absolute positioned div that will be aligned to the center. The align="center" means to center the content inside of it.
Hope this helps,
Abraham
Respond to this post • Return to posts index | 
