- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Все что нужно знать о DDоS-атаках грамотному менеджеру
И как реагировать на "пожар", когда неизвестно, где хранятся "огнетушители
Антон Никонов
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Коллеги, возник вопрос по вёрстке. Во вложении условный макет (реальный прототип).
Макет статичный, не-резина, под 1024, адаптируется под 768 и 320. Сейчас на больших разрешениях по бокам просто добавляются свободные поля, но в планах есть внедрение версии под 1360 пикселей.
Цветом разукрасил одинаковые блоки на разных разрешениях.
Вопрос в следующем: сейчас вёрстка реализована последовательно:
<body>
<div id="logo"></div>
<div id="orange"></div>
<div id="menu"></div>
<div id="sidebar"></div>
<div id="search"></div>
<div id="content">Тут расположен важный контент</div>
<div id="sub-content"></div>
<div id="footer"></div>
</body>
Задача - поднять контентную часть (синяя) выше в коде, визуально сохранив всё как есть, включая адаптив и совместимость с не очень древними браузерами. То есть сделать так:
<body>
<div id="content">Тут расположен важный контент</div>
<div id="logo"></div>
<div id="orange"></div>
<div id="menu"></div>
<div id="sidebar"></div>
<div id="search"></div>
<div id="sub-content"></div>
<div id="footer"></div>
</body>
В моём представлении всё это решается с помощью абсолютного позиционирования и FLOAT. Нынешние верстальщики утверждают, что при использовании абсолютного позиционирования и Float будет невозможно сохранить адаптив:
если так делать, то не будет адаптива - той красоты под разные разрешения, которой они добиваются
У них есть какой-то свой шаманский способ, но он не дружит даже с относительно молодыми браузерами:
Меня терзают смутные сомнения относительно их утверждений. У кого есть опыт подобной вёрстки, или, может быть, даже живой пример?
Буду крайне признателен за помощь в наставлении верстальщиков на путь истинный...
:drink:
Запилите на бутстрапе и сделайте то что надо с помощью классов push и pull
А есть живой пример похожей вёрстки, чтобы прям показать, что способ рабочий? Сам я последний раз верстал сайт в те времена, когда слово "суши" было глаголом, от бутсрапов нещадно отстал 🤪 Могут быть проблемы с аргументацией
А есть живой пример похожей вёрстки, чтобы прям показать, что способ рабочий? Сам я последний раз верстал сайт в те времена, когда слово "суши" было глаголом, от бутсрапов нещадно отстал 🤪 Могут быть проблемы с аргументацией
http://itchief.ru/lessons/bootstrap-3/85-bootstrap-3-reordering-columns-grid-system
тут можно глянуть как работает, увеличивая и уменьшая окно браузера
Ваши верстальщики правы, тут никаким бутстрапом не поможешь (насколько я знаю) . Если абсолюткой позиционировать, то верстка будет сыпаться при изменении коетента. Решить проблему можно при помощи js-а - при разных ширинах менять местами блоки, но это костыль еще тот. Самый оптимальный вариант, о котором ваши верстальщики говорят, это использовать flexbox. В нем есть свойство order, позволяет менять местами блоки, не трогая разметку.
Ваши верстальщики правы, тут никаким бутстрапом не поможешь (насколько я знаю) . Если абсолюткой позиционировать, то верстка будет сыпаться при изменении коетента. Решить проблему можно при помощи js-а - при разных ширинах менять местами блоки, но это костыль еще тот. Самый оптимальный вариант, о котором ваши верстальщики говорят, это использовать flexbox. В нем есть свойство order, позволяет менять местами блоки, не трогая разметку.
В посте написано, что сайт адаптивен и без резины. Это можно реализовать даже без бутстрапа с помощью медиаправил. Нет в верстке ничего невозможного. Бывают просто интересные задачи.
Так вопрос был в том, как поменять положение блока, не меняя разметки. Ответ - flexbox.
Адаптив - это набор правил под разные разрешения экрана.
Что мешает описать абсолютное позиционирование для всех нужных разрешений?
а как при абсолютном позиционировании добавлять/удалять контент?
каждый раз придется по новому позиционировать.
Не нужно там абсолютное позиционирование и флексбоксы. Кроссбраузерно это решается на JS. На бутстрапе такое спокойно можно сделать. Логичнее конечно будет немного поменять разметку, но как я понял, важна не сама разметка, а чтобы важный для SEO контент находился как можно выше в коде.
Коллеги, огромное всем спасибо за поддержку темы!
Ваши верстальщики правы, тут никаким бутстрапом не поможешь
Бутстрап мы с ними пока не обсуждали
Контент может меняться только в синем, красном и жёлтых блоках. Все остальные блоки статичны. Жёлтый по своему местоположению может быть релативным.
Абсолютное позиционирование, на сколько я помню, задаёт начало координат. Опускаем синий блок на высоту шапки, а всю шапку поднимаем в 0:0. Красный и синий меняем местами с помощью float. Первый план был именно такой. Но я на нём не настаиваю, если есть более изящное решение - было бы здорово его найти.
О, я по своему древнему опыту помню такие костыли 🙄 Хотелось бы их избежать :)
Они почему-то предпочитают говорить загадками и не называть вещи своими именами, поэтому flexbox ли это мы можем только догадываться. На сайте сейчас суммарно около 10% трафика с Сафари 9 и IE 10... Если flexbox - тот самый вариант, о котором они говорят и он действительно не дружит с этими браузерами, то это не решение проблемы, а пачка новых проблем :o
Хороший подход 🍻
В моём представлении - ничего. Ну, видимо, у нынешних верстальщиков своё мнение на этот счёт.
каждый раз придется по новому позиционировать.
Отпозиционировать нужно только шапку и начало контентной области. Это совсем не значит, что высоту контентной области надо задавать жёстко. Футер и жёлтая область остаются на тех же местах, что и при обычной последовательной вёрстке.
Совершенно верно, хочется убрать все лишние строки между началом страницы и началом контента.