Just nu i M3-nätverket
Jump to content

Centrera DIV innehållande SWF i webbläsaren


JoakimN

Recommended Posts

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>

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...