Text overlapping content below - Common issue

[Cliffsta B]

Hi - I am trying to establish cause and effect of text boxes overlapping content below. A quick google and one can see its a common issue in Muse. I have tried to follow guides about unpinning content, but have no result. Fortunately, I have isolated the "cause" being my accordion mobile menu on smaller breakpoints. To explain, I have a master called "Base Master" and then two child masters called "white menu" and "blue menu" - These contain elements from the "Base master" with merely an addition of a menu for desktop and mobile breakpoints. When I apply only the "Base master" to the page, the text works as one would expect, but does not overlap. As soon as I use one of the Menu masters, I get an issue;

Here is just the base master:

http://clients.firedog.co.uk/evenergi/testnomenu.html

And here is the inclusion of the accordian menu:

http://clients.firedog.co.uk/evenergi/testwithmenu.html

Have a look at the smaller mobile breakpoints and note the difference in top text box (The blue H2).

And reason why the mobile menu accordian would be affecting the layout? I have checked and there are no elements which go outside of the header?

I note that this behaviour is replicated in other areas on the site. It seems that the menu causes text containers to "disrespect" the content below and overlaps them?

Help would be most appreciated!

Cliff

[Cliffsta B]

Hi folks,

Thought it may help to include a sample muse file to play with. Here is a dropbox link with assets included:

https://www.dropbox.com/s/barbo13mfhade7m/Evenergi_Menu_Test.zip?dl=0

[Günter Heißenbüttel · Accepted solution]

Overlapping text boxes sometimes are a „common issue“ in Muse, but normally, because the the person, who posts the „issue“, doesn’t really understand, how Muse works!

In your special case, the problem is completely different:

Muse needs an enormous amount of artificial intelligence to detect which elements should push/up down wich other elements,which element should follow this behaviour and which not, when the browser window is resized. The hamburger menu in smaller breakpoints changes the situation compared to your other breakpoints: One more element, which has to be taken into account as a dynamic, influencing and influenced element.

If things are getting complicated (normally, if you have many elements of different width and/or height on your page, the elements below, don’t „know“ what to do, when browser window is resized), you definitely should help Muse to detect the elements, which should be the „Push down initiator":

Go to the 768 px breakpoint and select the left text frame („Who and What is …“) and the iPhone image and group them, to tell Muse they have „equal rights“.

Now select the upper text frame („Electric Vehicle“) and the group, you created in the last step and group them too.

Now all should work as expected.

The „problem“ is, that in many situations you can’t see clearly how and why Muse decides, which element is responsible to influence other elements. But if you know about this difficulty, it is normally quite easy to find your way out.

[Cliffsta B]

Hi Gunter, that did work really well thank you.

Unlike perhaps some other Muse users, I understand HTML pretty well.

I think where I am struggling a bit with Muse is understanding flow and relationships.

In HTML, when you have one div inside another div, the parent div responds to the child changes in dimension (Unless you hack it not to).

In Muse, I understand that if you place one text box inside another square shape, it kind of replicates the above condition.

Where it becomes hard, is if you do not do this, and have a few elements on the page - It isn't made explicit how these elements interact. And of course, the code is not visible at the same time, like in Dreamweaver.

I am interested to know what function Grouping does in Muse, which emulates HTML? Is it a case of placing those elements together in a single div (I note they still honour their own responsive functions)

I ask, because I have a few other areas where this is happening, and would love to understand the group function more in how it relates to html so that I may apply the logic elsewhere.

And finally, was the grouping required in my layout because I had one element on top of two side by side? Seems like it did.

Cliff

[Pavel_Homeriki]

https://forums.adobe.com/people/Cliffsta+B  написал(а)

Is it a case of placing those elements together in a single div

Yes.

I note that some elements cannot be grouped together, which again is odd to understand.

If the object is stretched to 100% of the width of the canvas (browser), it can not be grouped. In this case, you can use the state button as a container instead of a group.

But in general, all this is a great pain in the Muse. It does not always work as expected from the standard html.

The basic structure of the Muse site:

<html>

  <head>

  </head>

  <body>

     <div id="page">

          Here is the entire content of the site

      </div>

      <script>

          Here all the scripts.

      </script>

  </body>

</html>

[Cliffsta B]

Thanks Pavel!

[Cliffsta B]

As an example, here is the home page of the same site. What I am struggling with is how to keep these elements centrally aligned, responding to each other in terms of when text wraps, the assets move down. And when to group, and indeed if they need some background containers to "hold" elements together. I note that some elements cannot be grouped together, which again is odd to understand. the "Demand Control of Your Energy" group of four assets just won't budge, no matter what I do - each of the major sections in the page overlap at mobile view, and I am having to create huge random gaps to make them not do so.

My comparison with HTML above, is that when you place one DIV within another DIV and set margins and padding, the elements always flow and grow honoring the relationships between each element. Muse does not seem to work this way natively, unless you treat objects in a certain way.