PDA

View Full Version : Aligning Flash Website Center, with Overflow.



Vizard-Coder
Mar 13th, 2011, 07:37 PM
Hi there, I am building a flash portfolio for a project and I need I have come across a problem when embedding it in the HTML.
The problem is that I am using the css:


overflow:hidden;

The aim is to have the site fullscreen, though the content is centered and much smaller, I need to have the .swf aligned to the center. I have made the width and height of the .swf more than the browsers width, but I want it centered and hiding any overflow.

Does anyone know how to do this using css or html?

Excavator
Mar 13th, 2011, 07:47 PM
Hello Vizard-Coder,
Are you wanting both vertical and horizontal center on your .swf?
Have a look at this -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
background: #FC3;
text-align: center;
}
#measure {
width: 1px;
height: 50%;
float: left;
margin: 0 0 -150px; /* half of wrap's height */
}
#wrap {
width: 700px;
height: 300px;
clear: left;
margin: 0 auto;
overflow: hidden;
position: relative;
background: #ff9; /*just for demo*/
}
</style>
</head>
<body>
<div id="measure"></div>
<div id="wrap">
your .swf here
<!--end wrap--></div>
</body>
</html>

Vizard-Coder
Mar 13th, 2011, 08:17 PM
Excavator, first off thanks for the reply. I understand your code and I have used similar before, to use your code as an example, how would I align the:


<div id="wrap">
your .swf here
<!--end wrap--></div>


If the css was:


#wrap {
width: 2000px;
height: 300px;
clear: left;
margin: 0 auto;
overflow: hidden;
position: relative;
background: #ff9; /*just for demo*/
}


I know for a fact that my .swf width will exceed the browsers width, I want it to be horizontally centered, while clipping the excess using:


overflow:hidden;

Have you ever come across anything like this?

Excavator
Mar 13th, 2011, 09:00 PM
Have you ever come across anything like this?

Yes.
Have you actually tried placing your .swf in that code and testing it in a browser yet?

Vizard-Coder
Mar 13th, 2011, 09:23 PM
I have tried using this code, the difference here to what you're proposing is that I'm trying to clip a flash file to the size of the browsers width, using


width:100%;

But also want the flash file to be central to the page, for example my flash file has a width of 1600px, say the browsers width was 1200px then I would want to the overflow of 200px on both sides to be hidden, thus having a full screen centered flash website.

Excavator
Mar 13th, 2011, 09:37 PM
But also want the flash file to be central to the page, for example my flash file has a width of 1600px, say the browsers width was 1200px then I would want to the overflow of 200px on both sides to be hidden, thus having a full screen centered flash website.

We'll probably need to see the test site for this.

Vizard-Coder
Mar 16th, 2011, 09:29 PM
Don't have a test site set up, I have decided to do it with Javascript as I don't think there is a solution using CSS + HTML