Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 20
  1. #1
    Junior Member
    Join Date
    Jul 2007
    Posts
    16
    Member #
    15531
    so i am sorry right of the top i am a noob to this forum and i know centering comes up all the time in every forum, but what about z-indexing centered divs?

    my goal is to have an animated flash background, with html text layered on top of it.
    i can get this to work by using absolute positioning both divs, z-idexing the text above the flash, and then rendering flash as opaque or transparent
    and it works and looks great!

    but now i want to be able to center the page, and for the past 3 days i have been pulling hair out trying to get this to work but i can get the text to over lap the flash.... any div for that matter.

    please let me know if you have done this beofre or if you have any pointers
    ---Nick

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Show us your code and we can help you fix it.

    Conceptually it's a simple as giving a width to the div and using margin: 0 auto to center it, then using z-index: number to get it on top of anything else. But it sounds like you're aware of that.

  4. #3
    Junior Member
    Join Date
    Jul 2007
    Posts
    16
    Member #
    15531
    <code>
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background:url(background.jpg);
    background-color: #ffffff;
    background-repeat:no-repeat;
    background-position:bottom left;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }
    #Flashobject {
    width: 1024px;
    height:768px;
    top:0px;
    margin: 0 auto;
    border: 5px solid #000000;
    text-align: left;
    z-index:1;
    }
    #DivContent {
    top:110px;
    width: 1024px;
    height:650px;
    margin: 0 auto;
    text-align: left;
    z-index:2;
    }
    </head>
    <script type="text/javascript" src="pageimages/Realty World - Carlsbad, CA/swfobject.js"></script>
    <body>

    <div id="DivContent"><P>This is example text only</p></div>
    <div id="Flashobject"><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="www.adobe.com"></a></p>
    <script type="text/javascript">
    var so = new SWFObject('anibackground.swf','player','1024','768 ','9');
    so.addParam("allowfullscreen","true");
    so.addParam("wmode", "opaque");
    so.write('Flashobject');
    </script></div>


    </code>
    Now that seemed like the logical answer but when i did that the text kept getting stacked above the flash not layers on top of it, i have tryed different possitioning varibles like absolute and fixed but nothing is keeping it centered

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Unfortunately, z-indexing with embedded objects like flash is typically difficult, and often impossible, as these are treated differently by the browser (depending on the browser, too). So it may not be possible.

  6. #5
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Hmm, never knew that embedded stuff did that.

    The only way I can see that it would work is if you use absolute positioning on #DivContent. I know that's not the happy solution because you want it centered, but that's the only way I can get it to work. You could probably use absolute positioning and then center it with Javascript though... It's the long and hard answer to the problem, but probably the only one.

  7. #6
    Junior Member
    Join Date
    Jul 2007
    Posts
    16
    Member #
    15531
    Quote Originally Posted by Shadowfiend
    Unfortunately, z-indexing with embedded objects like flash is typically difficult, and often impossible, as these are treated differently by the browser (depending on the browser, too). So it may not be possible.
    oh z-index something over flash is very easy, it is the centering part i am stuck on

  8. #7
    Junior Member
    Join Date
    Jul 2007
    Posts
    16
    Member #
    15531
    Quote Originally Posted by Eddy Bones
    Hmm, never knew that embedded stuff did that.

    The only way I can see that it would work is if you use absolute positioning on #DivContent. I know that's not the happy solution because you want it centered, but that's the only way I can get it to work. You could probably use absolute positioning and then center it with Javascript though... It's the long and hard answer to the problem, but probably the only one.
    thats what i was worried about :cry:
    and javascrirpt master i am not

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    If your containing element has an absolute width and height you can do something like this:

    Code:
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;

    Where 15px is half of the height and width. I know for 100% certain that this technique will work in non-IE browsers, but I can't recall for certain how IE plays with negative margins.

  10. #9
    Junior Member
    Join Date
    Jul 2007
    Posts
    16
    Member #
    15531
    Quote Originally Posted by Shadowfiend
    If your containing element has an absolute width and height you can do something like this:

    Code:
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    Where 15px is half of the height and width. I know for 100% certain that this technique will work in non-IE browsers, but I can't recall for certain how IE plays with negative margins.
    for some reason it isn't centering
    it creates horiz and vert scroll bars and place the sit in a far bottom right corner

  11. #10
    Junior Member
    Join Date
    Jul 2007
    Posts
    16
    Member #
    15531
    well is there any way that you can refer to the flash file from the style sheet?
    maybe just set it as the background of the div with javascript?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:11 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com