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

Создай сам → Изучение HTML5 и CSS3 → Гибридная верстка и изображения

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

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

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

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

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

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

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

* {
    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;
};

* {

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. Теперь наш контент не выходит за рамки доступные в браузере и за рамки самого блока с контентом. Но как видите это далеко не идеальное решение и верстать так можно разве что очень убогие макеты или за не знанием лучших решений. Как сделать более правильно мы поговорим с вами уже в следующих уроках, а пока на этом все, до скорого.