Как сделать резиновый блок css

Резиновый сайт

Большой разброс разрешения экранов пользователей от 3840×1080 до мобильных 228×240 говорит о необходимости применения резиновых сайтов, которые успешно выглядят на любом устройстве. Сократите ширину окна браузера данного блога Сократить ширину окна браузераи вы увидите как страница видоизменяется. Шаблоны с фиксированной шириной имеют либо куцый вид, либо не помещаются в окне браузера. Пример.

Рекомендации для тех, кто решил сделать сайт с отзывчивой вёрсткой

  1. Шрифты, отступы указываются в em или vmin. .
  2. Определяется минимальная и максимальная ширина сайта чтобы композиция не расползалась, чтобы посетители широкоформатного монитора не говорили о необходимости взять такси для использования функций противоположной стороны веб-ресурса.
  3. Указывается максимальная длина строки (не более 45—50 символов для текста, набранного 12-пунктовым кеглем). Не зря у Google и Яндекса 16px заголовок не превышает 70 знаков. .

Макет резинового сайта

Пример: см. данный блог.

Боковой блок одной высотой с основным содержимым

Это не решает проблемы, когда боковая колонка более высокая, чем основное содержание. Лучше применить вёрстку со свойством display: table;.

Резиновая верстка сайта с плавающей боковой колонкой

Пример (для чистоты эксперимента деактивизируйте предыдущую кнопку): активизировать

Смещение на 1px в Опере

Резиновый шаблон у блогов на платформе Blogger

Нужно добавить CSS для группы шаблонов "Простая", "Венецианское окно" и "Путешествие": Для "Корпорация "Чудеса"" и "Водяной знак":

Мобильная версия Blogspot

По адресу http://адрес_страницы?m=1 можно увидеть версию блога на Blogger для мобильного телефона.

22 комментария:

Анонимный Здравствуйте. Как написать вам в обратную связь? Анонимный В дополнение к моему комментарию выше. У меня есть один вопрос по сайту, касающийся тематики. Давать ссылку на сайт в комментарии мне не хочется. Ссылок на вашу почту я не нашел. Моя почта hardmemory@mail.ru. Если вас не затруднит, напишите пожалуйста. А вопрос о том, как зафиксировать сайт, чтобы он не растягивался. Нужен совет, а не ответ. Т.к. я понимаю, что никто разжевывать не будет. Саня Можно сделать это для cms NMitra Если есть доступ к HTML и CSS, то я не вижу причин. Я, например, взяла стандартный шаблон Blogger, убрала всё лишнее, добавила необходимое. Но нужно разбираться во внутренностях CMS. Aldous Snow > которые успешно выглядят на любом устройстве
Читаю новости на своём самсунге. 80% сайтов выглядят наперекосяк. Отлично смотрятся только откровенно текстовые версии. А это киты вроде РБК. Так что пока ни разу не видел идеальных и сложный решений для мобильников на довольно низких разрешениях. NMitra "80% сайтов выглядят наперекосяк" — это же тебя не останавливает? 🙂 У меня в блоге половина статей выглядит наперекосяк после смены дизайна. И не только на мобильниках 🙁

"шпаргалка" в Opera Mini более менее смотрится, только с меню не пойму почему буквы мелкими становятся. Хотя эту проблему не разбирала толком.

На уровень выше, или как центрировать резиновый блок?

Реалии современного веб-дизайна достаточно суровы – назвался веб-программистом – держись в тренде… Разнообразие гаджетов, применяемых пользователями для путешествий просторами интернета впечатляет, не говоря уже об их конструкционных особенностях и технических характеристиках.

Вот девушка в кафе сидит «Вконтакте» со смартфона, рядом обедает бизнесмен и листает на планшете странички сайта поставщика арматуры…

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

«Резиновая» верстка уже длительной период времени уверенно держится в тренде наряду с другими методами адаптации отображения содержимого под разрешение клиентского терминала.

Об некоторых алгоритмах этого дивного метода мы и поговорим сегодня.

Как центрировать резиновый блок

Постановка задачи

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

Вот тут у нас и появляется логичный вопрос. Как позиционировать кнопку, если она резиновая? Задать границы 0px auto не получится, ибо размеры блока-кнопки не фиксированы. Строчное представление кнопки тоже нам не подходит, ведь настроить дизайн при таком раскладе становится практически невозможно.

Алгоритм решения задачи

Как говорилось раньше определенные benefits нам принесет блочно-строчный рендеринг элемента. А если говорить по-русски, то мы используем CSS свойство display: inline-block.

Для подробного рассмотрения данного вопроса воспользуемся примером. Создадим html страничку со следующим содержимым.

Данный метод показал неплохую работоспособность, но как Вы уже могли привыкнуть, в семье не без… строптивого. И речь конечно же идет о семействе браузеров IE. CSS свойство display: inline-block не понимает IE6, да и в IE7 возникает куча проблем, и управлять отображением блочных элементов так же как и отображением строчных элементов становиться потенциально проблематично.

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

Таким образом наша работа станет одинаково эффективной как с блочными так и строчными элементами:

Код нашей странички будет следующим.

Раскладка, или другими словами мелкософтовское свойство hasLayout! Зададим при помощи свойства zoom.

    Кросс-браузерность. Данное решение показало свою работоспособность в браузерах, начиная с: IE6, Fx3, Op9.5, Sa4, Cr5.

Для Fx2 свойство отображения inline-block не подает признаков работоспособности, и если Вы решили оптимизировать Ваш ресурс под такой реликварий, воспользуйтесь отображением -moz-inline-stack.

Послесловие

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

Сегодня мы на примере рассмотрели потенциальные возможности CSS свойства display: inline-block в задачах «гибкой» верстки. Как было показано, резиновый строчный (блочный) элемент с фоновым изображением можно превратить в строчно-блочный (inline-block), и выровнять по центру, присвоив обертке центральный text-align.
Успехов Вам.

Как правильно сделать резиновый сайт (не работает max-width )?

Помогите пжлст сделать правильно резиновый сайт. У меня проблемы с шириной и высотой блоков. Когда прописываю max-width к конкретному блоку — это свойство почему-то не работает. Max-width работает только, если прописываю его к body в общем. Хочется сделать сайт, который будет тянутся при разных разрешениях экрана.

Код можно посмотреть на codepen.

Столкнулся со следующими вопросами:

1) Как правильно прописывать ширину max-width: для body в целом или для каждого блока отдельно?
2) Как правильно делать высоту блока? Фиксировать в px или делать в %. Прописываю height: 100%, но блоки получаются слишком низкие. Как сделать так, чтобы каждый блок был по высоте на один экран?
3) Как делать правильно расстояние между блоками? Делаю через margin-top или bottom в пикселях. Например, margin-bottom: 200px. Правильно это вообще? Стоит ли фиксировать отступ в пикселях? Если нет, то как правильно будет?
4) И еще момент по отступам во втором блоке. Второй блок сделан рамкой с отступами по бокам. Как сделать так, чтобы при уменьшении экрана, отступы оставались? При 1000px смотрится правильно, но начинаю уменьшать и отступы пропадают. Сейчас блок сделан с width: 100%; и прописанным max-width к body.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *