Jump to content
  • 0
Sign in to follow this  
Taurus

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

Question

Taurus    2

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

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

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

 

Share this post


Link to post

Recommended Posts

  • 0
Taurus    2

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

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

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

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

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

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

Share this post


Link to post
  • 0
Taurus    2

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

Share this post


Link to post
  • 0
1 час назад, Taurus сказал:

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

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

Share this post


Link to post
  • 0
Taurus    2
Цитата

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

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

Share this post


Link to post
  • 0
7 минут назад, Taurus сказал:

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

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

Share this post


Link to post
  • 0
Taurus    2

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

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

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

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

Share this post


Link to post
  • 0
29 минуты назад, Taurus сказал:

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

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

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

Share this post


Link to post
  • 0
Taurus    2

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

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

Share this post


Link to post
  • 0
10 минуту назад, Taurus сказал:

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

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

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

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

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

Share this post


Link to post
  • 0
Taurus    2

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

Share this post


Link to post
  • 0
2 часа назад, Taurus сказал:

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

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

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

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

Share this post


Link to post
  • 0
Taurus    2

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

Share this post


Link to post
  • 0
4 минуты назад, Taurus сказал:

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

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

Share this post


Link to post
  • 0
Taurus    2

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

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...