Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question Aligning Flash Website Center, with Overflow.

    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:

    Code:
    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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Hello Vizard-Coder,
    Are you wanting both vertical and horizontal center on your .swf?
    Have a look at this -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <div id="wrap">
            	your .swf here
            <!--end wrap--></div>
    If the css was:

    Code:
    #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:

    Code:
    overflow:hidden;
    Have you ever come across anything like this?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by Vizard-Coder View Post

    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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

    Code:
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by Vizard-Coder View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •