Centering group of boxes or menu not working properly in Adobe Muse

[christopherb291242]

Hi,

I am a total newbie to Adobe Muse, but I am an expert in almost every other of the major Adobe products. I am trying to learn how to use it and I don't know if what I'm encountering here is a glitch or what, but what I've done is created 5 boxes and grouped them together and centered that group to the page. However, when I preview them in my browser (Google Chrome) they are not actually centered. and it gets more obvious if you resize the window down to a smaller size. I've encountered this same issue with the horizontal navigation menu as well.

Here is a link to the Test site.

Could anyone point me in the right direction to solve this? I've searched and searched, but haven't found an answer. I feel like I'm taking crazy pills haha.

Thank you,

Chris B.

[Günter Heißenbüttel]

The problem is, we can't know, whick boxes you want to be centered (you are talking about 5, but there are at least 7 – and these are only the green ones. And we don't have many other necessary informations (pinning, scaling, kind of elements, …).

So do the following: Reduce your sample site to only the elements (boxes, menu) you want to center, upload this .muse file to Dropbox or a similar file sharing service and post the download link here. Then we can have a look.

As elements in Muse's web design are dynamic and influence each other – and this in completely different ways according to the type ot the element (rectangle, image, text) – is is necessary to see your .muse file and know exactly, what you want to achieve.

[christopherb291242]

Sorry about that. This should clear it up. This is the nav bar only with the 5 boxes (I gave them a green stroke so they stand out from each other). Thank you!

Dropbox - Header Only.muse

Chris

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

Hello Chris!

It is interesting to see, that users, who are new to Muse, always try to achieve the most complicated things! May be, because it is often looking that simple!

• You try to achieve two things together, which are not possible in this combination in the actual version of Muse:
• First, you want the header elements to stay at the top of the browser window, when you scroll down the page. Therefore you are using browser pinning.
• Second, you want the rectangles to stay side by side without any gap between, when the window is resized. This only can’t happen, if you allow these rectangles to scale horizontally. Otherwise they fall apart or overlap each other.
• But if you allow the rectangles to scale horizontally, the pinning refers to every single rectangle, and according to this they try to keep their relative position to the center of your page. Consequence: You see gaps between the elements.
• If you unpin the rectangle, they scale as expected, but don’t keep their position at the top of the browser window.

The only workaround I see for the moment: Make your breakpoints „fixed width“ and scale the rectangles breakpoint-wise to the dimensions, you want.

Look at this example file, where I have done this:

https://www.dropbox.com/s/hijnzrdj6sapmvu/Header%20Only_Mod.zip?dl=0

[christopherb291242]

Thanks Günter, that is all good stuff to know. However, the example you attached output this in IE, Firefox and Chrome. It's like the group of white boxes still won't center in the browser window. It's like it's leaning to the right for some reason?

[Günter Heißenbüttel]

Of course! This was the completely wrong file! Please, excuse me!

This one hopefully is the correct one: https://www.dropbox.com/s/am1nh2sj7nnfpkr/pining-scaling.zip?dl=0

[christopherb291242]

Oh I see haha. That rendered correctly and I see how you handled the scaling with the breakpoints as well. Thanks again Günter!