4 Replies Latest reply on Jan 15, 2018 4:01 AM by Nineonethree

    Responsive text box position overlapping full width image

    Nineonethree

      Hi,

       

      I cant seem to understand how to place a textbox that is partly overlapping an image in a way that it gets pushed down when the image is resized.  The text box always stays in the same position regardless of the height of the image:

      Unbenannt.pngUnbenannt2.PNGUnbenannt3.PNG

      Best Regards!

        • 1. Re: Responsive text box position overlapping full width image
          fotoroeder Adobe Community Professional

          Images resize in width and height, while text resizes in width only.

          Solution: use resize "stretch to browser width" or resize in width only and image and text will always appear as you like.

           

          Best Regards,

          Uwe

          • 2. Re: Responsive text box position overlapping full width image
            Nineonethree Level 1

            Thank you for your reply. So there is no way to have the text position change in reation to the bottom of the image? Because i would prefer the image to resize in height also.

            • 3. Re: Responsive text box position overlapping full width image
              Günter Heißenbüttel Adobe Community Professional

              This works – and works not (what is a general mathematical issue and not a Muse problem.)

              When elements are overlapping, it is heavy for Muse to decide,

              • which element should influence wich other element(s), and
              • what is the reference point, the „source" of the „scaling behaviour (the „small" element itself, the  bigger element in the background or the top of the page)

              This problem increases, if the elements are of different height and/or of different scaling behaviour.

              There are ways to help Muse  to find the preferred decision:

              • Place an equally scaling, transparent element of the same width exactly over the bigger element (in your case: the image), but make sure, that it won’t overlap the overlapping element.
              • Group this „guiding“, transparent element with the overlapping element (in your case: the text frame)..

              Now Muse has a better idea, what you are expecting to happen.

              In your case – the overlapping element is a text frame – there is a second problem, which isn’t really solvable without heavy javascript coding.

              You can make the text frame behaving correctly, but since the text within doesn’t scale, the „amount of text overlapping“ visually changes. Look at this screencast (the „guiding frame“ – normally invisible –  is coloured here orange for better visualisation):

               

               

              In the linked .muse sample file, you will see, that the text frame scales absolutely correct and synchronously to the image container behind, but the visual appearance seems to be wrong, because the text doesn’t scale synchronously to the image behind.

              As I said: This is not a Muse problem, but a physical/technical issue, which only can be solved by converting the text to an image (best choice: SVG).  As an example, I placed an image next to the text frame.

              Here you find the sample .muse file: https://www.dropbox.com/s/qr5xsqy6atd5tvr/text-partially-over-image.muse?dl=0

               

              There are certain ways to „moderate" this behaviour, but not to avoid it:

              You may use a „States“ button, place it overlapping and force it to scale proportionally by placing an empty image container together with the text frame into it. But this only will retard the described behaviour.

              1 person found this helpful
              • 4. Re: Responsive text box position overlapping full width image
                Nineonethree Level 1

                Perfect! Thank you this is exactly what i was missing!