Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Responsive text box position overlapping full width image

New Here ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

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!

Views

703

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jan 15, 2018 Jan 15, 2018
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  ...

Likes

Translate

Translate
Adobe Community Professional ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines