Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Centrera DIV innehållande SWF i webbläsaren

JoakimN

Startad av JoakimN,
i Webbutveckling

Rekommendera Poster

JoakimN

JoakimN

Postad
Postad

Hej!

 

Jag har ett problem med hur jag skall göra för att få SWF filen som ligger i en "content" div att ligga centrerad mitt på skärmen i webbläsaren.

 

Tacksam för hjälp...

 

/JoakimN

 

<!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>
       <title>MBUDM - Long text module with anchor links</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <style type="text/css">
       /*<![CDATA[*/
           html, body {
               height: 100%;
               overflow: hidden;
           }
           body {
               background: #CCCCCC;
               font: 86% Arial, "Helvetica Neue", sans-serif;
               margin: 0;                
           }
           #content {
               height: 100%;
           }
       /*]]>*/
       </style>

       <script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript" src="js/swfmacmousewheel2.js"></script>
 		<script type="text/javascript">
		var flashvars = {_xml:"textmodule.xml"};
		var params = {menu:false,allowFullScreen:true,bgcolor:'#FFFFFF'};
		var attributes = { id:'fObj'}; // give an id to the flash object
		swfobject.embedSWF("textmodule.swf", "content", "100%", "100%", "9.0.0", "expressInstall.swf",flashvars,params,attributes);
		swfmacmousewheel.registerObject(attributes.id);
	</script>
   </head>
   <body>
       <div id="content">
           <p>In order to view this site you need Flash Player 9+ support and javascript enabled.</p>
           <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" />
               </a>
           </p>
       </div>
   </body>
</html>

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

eftersom swfobject skriver över hela contentdivven rekommenderar jag dig att

1. lägga en div inne i content med id "flash_content" och dels lägger all textinnehåll som ligger i content i denna div istället och ser till att du skriver flashen till flash_content istället.

sedan fixar du med cssen:

#content object {width: NNpx; margin:0 auto;}

(du måste ange en bredd på flashen och i cssen ovan)

 

vilket ger dig:

<!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>
       <title>MBUDM - Long text module with anchor links</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <style type="text/css">
       /*<![CDATA[*/
           html, body {
               height: 100%;
               overflow: hidden;
           }
           body {
               background: #CCCCCC;
               font: 86% Arial, "Helvetica Neue", sans-serif;
               margin: 0;                
           }
           #content {
               height: 100%;
           }#content #fObj {width:300px; margin:0 auto;}
       /*]]>*/
       </style>

       <script type="text/javascript" src="js/swfobject.js"></script>
               <script type="text/javascript" src="js/swfmacmousewheel2.js"></script>
               <script type="text/javascript">
                       var flashvars = {_xml:"textmodule.xml"};
                       var params = {menu:false,allowFullScreen:true,bgcolor:'#FFFFFF'};
                       var attributes = { id:'fObj'}; // give an id to the flash object
                       swfobject.embedSWF("textmodule.swf", "flash_content", "100%", "100%", "9.0.0", "expressInstall.swf",flashvars,params,attributes);
                       swfmacmousewheel.registerObject(attributes.id);
               </script>
   </head>
   <body>
       <div id="content">
           <div id="flash_content">
               <p>In order to view this site you need Flash Player 9+ support and javascript enabled.</p>
           <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" />
               </a>
           </p>
       </div>
       </div>
   </body>
</html>

voila!

Länk till kommentar
Dela på andra webbplatser
JoakimN

JoakimN

Postad
  • Trådskapare
Postad

Hej!

 

Låter som att det kan fungera. Min flash fil är 980px bred och 620px hög. Hur skulle html dokument se ut med den informationen? CSS och så...

 

Jag vill alltså centrera horisontellt och vertikalt.

 

Tacksam för hjälp!

 

/JoakimN

Länk till kommentar
Dela på andra webbplatser
JoakimN

JoakimN

Postad
  • Trådskapare
Postad

Hej!

 

Det är löst nu. Så här gjorde jag:

 

<!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>
       <title>MBUDM - Long text module with anchor links</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <style type="text/css">
       /*<![CDATA[*/
           html, body {
               height: 100%;
               overflow: hidden;
           }
           body {
               background: #FFFFFF;
               font: 86% Arial, "Helvetica Neue", sans-serif;
               margin: 0;                
           }
           #content {
               height: 100%;
			width: 100%;
           }
       /*]]>*/
       </style>

       <script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript" src="js/swfmacmousewheel2.js"></script>
 		<script type="text/javascript">
		var flashvars = {_xml:"textmodule.xml"};
		var params = {menu:false,allowFullScreen:true,bgcolor:'#FFFFFF'};
		var attributes = { id:'fObj'}; // give an id to the flash object
		swfobject.embedSWF("betaglucare.swf", "content", width="980", height="620", "9.0.0", "expressInstall.swf",flashvars,params,attributes);
		swfmacmousewheel.registerObject(attributes.id);
	</script>
   </head>
       <body>
       <TABLE WIDTH="100%" HEIGHT="100%"> 
<TR><TD WIDTH="100%" HEIGHT="100%" VALIGN="middle" ALIGN="center">
       <div id="content" align="center">
           <p>In order to view this site you need Flash Player 9+ support and javascript enabled.</p>
           <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" />
               </a>
           </p>
       </div>
       </TD>
</TR> 
</TABLE> 
   </body>
</html>

 

Mvh

JoakimN

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...