Как "оседлать" прыгающие элементы в отзывчивом макете ?

[Taurus 2]

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.         Доброго всем времени суток...

Подскажите, как решить такие "скачки" элементов... Вроде и запас есть для смещения. Почему начинают смещаться правый и особенно центральный элемент ? Уже разные варианты пробовал, и разводил их по краям и выставлял замок на изменение размера... Центральный элемент начинает сразу "выдавливаться" наверх, а правый так вообще по диагонали начинает ползти...

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

 

[Taurus 2]

Путем различных комбинаций, нашел выход...

    У центрального элемента убрал закрепление по центру и оставил на "замок" от изменения размера. У боковых элементов также снял закрепление на странице и оставил гибкое значение ширины...

    Но что самое интересное в последующей точке остановке при других параметрах (у центрального элемента выставлено закрепление по центру) эти же элементы вели себя предсказуемо.

[Павел Хомерики 3360]

Для создания отзывчивых сайтов требуется инженерный подход, а не только дизайнерский. Элементы ведут себя так как и должны. Вам надо понять как работает респонсив не только в рамках Adobe Muse, а в целом. И тогда проблем не будет. На движение элементов влияет не только уменьшение окна браузера, но и другие элементы. Например картинка выше с гибкой шириной и высотой будет тянуть элементы ниже ее вверх. Прямоугольник с гибким значением ширины не будет тянуть элементы. Все элементы взаимосвязаны и рассматривать какой то один элемент и его не корректное, на ваш взгляд, поведение не имеет смысла.

И как я понял, вы не верно истолковали функционал "закрепление на странице"

[Taurus 2]

"Закрепление на странице" в данном случае посмотрел как работает в видео-уроке...Там говорилось о том, что при уменьшении браузера элемент будет находится по центру (если его закрепить по центру)...По поводу респонсива, понятно, что элементы находятся в движении, но как предсказать какой и куда будет перемещаться ? Мне вообще кажется, что на 90 % респонсив это сплошной эксперимент, когда начинаешь двигать элементы и "играть" с их координатами.

[Павел Хомерики 3360]

1 час назад, Taurus сказал:

Мне вообще кажется, что на 90 % респонсив это сплошной эксперимент, когда начинаешь двигать элементы и "играть" с их координатами.

Нет не эксперимент. Медиа запросы таковыми кажутся на первый взгляд. Хорошо иллюстрирует это всё бутстрап - обертка сайта, обертка строка, внутри строки колонки и т.д. Есть определенные правила компоновки контента при отзывчивой верстке.
Например у вас кнопка, рядом с ней картинка, под ними текст. Хорошая компоновка была бы - несколько картинок в ряд на всю ширину, что бы они равномерно тянули весь контент находящийся ниже, или одна картинка, но никаких других элементов с другими свойствами в строке с ней быть не должно. Если всё же необходимо сделать картинка а рядом кнопка (то есть иной по свойствам элемент), то у картинки надо отключать отзывчивость и редактировать ее в каждой точке остановки отдельно.
В общем, условно представляйте сайт в виде таблицы контейнеров

[Taurus 2]

Цитата

"Например у вас кнопка, рядом с ней картинка, под ними текст. Хорошая компоновка была бы - несколько картинок в ряд на всю ширину, что бы они равномерно тянули весь контент находящийся ниже, или одна картинка, но никаких других элементов с другими свойствами в строке с ней быть не должно"...

При таком подходе, Вы в приоритет ставите именно механику (отзывчивость), а дизайн должен подстраиваться под более идеальное поведение элементов...Но в таком случае, невозможно добиться дизайнерской задумки. 

[Павел Хомерики 3360]

7 минут назад, Taurus сказал:

Но в таком случае, невозможно добиться дизайнерской задумки. 

Просто нужна другая задумка, подходящая под механику. Ну например, Вы, когда управляете автомобилем ведь соблюдаете правила, если не пдд то хотя бы визуально - не двигаетесь по односторонней, против течения и т.п. Тут тоже самое.
Наибольшую свободу дизайнеру дает статичный макет. А коль делаете отзывчивый - будьте добры изучить как у него колеса крутятся

[Taurus 2]

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

Ну хорошо, раз так...вот банальный пример. Есть два блока - цветных (два прямоугольника) у обоих выставлен параметр "растягиваться по ширине браузер". Блоки выступают в роли подложки для каждого блока. 

       Дойдя до определенной точки, один блок начинает накрывать второй (вверх)... И какие в этом случае могут быть "колеса" ? Т.е. выход один - сделать один блок полностью белым ?))). Или в фотошопе сделать подложку на весь сайт, чтобы его замедлить...? Честно говоря думал, что программа при равных условиях должна давать возможность воплотить как дизайнерскую задумку, так и помочь максимально просто с помощью механики решить техническую сторону...

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

[Павел Хомерики 3360]

29 минуты назад, Taurus сказал:

Дойдя до определенной точки, один блок начинает накрывать второй (вверх)... И какие в этом случае могут быть "колеса" ?

Не понимаю о чем Вы. Ничего никуда не наезжает
 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

[Taurus 2]

Вот специально сделал гифку...Надеюсь видно будет на стыке (там где якорь)...Под блоками только заливка в браузере.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

[Павел Хомерики 3360]

10 минуту назад, Taurus сказал:

Вот специально сделал гифку...Надеюсь видно будет на стыке (там где якорь)...Под блоками только заливка в браузере.

А, ну если так. То опять таки - изучение свойств помогло бы Вам . Не понимаю, почему Вы упорно не хотите этого делать? У Вас внутри прямоугольника находятся объекты, которые и расширяют его, что вполне закономерно и не нарушает дизайн. При этом, если не забивать на аккуратность и немного заставить себя изучить поведение, никакого наезда на нижний прямоугольник не происходит, а происходит его отталкивание. Прямоугольники должны быть стык в стык


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


На расширение прямоугольника влияет размер текстового фрейма. Если нет запаса то он сразу будет расширять / толкать все объекты ниже. Если дать ему запас то не будет расширения


Топик выеденного яйца не стоит. Просто посидите пару часов изучите варианты

[Taurus 2]

Поверьте мне, у меня большое желание всё это понять...Но ведь согласитесь с тем, что если выставляются параметры в настройках это наталкивает на мысль, что их поведение должно следовать таким настройкам...Если сказано, тянись на всю ширину и оставайся на месте, то почему другие элементы должны на это влиять ? Естественно, что если такова логика программы, ничего не поделать. Но я не думал, что какие-то фреймы которые расположены в таких блоках должны на них влиять и уж тем более расстояние до границы таких блоков. Я уже все круги ада прошел ))). Вы, конечно, имеете много опыта и много всего изучили, и имеете большое терпение всё это разъяснять. "Модератор, которого нужно занести в красную книгу !". Но в любом случае, подобные посты будут иметь ценность для других "нубов", а яйца съедим на завтрак для укрепления нервов .

[Павел Хомерики 3360]

2 часа назад, Taurus сказал:

Если сказано, тянись на всю ширину и оставайся на месте, то почему другие элементы должны на это влиять ? Естественно, что если такова логика программы, ничего не поделать. Но я не думал, что какие-то фреймы которые расположены в таких блоках должны на них влиять и уж тем более расстояние до границы таких блоков.

Так дело в том, что такое поведение как раз таки естественно и логично. Вот представьте если бы такого не было - вы установили прямоугольник в качестве фона для блока контента, написали текст и п.р. и при изменении окна браузера текст стал бы вылезать за пределы блока не расширяя сам блок.
 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

[Taurus 2]

Много обсуждений в сети сейчас по поводу респонсива...Переходить или не переходить ?. Вот в чем вопрос. Пытаются на чаше весов сопоставить плюсы и минусы. Многие говорят о том, что разработка занимает гораздо больше времени и сил. Интересно Ваше мнение. Ведь до его внедрения все прекрасно делали сайты на старом движке. Не скажешь, что такие проекты были в чем-то ущербными.

[Павел Хомерики 3360]

4 минуты назад, Taurus сказал:

Много обсуждений в сети сейчас по поводу респонсива...Переходить или не переходить ?

Ну зачем же так радикально ставить вопрос переходить или нет? Надо пользоваться и тем и этим и даже можно  вообще комбинировать. Я например сейчас делаю сайты и в статичном варианте. Вопрос в задаче. А новичкам рекомендовал бы сначала освоить только статичный макет и работать с ним, параллельно играясь с отзывчивым дизайном. И делать сайты на нем только после полного понимания процесса. А то попадаются проекты в которых даже нечего посоветовать кроме как удалить и сделать заново

[Taurus 2]

Мы как пользователи задаём себе несколько вопросов в отношении обновления. 1. Облегчает ли нам "жизнь" такое обновление ? 2. Поднимает ли новый инструментарий проект на качественно новый уровень ? Я когда впервые установил Muse увидел статику и три иконки (ПК, мобильный и планшет). После выхода респонсива увидел, что-то тянется...но как новичок задал себе вопрос. Зачем всё это ? Ну ведь и раньше все делали сайты в статике. Скопировали элементы (что-то отбросили) и вроде бы как готово. А сейчас нужно что-то подстраивать, рассчитывать, следить ...дополнительных действий в разы больше ))). Поэтому смысл таких манипуляций и ради чего всё это ?)). Тем не менее есть над чем задуматься .