9 Replies Latest reply on Aug 23, 2013 5:45 AM by heathrowe

    Centering a very wide Edge Website?

    ZSuttonPhoto Level 1

      I'm trying to find a way to center a website built in Adobe Edge Animate, and having a heck of a time. I've tried virtually every code I've found for centering a website, without any luck so far.

       

       

      I have a website that is 2000px wide. Its this wide so that it formats well on large screen resolutions with ease, however, I want it to look good for people that have resolutions below 1920x1080, however I can't find a way to do it. Here is the website as it right now

       

      http://zsuttonphoto.com/Press.html

       

      Obviously, I would like the horizontal scroll bar to be removed, and the center column to be centered in the screen, so that it looks like this--

       

      http://i.imgur.com/AYR4bAe.jpg

       

       

      Does anyone have any advice on how to do this?

        • 1. Re: Centering a very wide Edge Website?
          heathrowe Most Valuable Participant

          You need to take a simpler another approach

           

          - there is no need to start with a larger width, particularly your header image (its 2000px wide), incorporate % units for the width, instead. Or resort of media queries to adjust the page elements per different viewport sizes.

          - page stalls in IE at the preloader!

          - why all the images? Plenty of textual areas in your page that can be done directly in Edge.

           

          Darrell

          • 2. Re: Centering a very wide Edge Website?
            resdesign Adobe Community Professional & MVP

            Hey Zack,

             

            Just saw another post that may help you about the fonts:

            http://forums.adobe.com/message/5616701#5616701

             

            You can adjust your composition with percentages as Darrell mentioned. Just starts one piece at a time and test it until you have all your pieces working as you want. Do not forget to set the minimum size.

            Let me know what happens.

            • 3. Re: Centering a very wide Edge Website?
              ZSuttonPhoto Level 1

              To answer the third piece, I have it all set to PNG cause the font choice I used for the page and largely for my branding is not a webfont, nor is their one that would work for my design as needed. As much as I would like to have physical text boxes within the page to help with load time, I havent been able to find a font to fix my needs.

              • 4. Re: Centering a very wide Edge Website?
                resdesign Adobe Community Professional & MVP

                But IMHO plan adaptive layouts from the start when you build your page otherwise it is really a pain to adjust later!

                • 5. Re: Centering a very wide Edge Website?
                  ZSuttonPhoto Level 1

                  Heh, yes. I'm learning that. I'm from the htl era, where you build larger than eeded and build in the functionality later.

                  • 6. Re: Centering a very wide Edge Website?
                    resdesign Adobe Community Professional & MVP

                    You are a great photographer too! Sorry I have not been much help with this - I do not deal much with responsive layouts!

                    • 7. Re: Centering a very wide Edge Website?
                      ZSuttonPhoto Level 1

                      Thank you! I appreciate all the help you've given me, however I might just scrap the Edge animate idea all together. As much as I love the interactivity it provides, it's also proven to be quite the hassle compared to other options. :-\

                      • 8. Re: Centering a very wide Edge Website?
                        ZSuttonPhoto Level 1

                        heathrowe -

                        Can you provide me with some insight on how to go about rescaling it? I want the header to be full bleed, and the psd I built beforehand of the layout was done at 2000 px by 4600px to insure that it would work on the largest resolution (In normal webdesign, its always best to work large and scale down). How will I be able to incorporate that psd to be able to create a new layout thats responsive?

                        • 9. Re: Centering a very wide Edge Website?
                          heathrowe Most Valuable Participant

                          Hey Z

                           

                          Here is a small sample (exclusive of any coding) jus to give you an idea. Also sample is minimal just to showcase.

                           

                          Preview example in browser and resize.

                          Preview: http://www.heathrowe.com/edge/presskit/presskit.html

                          Download: http://www.heathrowe.com/edge/presskit/presskit.zip

                           

                          Key points

                          - Stage w is set to 100%, to provide full independant with

                          - Anything else on the stage is contained in blocks (nested divs) for mangement and position puposes. Example top area elements is in a nested div called 'Top'; bio elements is nested in a div called 'bioArea' etc.

                             The key with the positioning is to make the nested div blocks % (in my case 100% w) w/h and relative to the Top/Left (%) of the Stage. Select thee 'Top' div group for example and observe the Position and Size properties in the Property Panel.

                             The next key is to position the elements within the nested div blocks relative to its own container. So the same principle applies -. in the case of the 'Top' div it has your header image, a fake logo to the left, and a fake tag line to the right, and a menu bar. These elements are nested in the 'Top' div so to make them relative in position - set the X/Y to % and ensure the upper left position marker is active. This tells Edge to 'lock' the relative position to the parent container (Top) to the upper left. Select the fake byLine element, set X/Y to % and ensure the upper right marker is active.

                           

                          Then work your way down, for each element relative to the container its in.

                           

                          Note I only used 2 images in the above example. You can make good use of the Edge div/text tool where possible to avoid over-use of images.

                           

                          Its a quick example and some trial/error will be required. Just make sure to test each element position before moving along. Also as you scale down to say a mobile phone width, some 'resize' event handler will be required to hide some elements, change font size etc where desired or applicable.

                           

                          hth

                          Darrell

                          1 person found this helpful