[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Center swf file vertically in an html file (css), using dreamweaver cs4

Posted on 2011-05-07
11
Medium Priority
?
689 Views
Last Modified: 2012-05-11
Hello, researched this for hours.  Darn tired.  Pls help.  Here is my code.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r" />
<title>Photography Portfolio</title>
</head>
<body bgcolor="#0C0C0C" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<body bgcolor="#0C0C0C">
<!--url's used in the movie-->
<!--text used in the movie-->
<!--

-->
<!-- saved from url=(0013)about:internet -->

<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="100%" height="100%" id="main" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="main.swf" /><param name="quality" value="high" /><param name="scale" value="noborder" /><param name="salign" value="t" /><param name="bgcolor" value="#0C0C0C" /><embed src="main.swf" quality="high" scale="noborder" salign="t" bgcolor="#0C0C0C" width="100%" height="100%" name="main" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</body>
</html>
0
Comment
Question by:geekbuytrade
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35712572
What is the actual size of your SWF? Your embed shows 100%, but that can't be the actual size. What is the pixel size?

From there we can get it centered.
0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35713075
Okay, well I am going out for the day, so I will throw some CSS at you that you can try.

I am under the assumption that you have a sized SWF you want to play in the center of the browser, both vertically and horizontally, and you want that to be the same no matter what screen resolution is viewing it.

I would first change your embed tag for the flash back to the actual dimensions. If it is 400px X 320px, change the embed back to that from the 100% you currently have it.

Then you need to create a DIV that will contain it. Your CSS would look something like this:

(With attached style sheet)

html, body {
	height: 100%;
}

#flashContent {
	width: 400px; /*Change this to the width of your SWF */
	height: 300px; /* Change this to the height of your SWF */
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;  /* Half the width of the property defined above */
	margin-top: -150px;  /* Half the height of the property defined above */
        background: #666666;
}

Open in new window


You would then just need to give the page your markup.

<body>
<div id="flashContent">
 EMBED GOES HERE
</div>
</body>

Open in new window


If you don't have an attached stylesheet you can do it all in the HTML page. Here is an example:

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" 

/> 

<style type="text/css">
html, body {
	height: 100%;
}

#flashContent {
	width: 400px; /* Width of SWF */
	height: 300px; /* Heigh of SWF */
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px; /* Negative half width of above WIDTH */
	margin-top: -150px;  /* Negative half height of above HEIGHT */
        background: #666666;
}
</style> 
</head> 
<body> 

<div id="flashContent"></div> 
  <!-- EMBED GOES HERE -->
</body> 
</html>

Open in new window


Let me know if you have any questions.
0
 
LVL 30

Expert Comment

by:IanTh
ID: 35715216
see http://www.webmasterworld.com/forum83/414.htm

it says
div.centered {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
}

Just make sure your widths and margins add up to 100%, and no more or no less. For IE, you also have to declare:

body {
height: 100%;
padding: 0;
margin: 0;
}

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 30

Expert Comment

by:IanTh
ID: 35715220
get used to using divs by the way
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35726036
@Geekbytrade

Never heard back from you. Did you get your issue solved?
0
 

Author Comment

by:geekbuytrade
ID: 35727642
@jonahzona

Sorry.  Busy weekend.  I did what you said.  Issue still not resolved.  Pls see binarytechservices.info.  If I play the swf file alone, it plays perfectly.  When embedded in the index.html file, it cuts off the swf file at the bottom.  
0
 
LVL 30

Expert Comment

by:IanTh
ID: 35728139
have you tried

see http://www.webmasterworld.com/forum83/414.htm

it says
div.centered {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
}

Just make sure your widths and margins add up to 100%, and no more or no less. For IE, you also have to declare:

body {
height: 100%;
padding: 0;
margin: 0;
}
0
 

Author Comment

by:geekbuytrade
ID: 35728455
@IanTh

Will try after my 8 to 5.  Thx.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35756251
Just checked this and it appears that you used my solution....

What did you get wrong the first time?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36103213
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question