4 Replies Latest reply on Oct 25, 2011 12:17 PM by pantelis224466

    How to vertical align a .swf in html

    pantelis224466

      Hi there.

      I use the following code to horizontically align my swf on screen. How about vertical align?

       

      Thank you in advance

       

       

                                                   
         
         
       
        • 1. Re: How to vertical align a .swf in html
          kglad Adobe Community Professional & MVP

          google:  css vertical align

          • 2. Re: How to vertical align a .swf in html
            pantelis224466 Level 1

            Ok i found the solution.

             

            In html file i have this code:

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

             

             

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

            <head>

             

             

                <title>Title</title>

             

             

                <link type="text/css" rel="stylesheet" href="align.css" media="screen" />

             

             

            </head><body>

             

             

                <object type="application/x-shockwave-flash" data="main.swf">

                    <param name="movie" value="main.swf" />

                </object>

             

             

            </body></html>

             

            and in align.css this:

             

            html, body {

                width:100%;

                height:100%;

                margin:0px;

                padding:0px;

                border-left:0px;

                border-right:0px;

            }

             

             

            html {

                overflow:hidden;

            }

             

             

            body {

                top:50%;

                position:absolute;

            }

             

             

            object {

                top:-455px; /* 50% of height */

                width:910px;  /* swf width */

                height:910px; /* swf height */

                margin:0px auto 0px auto;

                display:block;

                position:relative;

            }

             

             

            and it really works!

            • 3. Re: How to vertical align a .swf in html
              adninjastrator Level 4

              Have you tried this at several different screen resolutions/sizes?

              Using CSS like "position:absolute" can really screw things up unless you really know what you are doing... and "overflow:hidden" will remove the scroll bars and not allow viewing of content if viewer resized screen to smaller than yuor content.

              Post a link if you would like feedback on how well your solution works.

              Best wishes,

              Adninjastrator

              • 4. Re: How to vertical align a .swf in html
                pantelis224466 Level 1

                Basically, i have an index.html which loads first. In this, i have a script like this:

                <script language="javascript">

                <!--

                w = screen.width;

                h = screen.height;

                 

                if ((w <= 1400) || (h <= 1050)){

                window.location.href="http://www.mysite.com/index-s.html";

                } else if ((w > 1400) || (h > 1050)){

                window.location.href="http://www.mysite.com/index-l.html";

                }

                //-->

                </script>

                 

                This happened because firstly, i was asked to design a .swf in 900 x 585 then they wanted bigger (1400 x 910) and finally they wanted both depending on the resolution.

                I have tested my html files in different resolutions and they work fine!