A Flash Developer Resource Site

Results 1 to 11 of 11

Thread: [RESOLVED] center flash in firefox nightmare

  1. #1
    AKA [ Paul Bainbridge] webdreamer's Avatar
    Join Date
    Aug 2001
    Location
    Glasgow, Scotland, UK
    Posts
    3,320

    [RESOLVED] center flash in firefox nightmare

    Hi guys,
    What a friggin time i am having with this :help:

    I have just discovered that the past few site i have built dont center properly in flash.

    I thought that i had sorted this today using div with style sheet
    Code:
    <style type="text/css">
    <!--
    BODY {
    	margin: 0px;
    	padding: 0px;
    	background-color: #000000;
    }
    #flashcontent {
    position: absolute;
    left: 50%; 
    top: 50%;
    margin-top: -265px;  /*minus half the height of the movie, so if your movie was 600 pixels high this would be -300px etc... */
    margin-left: -382px; /* minus half the width of the movie */
    }
    #TopLayer {
    position: absolute;
    left: 50%; 
    /*top: 30%;
    margin-top: -265px;  minus half the height of the movie, so if your movie was 600 pixels high this would be -300px etc... */
    margin-left: -382px; /* minus half the width of the movie */
    background-image: url(barTop.jpg);
    width: 765px;
    height: 30%;
    }
    #BottomLayer {
    position: absolute;
    left: 50%; top: -65px;
    margin-top: 500px; /* minus half the height of the movie, so if your movie was 600 pixels high this would be -300px etc... */
    margin-left: -382px; /* minus half the width of the movie */
    background-image: url(barBottom.jpg);
    width: 765px;
    height: 41%;
    }
    -->
    </style>
    I have discovered that if the user resizes the page then it all goes wonky :S
    the top half of the movie dissappears :S

    Example

    Can some one please tell me how to fix this. html is not one of my strengths.

    Thanks
    Paul
    .: To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Twitter - Linkedin
    bringmadeleinehome.com

  2. #2
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429
    Works fine in FF2. I don't have FF1 to test on.
    I've found the best way to center something is with margins and a width.

    #myCenteredDiv{
    width:300px;
    margin:0px auto;
    }

  3. #3
    AKA [ Paul Bainbridge] webdreamer's Avatar
    Join Date
    Aug 2001
    Location
    Glasgow, Scotland, UK
    Posts
    3,320
    Version 2 i have as well.
    the problem is no longer with centering but with what happens when you resize the page. i lose have the swf into the top of the browser
    .: To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Twitter - Linkedin
    bringmadeleinehome.com

  4. #4
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    Location
    Honolulu
    Posts
    2,429
    Yeah I tried that too, resizes fine as well.
    I noticed you have the tops and lefts set to a percentage, but the margins are exact values. That's bound to conflict.

    Here's a page I just finished that does the same thing.
    http://www.lightgroup.com/home.html

  5. #5
    AKA [ Paul Bainbridge] webdreamer's Avatar
    Join Date
    Aug 2001
    Location
    Glasgow, Scotland, UK
    Posts
    3,320
    it resizes fine???
    I have tested every browser size availble to me (800* upto 1440*) and ever one has the same undesirable effect. top of flash movie disapears into the browser and a chunk of the image on the bottom div disappears :S
    Can you help me fix this?
    .: To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Twitter - Linkedin
    bringmadeleinehome.com

  6. #6
    AKA [ Paul Bainbridge] webdreamer's Avatar
    Join Date
    Aug 2001
    Location
    Glasgow, Scotland, UK
    Posts
    3,320
    it resizes fine???
    I have tested every browser size availble to me (800* upto 1440*) and ever one has the same undesirable effect. top of flash movie disapears into the browser and a chunk of the image on the bottom div disappears :S
    Can you help me fix this?
    .: To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Twitter - Linkedin
    bringmadeleinehome.com

  7. #7
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Hi,

    Am I right in thinking you'd like the TopLayer and BottomLayer background images to form a column down the centre of the page that runs the complete height of the browser window with the movie vertically centred in the middle?

    If so it should be possible to simplify the CSS a bit,

    Code:
    body {
      width: 100%; height: 100%;
      margin: 0; padding: 0; 
      text-align: center; /* use text-align to make IE in quirks mode centre the divs */
      background: #000 url(lines.jpg);
    }
    /* setup the width, margins and padding for all the divs */
    #TopLayer, #flashcontent, #BottomLayer {
      width: 766px; /* see note below about widths */
      margin: 0 auto; padding: 0; /* margin 0 auto centres the divs horizontally for FF, Opera, IE in standards mode etc... */
    }
    /* take up half the height of the page with the topBar background */
    #TopLayer { 
      height: 50%; 
      background: url(barTop.jpg); 
    }
    /* and fill the other half with the bottomBar background */
    #BottomLayer { 
      height: 50%; 
      background: url(barBottom.jpg); 
    }
    /* now position your movie absolutely so it appears right in the centre */
    #flashcontent { 
      position: absolute; 
      left: 50%; top: 50%; 
      margin-top: -265px;
      margin-left: -383px; /* again see note below */
    }
    The CSS uses the value 766px as the width of the content instead of the 765 which is the actual width of the movie. This is to get a width that is exactly divisible by 2, doing this prevents occasional alignment issues where the movie would sometimes (depending on screen width) appear 1 pixel out of alignment with the background.

    Tested in IE6, Firefox 2 and Opera 9.

    Hope this helps

  8. #8
    AKA [ Paul Bainbridge] webdreamer's Avatar
    Join Date
    Aug 2001
    Location
    Glasgow, Scotland, UK
    Posts
    3,320
    Thank you very much catbert303
    Will try now.
    .: To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Twitter - Linkedin
    bringmadeleinehome.com

  9. #9
    AKA [ Paul Bainbridge] webdreamer's Avatar
    Join Date
    Aug 2001
    Location
    Glasgow, Scotland, UK
    Posts
    3,320
    Sits perfect when the browser is maximized but It still send's the top half of the swf into the browser when the page is resized.
    .: To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Twitter - Linkedin
    bringmadeleinehome.com

  10. #10
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    How small are you making the window? That only happens for me if you resize the window so that it is smaller than the movie itself. That is the calculation half the height of the browser window - half the height of the movie becomes negative. If this is a problem you might be able to workaround it with Javascript. Something like this might help:

    Code:
    <script type="text/javascript">
    window.onresize = function() {
        var h = document.body.offsetHeight;
        var f = document.getElementById('flashcontent');
        if (h < 530) { // the movie is taller than the window - don't try to centre it vertically
            f.style.marginTop = '0px';
            f.style.top = '0%';
        } else {
            f.style.marginTop = '-265px';
            f.style.top = '50%';
        }
    };
    </script>

  11. #11
    AKA [ Paul Bainbridge] webdreamer's Avatar
    Join Date
    Aug 2001
    Location
    Glasgow, Scotland, UK
    Posts
    3,320
    THanks catbert303 you have saved me a long stressfull week.
    .: To me AS is like LEGO, Only for the big Kids :.
    - Site - Blog - Twitter - Linkedin
    bringmadeleinehome.com

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center