Skip navigation
Currently Being Moderated

How to center page designed in Edge

Mar 22, 2012 9:24 PM

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

 
Replies 1 2 3 Previous Next
  • Currently Being Moderated
    Mar 23, 2012 3:11 AM   in reply to directormrv

    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.

     
    |
    Mark as:
  • ♥Schrene
    740 posts
    Jan 20, 2012
    Currently Being Moderated
    Mar 23, 2012 5:29 AM   in reply to m.prades

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

    Make sure you use capital S for stage.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 9:18 AM   in reply to directormrv

    new to this.. where do I paste

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

    Thanks!

     
    |
    Mark as:
  • ♥Schrene
    740 posts
    Jan 20, 2012
    Currently Being Moderated
    Apr 30, 2012 9:20 AM   in reply to beati

    In your Stage actions panel use compositionReady

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 9:21 AM   in reply to ♥Schrene

    Thanks!

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 9:46 AM   in reply to directormrv

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

    Thanks!

     
    |
    Mark as:
  • ♥Schrene
    740 posts
    Jan 20, 2012
    Currently Being Moderated
    Apr 30, 2012 9:55 AM   in reply to beati

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2012 4:57 AM   in reply to ♥Schrene

    ♥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

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2012 10:09 AM   in reply to ♥Schrene

    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!!

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2012 10:17 AM   in reply to James Navarro

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2012 10:52 AM   in reply to ♥Schrene

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 2:40 PM   in reply to ♥Schrene

    For some strange reason this won't work for me.  Here is my page:

     

    http://s364852370.onlinehome.us/HarmonicMotion/HarmonicMotionII/Harmon icMotionII.html

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 3:44 PM   in reply to HarmonicMotion

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 8:08 PM   in reply to tfbkny

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 8:40 PM   in reply to HarmonicMotion

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 12:34 PM   in reply to tfbkny

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 1:00 PM   in reply to HarmonicMotion

    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).

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 3:20 PM   in reply to joel_pau

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 6:16 AM   in reply to joel_pau

    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?


     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2012 9:13 AM   in reply to HarmonicMotion

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2012 3:48 PM   in reply to directormrv

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2012 9:09 PM   in reply to ♥Schrene

    Whats the reason for the Captial S notation.

     

    The actual stage id is lowere-case?

     

    H

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2012 11:05 PM   in reply to Tatanium

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2012 8:55 AM   in reply to heathrowe

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2012 9:00 AM   in reply to tfbkny

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2012 11:39 AM   in reply to Tatanium

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2012 6:03 PM   in reply to directormrv

    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-h tml/

     

    (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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 6:07 AM   in reply to directormrv

    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")

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 8:19 AM   in reply to resdesign

    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 ?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 6, 2012 11:11 AM   in reply to Steve HomeMovies.Ca

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 21, 2012 9:05 PM   in reply to ♥Schrene

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 8, 2013 10:28 PM   in reply to ♥Schrene

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 8, 2013 10:43 PM   in reply to masud ayub

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 8, 2013 11:08 PM   in reply to tfbkny

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2013 12:02 AM   in reply to masud ayub

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2013 7:14 PM   in reply to ♥Schrene

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2013 7:52 PM   in reply to khsana04

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2013 8:10 PM   in reply to heathrowe

    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/"

     
    |
    Mark as:
1 2 3 Previous Next
Actions

More Like This

  • Retrieving data ...

Bookmarked By (7)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points