Гибридная верстка и изображения
На прошлом занятии мы с вами разобрались с понятием отзывчивой верстки, когда все наши абсолютные величины были заменены на относительные. Сегодня я сделаю краткое отступление и расскажу, как еще умудряются верстать сейчас люди и что это дает или наоборот не дает.
Итак по привычке берем уже готовый код с окончания прошлого занятия и продолжаем его видоизменять:
Сейчас мы рассмотрим гибрид, где смесь статической верстки граничит с резиновой. У нас имеется гибкий сайдбар, но сейчас нам нужно добавить в него изображение с фиксированными размерами. В дальнейших уроках по адаптивной верстке мы еще не однократно вернемся к теме медиа в верстке, но сегодня поработаем гибридно.
В папке, которую вы скачали выше, есть изображение, которое мы сейчас поставим вместо всего содержимого в блоке aside. И как результат картинка игнорирует наши размеры в процентах и выходит за пределы видимой области. Это и не удивительно она ведь 500px, а не 300, которые были там ранее.
А теперь самое интересное, в наших стилях идем в место, где описаны правила для главного блока с шириной в 90% и добавляем свойство display: table; Тем, кто не знает, что это нам даст я поясню, это свойство даст нам поведение всех блоков нашей страницы, как ячейки таблицы. А значит ячейка начнет принимать ширину самого изображения, ибо ячейки таблицы подстраиваются под свое содержимое.
Но на этом наши манипуляции не заканчиваются, нам нужно остальным блокам задать также свойство display, только со значением table-cell, ну и вот вам готовый код в стилях, каким он выходит после всех манипуляций:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
* { margin: 0; padding: 0; } body { font: 100%/1.5em Arial, Helvetica, sans-serif; color: #000; } .container { background: #e2e2e2; width: 90%; margin: 0 auto; display: table; } h2 { font-size: 1.875em; } section { display: table-cell; } aside { background: #d1d1d1; display: table-cell; } footer { display: table-row; }; |
Вы заметили, что я убрал ширину у всех блоков кроме главного и убрал обтекание задающееся float. Теперь наш контент не выходит за рамки доступные в браузере и за рамки самого блока с контентом. Но как видите это далеко не идеальное решение и верстать так можно разве что очень убогие макеты или за не знанием лучших решений. Как сделать более правильно мы поговорим с вами уже в следующих уроках, а пока на этом все, до скорого.
Когда впервые начинал править шаблоны фиксированного сайта, чтобы сделать его хоть частично адаптивным — голову сломал над вопросом где и что править в CSS или в коде… А тут написано хоть и коротко и только лишь про изображения (медиа) — но по-ходу это ключевая проблема, которую мне никак не удавалось раньше решить, на моём сайте так до сих пор все тексты переформатируются нормально, а изображения — ну никак. Так что — очень полезное и благое дело, спасибо, ждём и ищем продолжения статьи.
Про гибридную верстку читаю впервые, да и честно говоря не особо в этом разбираюсь. Конечно же приходилось самой копаться в коде, но в большинстве случаев ни к чему хорошему это не привело. Хотела как-то научиться править шаблоны, но либо уроки были не те, либо это не мое. У вас написано на более простом языке. Спасибо)