Skip to main content
M
mauricios76573809
Participant
April 24, 2018
Answered

SWF placement in Dreamweaver CC 2018

  • April 24, 2018
  • 3 replies
  • 499 views

I have added a SWF to the site im attempting to create using dreamweaver and in the process im attempting to re-position the SWF, i have added div and css style and adjusted the position in the properties but it does not move. Am I doing something wrong or is there another way to reposition the SWF?

    This topic has been closed for replies.
    Correct answer Nancy OShea

    alright so I got adjusted to the right side but now I'm trying to reposition to where the purple box is on the image, it just looks odd there. here is the new code

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Theme</title>
    <link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="BACK">
    <div class="container">
      <header>
        <div class="primary_header">
          <h1 class="title">IRONSIDE JIU JITSU</h1>
        </div>
        <nav class="secondary_header">
          <ul>
            <li>ABOUT</li>
            <li>FAQ</li>
            <li>SCHEDULE</li>
            <li>GALLERY</li>
            <li>CONTACT</li>
           
          </ul>
        </nav>
      </header>
      <section>
        <h2 class="noDisplay">Main Content</h2>
        <article class="left_article">
          <h3>content heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </article>
        <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200">
      <param name="movie" value="images/imageflash.swf">
      <param name="quality" value="high">
      <param name="wmode" value="opaque">
      <param name="swfversion" value="6.0.65.0">
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf">
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">
        <!--<![endif]-->
        <param name="quality" value="high">
        <param name="wmode" value="opaque">
        <param name="swfversion" value="6.0.65.0">
        <param name="expressinstall" value="Scripts/expressInstall.swf">
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>

        <aside class="right_article"> </aside>
      </section>
      <div class="row">
        <div class="columns">
          <p class="thumbnail_align"> <img src="images/joao-miyao.png" width="140" height="138" alt=""/> </p>
          <h4>TITLE</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
        <div class="columns">
          <p class="thumbnail_align"> <img src="images/paulomiyao.png" width="140" height="138" alt=""/> </p>
          <h4>TITLE</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
        <div class="columns">
          <p class="thumbnail_align"> <img src="file:///C|/Users/Freshsole/Desktop/newsite/images/dillondanis.png" width="140" height="138" alt=""/> </p>
          <h4>TITLE</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
        <div class="columns">
          <p class="thumbnail_align"> <img src="file:///C|/Users/Freshsole/Desktop/newsite/images/leo.png" width="140" height="138" alt=""/> </p>
          <h4>TITLE</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <div class="row blockDisplay">
        <div class="column_half left_half">
          <h2 class="column_title">LEFT COLUMN</h2>
        </div>
        <div class="column_half right_half">
          <h2 class="column_title">RIGHT COLUMN</h2>
        </div>
      </div>
      <div class="social">
        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>
      </div>
      <footer class="secondary_header footer">
        <div class="copyright">&copy;2015 - <strong>SIMPLE Theme</strong></div>
      </footer>
    </div>
    </body>
    </html>


    Wrap your object inside the right_article and add some top margin to your aside.

    <aside class="right_article" style="margin-top: 45px">

      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200">

      <param name="movie" value="images/imageflash.swf">

      <param name="quality" value="high">

      <param name="wmode" value="opaque">

      <param name="swfversion" value="6.0.65.0">

      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

      <param name="expressinstall" value="Scripts/expressInstall.swf">

      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

      <!--[if !IE]>-->

      <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">

        <!--<![endif]-->

        <param name="quality" value="high">

        <param name="wmode" value="opaque">

        <param name="swfversion" value="6.0.65.0">

        <param name="expressinstall" value="Scripts/expressInstall.swf">

        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

        <div>

          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

        </div>

        <!--[if !IE]>-->

      </object>

      <!--<![endif]-->

    </object>

    </aside>

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 24, 2018

    Use the HTML5 <video> tag as shown below with MP4 file.  Unlike Flash, this will play on any modern web device -- desktop, tablet or mobile phone.

    <video poster="YOUR_POSTER_IMAGE.jpg" controls>

    <source src="YOUR_VIDEO.mp4" type="video/mp4">

    </video>

    By default, Video is a block level element and will occupy the entire horizontal line to which it is applied.  If you wish to have your video in a column, use CSS Flexbox.  In this example, video is on the right side of screen.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Video Demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    .flex-grid {

      display: flex;

    }

    .col {

      flex: 1;

            padding: 3%;

    }

    video {max-width:100%;}

    /**break to stacked columns on smaller devices**/

    @media (max-width: 660px) {

      .flex-grid {

        display: block;

      }

    }

    </style>

    </head>

    <body>

    <div class="flex-grid">

    <div class="col">

    <h4>Heading 3</h4>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia deleniti dolorem, laudantium. Quod obcaecati ad tempora quia recusandae voluptas blanditiis molestiae, eos aliquid illo possimus repellat earum, laborum, eligendi reiciendis!</p>

    </div>

    <div class="col">

    <video poster="POSTER_IMAGE.jpg" controls>

    <source src="YOUR_VIDEO.mp4" type="video/mp4">

    </video>

    </div>

    </div>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    April 24, 2018

    The bigger question is why are you continuing to use a dead format like swf. Modern broswers wont play a swf file by default, its not supported on any apple mobile device......hummm

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    April 24, 2018

    It's pretty much impossible to say exactly what might be going wrong, without seeing the code you've created.

    Could you post a link to your work in progress so we can take a look?

    M
    mauricios76573809Author
    Participant
    April 26, 2018

    sorry Im new to this and the reason im using an swf is I was told to use flash/animate for my school project. Im trying to get that swf on the right side. here is my code for my page

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Simple Theme</title>

    <link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

        <![endif]-->

    <script src="Scripts/swfobject_modified.js"></script>

    </head>

    <body class="body">

    <div class="container">

      <header>

        <div class="primary_header">

          <h1 class="title"> IronSide Jiu-Jitsu</h1>

        </div>

        <nav class="secondary_header" id="menu">

          <ul>

            <li>ABOUT</li>

            <li>FAQ</li>

            <li>SCHEDULE</li>

            <li>GALLERY</li>

            <li>CONTACT</li>

          </ul>

        </nav>

      </header>

      <section>

        <h2 class="noDisplay">Main Content</h2>

        <article class="left_article">

    <h3>trAIN WITH CHAMPS TODAY</h3

     

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="200" id="FlashID" title="homeflash">

      <param name="movie" value="images/imageflash.swf" />

      <param name="quality" value="high" />

      <param name="wmode" value="opaque" />

      <param name="swfversion" value="6.0.65.0" />

      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

      <param name="expressinstall" value="Scripts/expressInstall.swf" />

      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

      <!--[if !IE]>-->

      <object type="application/x-shockwave-flash" data="images/imageflash.swf" width="400" height="200">

        <!--<![endif]-->

        <param name="quality" value="high" />

        <param name="wmode" value="opaque" />

        <param name="swfversion" value="6.0.65.0" />

        <param name="expressinstall" value="Scripts/expressInstall.swf" />

        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

        <div>

          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

        </div>

        <!--[if !IE]>-->

      </object>

      <!--<![endif]-->

    </object>

    <p>

          

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

        </article>

        <aside class="right_article"> </aside>

      </section>

      <div class="row">

        <div class="columns">

          <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

          <h4>TITLE</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

        </div>

        <div class="columns">

          <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

          <h4>TITLE</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

        </div>

        <div class="columns">

          <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

          <h4>TITLE</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

        </div>

        <div class="columns">

          <p class="thumbnail_align"> <img src="images/bkg_06.jpg" alt="" class="thumbnail"/> </p>

          <h4>TITLE</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

        </div>

      </div>

      <div class="row blockDisplay">

        <div class="column_half left_half">

          <h2 class="column_title">LEFT COLUMN</h2>

        </div>

        <div class="column_half right_half">

          <h2 class="column_title">RIGHT COLUMN</h2>

        </div>

      </div>

      <div class="social">

        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

        <p class="social_icon"><img src="images/bkg_06.jpg" width="100" alt="" class="thumbnail"/></p>

      </div>

      <footer class="secondary_header footer">

        <div class="copyright">&copy;2015 - <strong>SIMPLE Theme</strong></div>

      </footer>

    </div>

    <script type="text/javascript">

    swfobject.registerObject("FlashID");

    swfobject.registerObject("FlashID");

    </script>

    </body>

    </html>

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    April 26, 2018

    You have some structural errors in your html, for example, this line...

    <h3>trAIN WITH CHAMPS TODAY</h3

    You are missing the ending bracket in your closing h3 tag. That type of error can cause all kinds of display issues when trying to position items in your page because the browsers/DW may not understand which items you're trying to modify.

    Run your page through the validator at http://validator.w3.org/nu to get a listing of your issues. Once you clean them up, the page may start functioning the way you want when you position items.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices