1 2 3 Previous Next 92 Replies Latest reply: Feb 22, 2015 2:47 PM by makasiku RSS

    How to center page designed in Edge

    directormrv

      Hi, Can someone please tell me if there is a way to make a page created in Edge to center vertically on the browsers? It seems to default to top left.

       

      Thanks

        • 1. Re: How to center page designed in Edge
          m.prades

          there is a lot of different ways of doing that  i would suggest displaying your page with an iframe within another page so you dont have to overload Edge default styles , or add css to your stage :  $("#stage").css("margin","auto") should do the trick , in an action at the start of your composition.

          • 2. Re: How to center page designed in Edge
            ♥Schrene Community Member

            The correct  code for adding centering to stage in Edge is $("#Stage").css("margin","auto").

            Make sure you use capital S for stage.

            • 3. Re: How to center page designed in Edge
              directormrv Community Member

              That Worked! Thank you very much!

              • 4. Re: How to center page designed in Edge
                beati

                new to this.. where do I paste

                $("#Stage").css("margin","auto").?

                Thanks!

                • 5. Re: How to center page designed in Edge
                  ♥Schrene Community Member

                  In your Stage actions panel use compositionReady

                  • 6. Re: How to center page designed in Edge
                    beati Community Member

                    Thanks!

                    • 7. Re: How to center page designed in Edge
                      beati Community Member

                      for some reason, when I add the code to the preloader page, the page doesn't show up.?

                      Thanks!

                      • 8. Re: How to center page designed in Edge
                        ♥Schrene Community Member

                        If you have a preloader the preloader will not center using the above method.

                        You will need to use this method:

                        Open the HTML file created by Edge...

                        Using Dreamweaver or Notepad

                        add this in between the <head> tags:

                        <style type="text/css">

                        <!--

                        #Stage {

                            height: 596px;

                            width: 553px;

                            margin-right: auto;

                            margin-left: auto;

                        }

                        -->

                        </style>

                        Make sure the height and width match the height and width that you set for the Stage in Edge.

                        • 9. Re: How to center page designed in Edge
                          tfbkny Community Member

                          ♥Schrene wrote:

                           

                          The correct  code for adding centering to stage in Edge is $("#Stage").css("margin","auto").

                          Make sure you use capital S for stage.

                          One more item to add to Edge Documentation

                          • 10. Re: How to center page designed in Edge
                            James Navarro

                            Thanks!!! This works perfectly! But now I can´t get my preloader to center as the stage is, do you know how to center the preloader? Thanks in advance!!

                            • 11. Re: How to center page designed in Edge
                              sarhunt Adobe Employee

                              Hey James,

                               

                              As Schrene describes above, you have to set the width and height via CSS to position the preloader as well. This is due to the stage information not being contained within the preloader.

                               

                              Thanks,

                              Sarah

                              • 12. Re: How to center page designed in Edge
                                aa_lique Community Member

                                Hi Schrene

                                Just wanted to thank you so much for this code. I was exasperated as I tried everything to center the stage in html.

                                Angelique

                                • 14. Re: How to center page designed in Edge
                                  tfbkny Community Member

                                  Nice work... problem may be with the fact that you have all divs positioned with position:absolute which will not allow margin:auto to center in the browser since you are forcing the position to be absolute specifying where each element should appear. That would be my guess... hope that helps you.

                                   

                                  Cheers!

                                  tfbkny

                                  • 15. Re: How to center page designed in Edge
                                    HarmonicMotion Community Member

                                    Makes sense,

                                     

                                    So the best bet might be to embed this in an iframe of a different html document?  Seems like its a big messy, but I'm no web developer.  Would the other solution be to restructer the entire animation?

                                     

                                    Thank you,

                                     

                                    Ben

                                    • 16. Re: How to center page designed in Edge
                                      tfbkny Community Member

                                      mm... perhaps it's something else... your code seems to be missing the Stage div altogether. Are you sure you didn't manually remove some code when adding audio and such? I can't seem to find the Stage id. You have it in the CSS but there is no div with such id. Therefore that CSS never takes effect.

                                       

                                      You could try to add a wrapping div (places as the very first one containing all the rest) as in:

                                       

                                      <body...>

                                      <audio...>

                                       

                                      <div id="Stage">

                                       

                                      ...all your HTML...

                                       

                                      </div>

                                      </body>

                                       

                                      That will center your current work but because it's set to a specific size and sits aligned to the left it will still not appear completely centered, but that's something you may need to adjust in your Edge project.

                                       

                                      hope that helps you.

                                       

                                       

                                      Cheers!

                                      tfbkny

                                      • 17. Re: How to center page designed in Edge
                                        HarmonicMotion Community Member

                                        Thanks for the help,

                                         

                                        I don't think I deleted anything from my html file when putting in the audio, but it's possible.  I tried putting a div tag with Stage as the ID but found that rather than centering or moving the animation it just centered the audio files whose opacity is turned off anyway.

                                         

                                        Is there any way of me replacing the code I'm missing in the html doc?

                                         

                                        Thanks again for all your help.

                                        • 18. Re: How to center page designed in Edge
                                          joel_pau MVP

                                          yes, you have to rebuild your html file because:

                                          1) the div Stage is missing within body tag.

                                          <div id="Stage" class="EDGE-1143338052">

                                              </div>

                                          2) you write 3 lines to center your composition. Once is enough.

                                          So you can republish your file with Edge and you add yours audio tags.

                                          About centering: you choose between: style tag (line 1), body tag (line 2) and the css line within Edge (line 3).

                                          • 19. Re: How to center page designed in Edge
                                            tfbkny Community Member

                                            Joel has been pretty thorough here... but should you still have problems with your build then feel free to let me know.

                                             

                                            I tested your live HTML and modified it to center the comp on screen, so if all you want is to center the composition you have to simply change the "width: 1350px;" to "width: 1000px;" in the style tag so that it will read:

                                             

                                            <style type="text/css"><!--#Stage {top: 10px; height: 700px; width: 1000px; margin-right: auto; margin-left: auto;}--></style>

                                             

                                            Then like I said earlier you need to add a "wrapping" div around all the HTML contained withing the <body>...</body> tags. You need to set that div to be the one with its id set to the value of "Stage" like in:

                                             

                                            <body...>

                                            <audio id="myAudio"...>

                                            <audio id="fx"...>

                                             

                                            <div id="Stage">

                                             

                                            ...all your exising HTML code remains intact here ...

                                             

                                            </div>

                                             

                                            </body>

                                             

                                            The parts in bold green is what you should modify as instructed while the part in bold red are new lines of code you would need to add to your page.

                                             

                                            I don't know how you are working within Edge so I can't tell you how you should be modifying the project, but from the code that's been output I was able to make those simple modification/addition et voilà, all got centered

                                             

                                            I hope things will be a bit clearer now but if now don't be shy and keep ask ;D

                                            • 20. Re: How to center page designed in Edge
                                              HarmonicMotion Community Member

                                              Hi guys,

                                               

                                              Thanks for all the the help here.  Tfbkny, I used joel_pau's advice here and deleted any instance I had of centering in the html file.  I then added the <div id="Stage" class="EDGE-1143338052"> </div> tag in between my body tags.  Worked great, and looks great, so thanks for that.  I actually had just one concern:  When I went to republish my edge file, it didn't add that <div id="Stage" class="EDGE-1143338052"> </div> for me.  Is there any reason why it would continue to publish without the stage div?


                                              • 21. Re: How to center page designed in Edge
                                                tfbkny Community Member

                                                If you are adding it to the code as instructed there should work fine. To my knowledge, the Stage div is always exported by default by all Edge compositions... so I can't imagine why your code wouldn't have it. Perhaps you can zip and send your Edge project to someone who could look into it to see if they can publish and their copy of Edge places the Stage ID in that div? Short of some bug I wouldn't know why that id isn't there. If you have another machine (or a friend) running Edge, try there and see if you get the same missing id...

                                                 

                                                Cheers & good luck!

                                                tfbkny

                                                • 22. Re: How to center page designed in Edge
                                                  Tatanium Community Member

                                                  How do you position the stage so that it is horizontally centered but vertically bottom-aligned?

                                                   

                                                  I tried this with CSS with the div id "Stage" and also the class id "EDGE-xxxxxxxx" but neither seem to be working?

                                                   

                                                  CODE:

                                                  #Stage

                                                  {

                                                      margin-right: auto;

                                                      margin-left: auto;

                                                      position:absolute;

                                                      bottom:0;

                                                      width:100%;

                                                      height:590px;

                                                  }

                                                  • 23. Re: How to center page designed in Edge
                                                    heathrowe MVP

                                                    Whats the reason for the Captial S notation.

                                                     

                                                    The actual stage id is lowere-case?

                                                     

                                                    H

                                                    • 24. Re: How to center page designed in Edge
                                                      tfbkny Community Member

                                                      You can try with something like:

                                                       

                                                      sym.$('#Stage').css({'margin-left':'25%', 'margin-right':'25%', 'width':'550', 'position':'absolute', 'bottom':'0px' 'text-align':'center'});

                                                       

                                                      That should place your div id="Stage" at the bottom and assuming your stage width is 550 px then it will maintain a that div at the bottom and centered.

                                                       

                                                      If you want to all sizing proportionally you could use width:50% but that will crop the content visually and if your content required overflow-x to remain hidden it won't work, but you don't need to hide the overflow-x then you could use a combination like setting the margin left and right to 15% and the content to 70% to add up to 100% of the width and have the content remain always in the center bottom area (though when browser window get resized to anything that won't fit what you need to display at the bottom, that content will be "cropped".

                                                       

                                                      Other than doing it this quick way, you would need a combination of containters and wrappers... better tried than explained ;P

                                                      I hope the info above will help you and should something be unclear ask away.

                                                       

                                                      Cheers!

                                                      tfbkny

                                                       

                                                      PS: I find it rather idiotic that W3C continues to ignore something so simple that was already available in the past. It should be as easy as implementing instructions such as align:center; and anchor:bottom; which ridiculously enough don't exist yet even after several iterations of CSS. We still need to do acrobatic BS backflips and know some secret masonic handshakes to accomplish something so extremely simple. Why in the past we could simply write the attribute align="center" and CSS left that behind relegating it to the unreliable margin:auto it's rather surprising to put it mildly.

                                                      • 25. Re: How to center page designed in Edge
                                                        Tatanium Community Member

                                                        Hmmm, in all of my Edge projects, the programs spits out code where the actual stage id is "Stage" with a capital S.

                                                        • 26. Re: How to center page designed in Edge
                                                          Tatanium Community Member

                                                          Thanks tfbkny!

                                                           

                                                          I end up finding this method that works (with some tweaking):

                                                           

                                                          http://www.cssstickyfooter.com/using-sticky-footer-code.html

                                                           

                                                          Although I didn't really need it to "stick" to the bottom, just bottom-aligned...it seems to work.  It really is surprising that something as basic as this requires jumping through so many loopholes to accomplish!

                                                          • 27. Re: How to center page designed in Edge
                                                            tfbkny Community Member

                                                            Yep, like I said if not using that quick line, then some manual tweaking in the published assets will need to be added. Glad you agree on the fact that there are too many hoops and loops to get something do simple done... perhaps we should have companied like Adobe push to introduce new standards useful in CSS like

                                                             

                                                            "align-x:center"

                                                            "align-y:middle"

                                                             

                                                            "dock-x:left"

                                                            "dock-y:bottom"

                                                             

                                                            Using a combination of those properties it would become much less cumbersome to control positioning of an element without having to learn alchemic formulas

                                                             

                                                            I am glad you found the sticky footer to work for you! I didn't mention that as it needed considerable manual tweaking, which is the opposite that Edge should be used for (and maybe will fully allow that in future). I probably should've added it anyway as a "just in case". Next time I promise to be more thorough, but I see that you already know that GIYF for general search ;P

                                                             

                                                            It'd be great if you could share a small example to use as reference of how you solved the issue and how you implemented a static footer in Edge. That will be be kept on this forum and become a searchable reference to help others who may in future be looking for to solve the same problem you did to "add a centered footer at the bottom of a page" (Thanks in advance for taking the time to do that ;D)

                                                             

                                                            Cheers!

                                                            tfbkny

                                                             

                                                            PS: Note to skimping-through readers... those above aren't working CSS instructions that can be used (unfortunately), they are just wishful thinking for now.

                                                            • 28. Re: How to center page designed in Edge
                                                              Steve HomeMovies.Ca Community Member

                                                              I read thru all the suggestions posted, and I don't think the following is one of them. Apologies if it is.

                                                               

                                                              What about a simple table, and, following the instructions of the video called "working with existing html", -

                                                               

                                                              http://tv.adobe.com/watch/learn-edge-preview-6/working-with-existing-html/

                                                               

                                                              (using my test webpage coding as example)

                                                               

                                                              you copy/paste the runtime preloader script part in the head within the adobe edge runtime section

                                                               

                                                               

                                                              <

                                                              <script type="text/javascript" charset="utf-8" src="i-imagine-3h_edgePreload.js"></script>

                                                               

                                                               

                                                              and the

                                                               

                                                              <div id="Stage" class="EDGE-4442444"></div>

                                                               

                                                              part in the horizontally-vertically middle or centre cell ? - Or, where-ever one wants their composition to display on specific web page.

                                                               

                                                              With overflow hidden, none of the offstage elements are seen till you want them seen.

                                                               

                                                              Worked for me, I hope the following link shows properly to any viewer.

                                                               

                                                              http://www.homemovies.ca/edgetest-dreamweavertable2.html

                                                               

                                                              view the source code to see what's what.

                                                               

                                                              Seems a lot easier than the other suggested options, - still - quite the pain in the behind.....

                                                               

                                                              As much as I quite love Edge, they are going to HAVE to figure out how to make 'placing' as easy as everything else.

                                                               

                                                              Message was edited by: Steve Hartwell

                                                              • 29. Re: How to center page designed in Edge
                                                                resdesign MVP

                                                                For me, all I had to do is add the following in composition ready where the class is found in the Edge left panel. No need to add the stage size or anything else. By the way I tested in Firefox 14.

                                                                 

                                                                <div id="Stage" class="EDGE-770422432"></div>

                                                                $("#Stage").css("margin","auto")

                                                                • 30. Re: How to center page designed in Edge
                                                                  Steve HomeMovies.Ca Community Member

                                                                  redesign - did that centre your composition horizontally only at the top of the webpage ? - does something like it also work for getting a composition to display where-ever one wants it on a webpage ?

                                                                  • 31. Re: How to center page designed in Edge
                                                                    resdesign MVP

                                                                    I centered it horizontally only. I suppose it would be possible to center it vertically too. I will have to think about that. I just wanted to check how it would be if I was going to work on a project different from the one I am working on now. In the current project I am working now which is an online highschool whole curriculum, I have created close to 200 animations. We actually use an i frame and we can place the Edge files wherever we want. We just load a zipped file that contains all the files and folders created by Edge through an editor system and then our curriculum interprets them when a student goes through the courses.

                                                                    • 32. Re: How to center page designed in Edge
                                                                      cats1981

                                                                      this worked for me until yesterdays update to edge animate preview 7. now my preloader is no longer centered by the CSS of the Stage... please help

                                                                      • 33. Re: How to center page designed in Edge
                                                                        masud ayub

                                                                        Hello,

                                                                         

                                                                        if i want to add css code, for some elements, where should i enter that?

                                                                         

                                                                        Actually i want to add code for aspect ratio of a gif image! where shall i paste the code..? and what would b the code ...? if i want a square to b a square when the browser size changes !

                                                                         

                                                                        Thankyou

                                                                        • 34. Re: How to center page designed in Edge
                                                                          tfbkny Community Member

                                                                          You would do that in the Code Window.

                                                                           

                                                                          Select Window>Code (or command-E on mac control-E on PC) once the code window opens you can select "Stage" in column to the left of the Code Window, then add the css as mentioned above in the text area on the right. That's where you would insert your code.

                                                                           

                                                                          About the resizing I don't think I get what you mean... a square will remain a square when you resize the window. If you want a fixed size square, just draw a square and use  the position and size in the properties panel to the left. If you want that to scale simply use percentage values instead of pixels. If you want to place an image inside the square, turn that into a simbol then edit the symbol (double-clicking on it or right-clicking and choosing edit "symbol name"), import an image to place it into the square symbol and you'll have your square image. I don't think you are talking about scaling the image itself since scaling gif images would truly be quite a nonsense ;P

                                                                           

                                                                           

                                                                          Hope that will clarify/help you masud ayub

                                                                           

                                                                          Cheers!

                                                                          tfbkny

                                                                          • 35. Re: How to center page designed in Edge
                                                                            masud ayub Community Member

                                                                            Actually i m trying to make my content responsive, for a responsive layout

                                                                            • 36. Re: How to center page designed in Edge
                                                                              tfbkny Community Member

                                                                              Check this quick video for Adobe Edge: https://www.youtube.com/watch?v=ugt4SGOwjHo

                                                                               

                                                                              But you may want to check Adobe Reflow: Here is a quick intro: https://www.youtube.com/watch?v=o3fJoiC8OEQ

                                                                               

                                                                              Cheers!

                                                                              tfbkny

                                                                              • 37. Re: How to center page designed in Edge
                                                                                khsana04

                                                                                Thank you, I got that, but my problem is that I need to have background image to be repeated at all the browser with center the stage also, but it seem it can't do that, I mean I can't center the stage and use background image at the same time here is the code I am doing but it doesn't work:

                                                                                 

                                                                                $("#Stage").css("margin","auto")

                                                                                sym.$("#Stage").css("background-image","url(images/background.jpg)","background-repeat","r epeat")

                                                                                 

                                                                                background will work only if I change "W" and "H" to "%" but centering the stage will get off and it goes back to the left

                                                                                 

                                                                                I hope I am clear.

                                                                                 

                                                                                Any suggestions?

                                                                                 

                                                                                Thanks

                                                                                • 38. Re: How to center page designed in Edge
                                                                                  heathrowe MVP

                                                                                  khsana04 wrote:

                                                                                   

                                                                                  Thank you, I got that, but my problem is that I need to have background image to be repeated at all the browser with center the stage also, but it seem it can't do that, I mean I can't center the stage and use background image at the same time here is the code I am doing but it doesn't work:

                                                                                   

                                                                                  $("#Stage").css("margin","auto")

                                                                                  sym.$("#Stage").css("background-image","url(images/background.jpg)","b ackground-repeat","repeat")

                                                                                   

                                                                                  background will work only if I change "W" and "H" to "%" but centering the stage will get off and it goes back to the left

                                                                                   

                                                                                  I hope I am clear.

                                                                                   

                                                                                  Any suggestions?

                                                                                   

                                                                                  Thanks

                                                                                  Place the below in Stage > compositionReady event handler.

                                                                                  Remove the space in the css syntax - in your eample you have a space between the b a;

                                                                                  Be sure to close each statement with a semi-colon ;

                                                                                   

                                                                                     $("#Stage").css("margin","auto");

                                                                                     sym.$("#Stage").css("background-image","url(images/background.jpg)","background-repeat","repeat");

                                                                                   

                                                                                  Darrell

                                                                                  • 39. Re: How to center page designed in Edge
                                                                                    khsana04 Community Member

                                                                                    Hi Darrell

                                                                                    Thank you for you quick reply, but unfortunetly even after copy and past your code at stage composition ready action it still not working I am getting white background instead around the stage, here is my website "http://www.khaleha3rbi.com/"

                                                                                    1 2 3 Previous Next