Pistachio Monkey

Something i frequently get asked and have managed to do before is Horizontal and Vertical Alingment. I have previously used an old implmentation which got a little starteld when IE7 was released that required 3 div’s to work. This is find is not very efficent and looks heavy and messy.

I was aksed yesterday to build a Flash template for my client Rapier which offerd flash detection and provided an accessible version of the site, for SEO indexing and users without flash. I used the SWFObject methodology to embed the flash, and then went about writing a wrapper to centrally align the flash file.

the XHTML is just one Div:

<div id="wrapper">...</div>

the css is here:


/* wrapper to align center of page */
#wrapper {
/*we need to tell the browser the size of the warpper div*/
width:800px;
height:400px;
/*aligns the page to the center horizontal (x)*/
margin-left:auto;
margin-right:auto;
/*aligns the age to the center vertical (y)*/
position: absolute;
top: 50%;
left: 50%;
/*resets the offset (should be half the width and height*/
margin-top:-200px;
margin-left:-400px;
/*allows us to see wrapper*/
background-color:red;
}


Here is a link to the demo. I have sent this of to Browsershots.org and the results were positive throughout all browsers.

For the Demo i have commented out the Flash embed object so that you can see the wrapper working. Please note that i have also adjusted the CSS here to work with a smaller bassed swf than the one in my lib folder. This is so its easier to see working on smaller screens.

Here is a zipped Download of the full template including SWFObject v1.5.1, as it should be (not modified to show like the demo)