Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Center Flash Movie vertically in HTML page (should be easy points)

Posted on 2004-11-18
10
Medium Priority
?
4,065 Views
Last Modified: 2008-01-09
Here's a link to the page.

http://www.axiscc.com

I'm trying to get the Flash movie to be centered in horizontally AND vertically.  I've done this before, but I'm having a brain fart.

Here's the HTML

<body>
 <div align="center" valign="middle">
    <table width="100%" height="100%"  border="0" align="center" valign="middle">
      <tr>
       <th align="center" valign="middle" scope="col"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="600" align="middle">
         <param name="movie" value="axis.swf">
         <param name="quality" value="high">
         <embed src="axis.swf" width="800" height="600" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
       </object></th>
      </tr>
    </table>
</div>
</body>

0
Comment
Question by:jb1013
  • 5
  • 3
  • 2
10 Comments
 
LVL 6

Expert Comment

by:superm401
ID: 12621743
<div style="vertical-align:center">
0
 
LVL 1

Author Comment

by:jb1013
ID: 12621853
Not sure if I'm using this suggestion correctly, but I haven't been able to get it to work.

<body>
 <div style="vertical-align:center">
    <table width="100%" border="0" align="center">
      <tr>
        <th align="center" valign="middle" scope="col"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="600" align="middle">
          <param name="movie" value="axis.swf">
          <param name="quality" value="high">
          <embed src="axis.swf" width="800" height="600" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
        </object></th>
      </tr>
    </table>
</div>
</body>
0
 
LVL 6

Expert Comment

by:superm401
ID: 12624450
I'm really sorry.  I mean to say <div style="vertical-align:middle">
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 31

Accepted Solution

by:
seanpowell earned 2000 total points
ID: 12627199
Like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Axis Computer Consulting</title>
<style type="text/css">
body
{
      margin:0;
      padding:0;
      background: url(http://axiscc.com/images/web_background_tile.jpg);
}

#flash
{
      position:absolute;
      width:800px;
      height:600px;
      top:50%;
      left:50%;
      margin-top:-300px;
      margin-left:-400px;
}
</style>
</head>

<body>

<div id="flash">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="600">
      <param name="movie" value="axis.swf">
      <param name="quality" value="high">
      <embed src="axis.swf" width="800" height="600" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
      </object>
</div>

</body>
</html>


Sean
0
 
LVL 1

Author Comment

by:jb1013
ID: 12627218
No problem superm401.  I actually tried both center and middle with no luck.  Currently I have it set to middle, but it's still not aligning correctly..

http://www.axiscc.com

Thanks for offering some assistance.

JB
0
 
LVL 1

Author Comment

by:jb1013
ID: 12627388
Thanks Sean,

That worked perfectly.  I know in previous version of Dreamweaver I did this easily using the GUI tools.  For some reason since Dreamweaver MX, whatever I used to do is no longer available or it's moved to a different pallete or something.  I'm very GUI orientened but this solution is easy enough for me to code in when needed.  Thanks so much.

JB
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12633278
Thanks JB, always happy to help out :-)

Sean
0
 
LVL 1

Author Comment

by:jb1013
ID: 13247518
Just a note,

I've found that this solution does not render correctly in IE 5.2 for Mac.

If anyone has a solution to fix that let me know.

Thanks,

JB
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 13247558
Unfortunately that crash-prone bug-ridden piece of browser junk can't handle any of the ways we use to center content.
However - users of that browser will be used to seeing content at the top of their screen anyways...

Sean
0
 
LVL 1

Author Comment

by:jb1013
ID: 13249881
Adding this hack around the CSS helps solve the problem.  Mac IE users aren't vertically aligned but at least the full site renders in the browser, and everyone else on a decent browser sees the site like I intended.

/* Hide from IE-Mac \*/
#flash
{
     position:absolute;
     width:800px;
     height:600px;
     top:50%;
     left:50%;
     margin-top:-300px;
     margin-left:-400px;
}
/* End hide */

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question