От первого html тега, до SEO оптимизации порталов
Украина
+380 63 85 62 538
admin@sozdaj-sam.com

Гибридная верстка и изображения

Гибридная верстка

Гибридная верстка и изображения

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

Итак по привычке берем уже готовый код с окончания прошлого занятия и продолжаем его видоизменять:

Кнопка скачивания кода

Сейчас мы рассмотрим гибрид, где смесь статической верстки граничит с резиновой. У нас имеется гибкий сайдбар, но сейчас нам нужно добавить в него изображение с фиксированными размерами. В дальнейших уроках по адаптивной верстке мы еще не однократно вернемся к теме медиа в верстке, но сегодня поработаем гибридно.

В папке, которую вы скачали выше, есть изображение, которое мы сейчас поставим вместо всего содержимого в блоке aside. И как результат картинка игнорирует наши размеры в процентах и выходит за пределы видимой области. Это и не удивительно она ведь 500px, а не 300, которые были там ранее.

А теперь самое интересное, в наших стилях идем в место, где описаны правила для главного блока с шириной в 90% и добавляем свойство display: table; Тем, кто не знает, что это нам даст я поясню, это свойство даст нам поведение всех блоков нашей страницы, как ячейки таблицы. А значит ячейка начнет принимать ширину самого изображения, ибо ячейки таблицы подстраиваются под свое содержимое.

Но на этом наши манипуляции не заканчиваются, нам нужно остальным блокам задать также свойство display, только со значением table-cell, ну и вот вам готовый код в стилях, каким он выходит после всех манипуляций:

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

 

  1. ВладимирВладимир03-18-2016

    Когда впервые начинал править шаблоны фиксированного сайта, чтобы сделать его хоть частично адаптивным — голову сломал над вопросом где и что править в CSS или в коде… А тут написано хоть и коротко и только лишь про изображения (медиа) — но по-ходу это ключевая проблема, которую мне никак не удавалось раньше решить, на моём сайте так до сих пор все тексты переформатируются нормально, а изображения — ну никак. Так что — очень полезное и благое дело, спасибо, ждём и ищем продолжения статьи.

  2. ИринаИрина04-06-2016

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

Написать ответ

© 2016 Андриевский Андрей
Украина, город Киев
Тел: (063) 856-2538
E-Mail: admin@sozdaj-sam.com
Web: https://sozdaj-sam.com/