0
Заголовок темы

Основы правильной вёрстки в Adobe Muse и как убрать белую полосу справа при просмотре в браузере?

Уверен, что многие из вас сталкивались с такой проблемой на сайте Adobe Muse, как появление непонятной белой полосы справа и, как следствие, появление горизонтальной полосы прокрутки. Это часто можно наблюдать на макете фиксированной ширины, как с точками остановки (в основном с точками остановки), так и без, как на десктопе, так и на мобильной/планшетной ширине.
 
Белая полоса справа и горизонтальная полоса прокрутки в Adobe Muse

Проблема наблюдается только в браузерах на движке "webkit", в Firefox и IE/Edge её нет. При этом, вы всё сто раз проверили, макет собран ровно, ничего за пределы сайта не вылазит. Знакомая ситуация?

Так вот, друзья, есть одна плохая новость и две хорошие.
Плохая новость: это баг в программе, при чём он кочует из версии в версию и не собирается пропадать.
Хорошая новость №1: вы не рукожоп (т.к. это вина программы).
Хорошая новость №2: у меня, конечно-же, есть решение и сегодня я хочу им с вами поделится.

Сразу уточню, что речь именно о белой полосе справа и горизонтальной прокрутке, которая возникает при этом баге, и именно на сайте с НОРМАЛЬНОЙ вёрсткой.
И речь сегодня не пойдёт про принудительное отключение горизонтальной прокрутки кодом, что часто делают "умельцы" (это делать крайне не рекомендую).

Начнём с того, что расскажу принцип правильной вёрстки в программе, при которой вы получите наименьшее кол-во проблем. Запомните эту истину и делайте всегда только так.
Как только вы создали новый пустой проект в Muse, начинайте собирать сайт последовательно, сверху вниз, при помощи прямоугольников 100% ширины, разделяя страницу на некие тематические блоки. Контент каждого тематического блока нужно размещать на фоне каждого такого прямоугольника, не выезжая за его границы.
Эти прямоугольники могут быть даже без заливки (т.е. прозрачные), главное, чтобы такие прямоуогльники были.
Принцип простейший и его можно выразить в одном скриншоте:
 
Принципы правильной вёрстки в Adobe Muse

При таком методе построения сайта, программа генерирует более ровный и структурированный код, что позволяет избежать многих проблем с вёрсткой.

И так, главный принцип усвоили, идём решать проблему с ненавистным отступом справа.

В работе я использую два способа и каждый из них, в том или ином случае, на 100% решает нашу проблему.


Способ №1.

Добавляю в секцию head сайта (через "Свойства страницы" в программе) следующий код:

<style>
    #page div[id*=_align_to_page],#page div[id*=_align_to_page]>*{left:0}
</style>


При этом есть важная особенность, что ВСЕ объекты, находящиеся в зоне фонового блока 100% ширины, обязательно должны быть сгруппированы между собой в одну группу.
Т.е. внутри каждого такого "тематического" фонового блока должна находится одна группа из объектов. Если это не сделать, то всё разъедется.


Способ №2.

Добавляю в секцию head сайта следующий код:

<style>
    #page [id*=_align_to_page] > *{position:absolute}
</style>


Данный способ (№2) я открыл совсем недавно и рекомендую применять именно его (раньше использовал первый способ). Но сайты могут быть разные, ситуации разные и если этот способ не поможет, то пробуйте применить первый.

Тем, кто не любит вставлять код, я подготовил сегодня специальный виджет, который сделает эту грязную работу за вас.

Скачать виджет.


Да прибудет с вами правильная вёрстка! angel
Обновлено 6 Сен 2017, 17:43
Добрый день! Мне помог решить эту проблему вот этот код "<meta content="width=1180" name="viewport" id="viewport">"
Спасибо вам большое! С вами приятно работать!)
Виджет - лучшее решение для такой заадчи. Я последнее время сайты делаю только из ваших виджетов.
Благодарю за работу!
Вы, как обычно, на высоте :)
Насчет группировки объектов. Не все объекты группируются между собой. Пока не уловил для себя зависимость, что группируется, а что нет. Группировать вместе с прямоугольником на 100% ширины? Или только объекты внутри прямоугольника?
Насчет группировки объектов. Не все объекты группируются между собой. Пока не уловил для себя зависимость, что группируется, а что нет. Группировать вместе с прямоугольником на 100% ширины? Или только объекты внутри прямоугольника?
Группировать между собой можно любые объекты, кроме прямоугольников 100% ширины.
Что то не один из способов не помог мне... На iphon есть горизонтальная прокрутка на android нормально, но не на всех устроиствах...
Александр, БЛАГОДАРЮ! Наконец-то! Спасибо за такое изящное решение. А то я уже зарёкся себе, что больше лендингов на Muse делать не буду. И тут такое ) Да ещё и два способа! Здорово, что есть такие профессионалы как Вы! Добра Вам и Счастья!
Огромное спасибо !!! Чудненько работает и без кода )))) Виджет - класс !
ВНИМАНИЕ! В версии программы 2018.1 данный баг в программе устранён. В связи с этим, информация не актуальна.
Т.е. если у вас есть этот баг, просто обновите программу до финальной версии.
К сожалению, не устранен. Воспользовался ваши м методом - все сработало! Спасибо
Лучшее решение - на мой взгляд https://www.youtube.com/watch?v=LCq2Hr01NGU
Сталкивался с этой проблемой, ни одно из предложенных решение не помогало. Обнаружил интересную деталь: белая полоса прокрутки в моб версии появлялась, когда на странице присутстовали объекты с заданным углом наклона. Задал наклон картинкам в фотошопе, фреймы на 0 градусов, и  белая полоса пропала
"В версии программы 2018.1 данный баг в программе устранён. В связи с этим, информация не актуальна" - БАГ НЕ УСТРАНЁН, стоит последняя версия, проблема та же. СОВЕТ ПОМОГ, СПАСИБО!!!


Сообщение
Ник *
Ваш e-mail *
 
Мувилаб рекомендует: быстрый хостинг с защитой от DDos атак!