2011-12-22 8 views
6

Jestem projektantką mediów filmowych, która stara się włączyć część mojej pracy do klienta w stronę jej świątecznego prezentu. Próbuję zmienić rozmiar pliku .swf, aby był zgodny z rozmiarem przeglądarki, ponieważ ustalony rozmiar jest naprawdę nieporządny z moimi rozmiarami.Automatyczne zmienianie rozmiarów Centered Embedded Flash (HTML/CSS)

Za każdym razem, gdy ustawiam szerokość/wysokość pliku .swf na "100%" lub "auto", film zostanie obcięty u góry i dołu pod pojemnikami div. Kiedy zmieniam rozmiar pojemnika na 100%, otrzymuję długi, cienki film. Skopiowałem poniższy kod i byłbym wdzięczny za twoją pomoc. Możesz też krytykować cokolwiek innego na temat mojego kodu - jestem dziewicą CSS.

Dziękuję bardzo! :)

<!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" lang="en" xml:lang="en"> 
<head> 

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function MM_effectAppearFade(targetElement, duration, from, to, toggle) 
{ 
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle}); 
} 
</script> 

<title>Eat, Drink, and Be Mary</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<style type="text/css" media="screen"> 

     body { 
     background:url('images/home.jpg'); 
     background-repeat:no-repeat; 
     background-size:cover; 
     position:absolute; 

     } 

     html, body { 
     height:100%; 
     width:auto; 
     min-width:700; 
     } 

     body { margin:0; padding:0; overflow:hidden; } 


     .swfcontainer { 
      margin-top:3%; 
      width:100%; 
      height:30%; 
      margin-bottom:1px; 
     } 

     .swfcontainersmall { 
      margin-left:10%; 
      height:300px; 
      margin-right:10%; 
     } 

     .flashfile { 
      width:100%; 
      height:100%; 
      text-align:center; 
      margin:2; 
      padding:0; 
      overflow:hidden; 
     } 

     .textcontainer { 
      margin-bottom:3px; 
      margin-top:0; 
      margin-left:0; 
      width:100%; 
      margin-right:0; 
     } 

     .textcontainersmall { 
     margin-top:1px; 
     margin-bottom:1px; 
     margin-left:25%; 
     margin-right:25%; 
     } 

     #flashContent { 
     width:100%; 
     height:100%; 
     } 


     #wrap { min-height: 100%;} 

     #main {overflow:auto; 
     padding-bottom: 150px;} /* must be same height as the footer */ 

     #footer {position: relative; 
     margin-top:-100px; /* negative value of footer height */ 
     height:100px; 
     clear:both; 
     border-bottom:solid 4px #333; 
     } 

     /*Opera Fix*/ 
     body:before { 
     content:""; 
     height:100%; 
     float:left; 
     width:0; 
     margin-top:-32767px;/ 
     } 

</style> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<body> 
<div id="wrap"> 
    <div id="main"> 
     <div class="swfcontainer"> 
      <div class="swfcontainersmall"> 
       <div class="flashfile"> 
        <div id="flashContent"> 


         <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
         codebase="http://fpdownload.macromedia.com/ 
         pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align=                 "middle"> 
         <param name="SRC" value="EatDrinkAndBeMary.swf"> 
         <param name="wmode" value="transparent" /> 
         <param name="SCALE" value="noborder" /> 
         <param name="BGCOLOR" value= /> 
         <embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed> 
</object> 
        </div> 
       </div> 
      </div> 
     </div> 


     <div class="textcontainer"> 
      <div class="textcontainersmall"> 
     <img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" /> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />  
    <div> 
</body> 
</html> 
+1

bym po prostu użyć [swffit] (http://swffit.millermedeiros.com/) - znacznie łatwiejsze niż robienie tego ręcznie ... – ptriek

+0

Czy swffit jest nieaktualny dla nowszych przeglądarek? – user1111970

+0

Masz na myśli "obsługuje nowoczesne przeglądarki"? Nie jest to w 100% pewne, ale wszystkie witryny, z których korzystam, działają jak charm we wszystkich przeglądarkach ... np. http://www.aorta.be/ – ptriek

Odpowiedz

1

Mam nadzieję, że to może wskazać ci właściwy kierunek. Ale tak jak pokazuje yunzen, przykład online, w którym rzeczywiście możemy zobaczyć elementy, które umieszczasz, będzie świetny.

<html> 
    <head> 
     <style> 
.menu li { 
    display: inline; 
} 
.menu { 
    float: left; 
    padding: 0; 
    border: solid; 
} 
img { 
    float: left; 
    width: 200px; 
    margin: 0 30px; 
    border: solid; 
} 
#header { 
    margin-left: 20%; 
    margin-right: 20%; 
    padding: 0 5%; 
} 
     </style> 
     <title> 
     </title> 
    </head> 
    <body> 
     <div id="header"> 
      <ul class="menu left"> 
       <li>Elemento 1</li> 
       <li>Elemento 2</li> 
      </ul> 

      <img src="http://www.google.com/logos/2012/steno12-hp.jpg"> 

      <ul class="menu right"> 
       <li>Elemento 3</li> 
       <li>Elemento 4</li> 
      </ul> 
     </div> 
    </body> 
</html> 
2

To po prostu dużo kodu. na pytanie o przepełnienie stosu myślę.

Jeśli chcesz reponsive obiekt flash z css powinny wygląd here lub krótszy wersji here

CSS:

.embed-wrapper { 
    width: 100%; 
    max-width: YOURMAXWIDTHpx; 
} 
* html .arve-embed-container { 
    margin-bottom: 45px; 
    margin-bot\tom: 0; 
} 

.arve-embed-container { 
    position: relative; 
    padding-bottom: 56.25%; /* 16/9 ratio */ 
    padding-top: 30px; /* IE6 workaround*/ 
    height: 0; 
    overflow: hidden; 
}       

.arce-embed-container div, 
.arve-embed-container iframe, 
.arve-embed-container object, 
.arve-embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

podjąć tego css i z tego html

<div class="embed-wrapper"> 
<div class="arve-embed-container"> 
<object YOURSTUFF=HERE> 
</object> 
</div> 
</div> 

możesz pobrać wszystko wewnątrz owijki, zmieniając rozmiar automatycznie, tak, aby 16: 9 pozbył się większości kodu i zaimplementował coś g like this

3

w pliku Flash
Set
Stage.scaleMode = "noScale";

plik html
zestaw szerokość obiektu 100%

Powiązane problemy