10 Replies Latest reply on Nov 14, 2017 5:10 AM by Günter Heißenbüttel

    Header in Plan view messing up layout

    kevindennis

      I am trying to create a kiosk style html file that will be used on an iPad.

      I want the page to be exactly 1366x1024, no bigger no smaller.

      I don't want the page/site to be Responsive. (notice the site properties)

      Here is what I have so far. Sorry about the blur but I had to sign a NDA.

      MuseHelp.png

      I think I removed the header and footer but I still see a white bar on the top of my pages in the "Plan" view.

      It doesn't show up in the design view but any elements I add to the pages are push up when I preview.

      Also you can see in the "Splash" page the full screen Red X... that is a full screen rectangle I am using to create a link to another page.

      In "Design" it starts at the top of the red box and goes to the bottom of the page but in "Plan" it is pushed up to include the extra white space at the top.

       

      Please help, this is a very time sensitive project!

       

      Thanks!

      Kevin

        • 1. Re: Header in Plan view messing up layout
          Günter Heißenbüttel Adobe Community Professional

          No way out: Please make your site anonym, if it is under NDA, reduce it to only one page with only the elements shown in your screenshot, and share this .muse file with us. You may upload this .muse file to Dropbox, Creative Cloud or a similar file sharing service and post the download link here.

          1 person found this helpful
          • 2. Re: Header in Plan view messing up layout
            kevindennis Level 1

            Günter,

            Thank you for looking into this for me.

             

            I have no experience with Muse so any help would be greatly appreciated.

            Once again the problem I am having is with scaling and positioning of elements.

            I need every thing to be in a fixed scale and position.

             

            Here is a Google Drive link to my file:

            https://drive.google.com/file/d/1RZ-rpdqsvpv3xI-yZqLKHAtSfw1NJDHu/view?usp=sharing

             

            The site will be running as a kiosk on an iPad Pro 12.9 (native resolution 2732 x 2048)

            but I wanted to keep the file size down so I was building the site half that resolution at 1366x1024.

             

            -Kevin

            • 3. Re: Header in Plan view messing up layout
              fotoroeder Adobe Community Professional

              You used browser fill to create a website. Your browser fill is an already finished image. This will not work.

              I created a rough and dirty "layout", how your site might work.

              Be aware of the fluid width breakpoints instead of the fixed width site.

              I guess you should watch some muse tutorials first before starting to create website.

              That your site might be "Time sensitive" makes me shiver, to be honest. It is, btw, not nice to load your pressure to us.

              If you want to design tablet size website only, you should not start with 1366 breakpoint.

              My example is not as a tablet site, instead I used your settings.

              You may watch with tools like "Developer" how screen resolutions work:

              Bildschirmfoto 2017-11-11 um 19.05.55.png

              This is a link to your SPLASH: Adobe Creative Cloud if you like.

              I recommend to take the pressure out of your project and watch these: Adobe Muse tutorials | Learn how to use Adobe Muse CC

               

               

              Best Regards,

              Uwe

              • 4. Re: Header in Plan view messing up layout
                kevindennis Level 1

                Uwe,

                Thank you for your response.

                I will look into the links you sent.

                As far as the tutorials I went though most of what I could find about a year ago. I will go back and review but since this is not my main area of work my projects are far and few between.

                My main area is After Effects and Premiere.

                I am sorry about the Time Sensitive issue, it had not been my meaning to put the pressure on you and this forum. Just needed for people to respond quickly if they had an idea to offer. I need to have a working model by end of next week. My problem not yours.

                I honestly thought this would be a relatively easy project for a novice and was just looking for a little guidance, my bad.

                Thanks again,

                Kevin

                • 5. Re: Header in Plan view messing up layout
                  fotoroeder Adobe Community Professional

                  kevindennis  schrieb

                   

                  I am sorry about the Time Sensitive issue, it had not been my meaning to put the pressure on you and this forum. Just needed for people to respond quickly if they had an idea to offer. I need to have a working model by end of next week. My problem not yours.

                  I honestly thought this would be a relatively easy project for a novice and was just looking for a little guidance, my bad.

                  Thanks again,

                  Kevin

                  Not that big deal. If you follow my "NEW …" master pages you will see how muse "works" I guess.

                  The main issue was, that you used "browser fill". This is normally used for (don`t laugh) – Browser fill .

                  This could be a colour or a pattern or a gradient. And of course you could fill the browser with an image.

                  You put the main content into browsers fill, that was the main misunderstanding on your side, I guess.

                  Now, that we all know how to play the game let´s check how we can help.

                   

                  Could you explain a little deeper the "kiosk style"? And why your website should only be available on iPad/tablet.

                  Anyway:

                  My suggestion, create a fluid width site with the "by default" dimensions of 960 and set the minimum width to 768.

                  Bildschirmfoto 2017-11-11 um 21.47.38.png

                  Take care of the elements that should appear on all pages, use the scrubber and go for it.

                  Bildschirmfoto 2017-11-11 um 21.49.24.png

                   

                  Best Regards,

                  Uwe

                  1 person found this helpful
                  • 6. Re: Header in Plan view messing up layout
                    kevindennis Level 1

                    Uwe,

                    Thanks for your understanding.

                    I don't understand why you would use a fluid width.

                    Here's my setup:

                    The "site" will only be "hosted" locally on the actual iPad it's running on.

                    The iPads will have no internet access and will be used at a trade show for a vendor to display their materials.

                    The iPads will be "locked" with this file running.

                    We're using iPad Pros 12.9" display resolution of 2732 x 2048.

                    Browser window will not be able to be scaled as it will be locked in full screen mode with no browser menu or url access.

                     

                    Hope this makes thing more clear.

                    Kevin

                    • 7. Re: Header in Plan view messing up layout
                      fotoroeder Adobe Community Professional

                      So, obviuosly you wouldn`t need anything else. But be aware that screen resolutions are not the same as resolutions/dimensions in web design. Watch this:

                      Bildschirmfoto 2017-11-12 um 01.05.25.png

                       

                      Bildschirmfoto 2017-11-12 um 01.05.51.png

                      Best Regards,

                      Uwe

                      • 8. Re: Header in Plan view messing up layout
                        Günter Heißenbüttel Adobe Community Professional

                        If I understand correctly,

                        • you need fixed pixel dimensions for a kiosk system.
                        • you are using an iPad with a pixel resolution of 2732 x 2048 px and a logical resolution of 1366 x 1024 px.

                         

                        If this is correct, you Muse page should be fixed width with the same dimensions (1366 x 1024 px). And exactly this is, what you did.

                        The error is, the definition of your image behaviour:

                        You used the image, which is correctly sized, as a browser fill and defined it as „Centred“ and "Scale to fit“:

                        Screen1.jpg

                        So, if you preview this page in a browser with a window size, which doesn’t match exactly your page dimensions, the background image will scale accordingly to the middle. This is the case, because you told the image to scale with the browser window in order to always display the whole image. In other words: When the browser window is smaller than 1366 px, the image scales down accordingly and shows this white „gap“ at the top and the bottom.

                        • The solution ist simple: Tell the image not to scale and set it to „Original Size“:

                        Screen2.jpg

                        Now, your issue should be fixed.

                         

                        • Annotation 1: As an alternative, you may switch to a HiDPI site (-> menu: File/Site Properties/Resolution: HiDPI). In this case, your images should have exactly(!) the double pixel dimensions (= 2732 x 2048 px) and you have to place (not fill)  the background image onto your page. Additionally you have to use the „Transform“ panel to resize this image manually to 1366 x 1024 px. Muse places the image smaller to avoid inadvertently placing oversized images, which may extend the loading time of a page significantly.
                        • Annotation 2: On some of your pages you are using system fonts. This is not a good idea! You should use standard fonts or web fonts.Why? These fonts have to be converted to an image during output, and therefore don’t behave like text any more, but just like an image. To learn, why this behaviour is necessary, please read my post 4 in this thread: https://forums.adobe.com/thread/2357163
                        1 person found this helpful
                        • 9. Re: Header in Plan view messing up layout
                          kevindennis Level 1

                          Just wanted to say thank you both for helping with this project. I have used ideas from both of you and the pages seem to be laying perfectly.

                          My test iPad arrives today so I can see how it will work on the same device as we will be using at the trade show.

                          Wish me luck!

                          Thanks again for your help and patients.

                          Kevin

                          • 10. Re: Header in Plan view messing up layout
                            Günter Heißenbüttel Adobe Community Professional

                            No luck necessary, only Muse skills!