I was wondering if someone could help me out here please. I am trying to create a strict xhtml page that contains a single div that will hold my flash movie. I want the div 800px wide & 565px in height which will always be in the center of the page no matter what resolution it is being viewed at. (centered both horizontally and vertically) Can anyone here help me with this, thanks in advance
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body{background-color:#fff;} #container { position:absolute; margin-left:-400px; margin-top:-282.5px; width:800px; height:565px; z-index:1; top: 50%; left: 50%; background-color:#333; } </style> </head> <body> <div id="container"> Movie Content Goes Here </div> </body> </html>
Wow, cool, thanks a million, just a quick question I do not understand what these lines are used for: margin-left:-400px; margin-top:-282.5px; Code (markup): How did you calculate those figures, thanks again
margin-left is half the width of the div margin-top is half the height of the div This corrects the positioning of top:50%; left:50%;