max-width: 100 %;

}

}

Первое правило задает элементу bширину auto, делая ее такой же, как и ширина его контейнера. Второе правило восстанавливает max-width: 100 %, которое мы обсуждали в третьей главе, позволяя изображению увеличиваться и уменьшаться вместе с контейнером. Вместе эти два правила не позволяют изображению выходить за рамки контейнера, а при расширении – за рамки остальной части дизайна ( рис. 4.16). Не знаю, как вы, а я выдохнул с облегчением.

Рис. 4.16.Наш рисунок теперь оказался на своем месте. Я испытываю облегчение. А вы?

Рис. 4.17.Поле Contact Us, почему ты нас так ненавидишь?

И все же, прежде чем мы сможем расслабиться, нам нужно исправить еще кое-что. Навигация в верхней части страницы все еще выглядит сильно сжатой. Кроме того, если хоть немного изменить область просмотра, текст снова переносится на следующую строчку ( рис. 4.17).

Разметка шапки довольно простая:

>

i id="nav-blog">The ’Bot Blog

• Top Rated

i id="nav-droids">Droids of the Day

i id="nav-contact">Contact Us

Итак, мы обозначили логотип тегом h1, сделали маркированный список для навигации и присвоили им классы .logoи .nav-primaryсоответственно. Но что делать с CSS?

.logo {

background: #C52618 url("logo-bg.jpg");

float: left;

width: 16.875 %; /* 162px / 960px */

}

.nav-primary {

background: #5E140D url("nav-bg.jpg"); padding: 1.2em 1em 1em;

}

.nav-primary li {

display: inline;

}

Стили достаточно простые. Мы применили фоновые изображения к обоим элементам, а не к самому макету: мы подвинули изображение влево, чтобы оно перекрывало навигацию. А элементам списка внутри .nav-primaryсоответствует свойство display: inline. Это решает нашу проблему, по крайней мере, пока страница не становится настолько узкой, что внутренние элементы переносятся на следующую строчку.

Вот как выглядит медиазапрос:

@media screen and (max-width: 768px) {

.logo {

float: none;

margin: 0 auto 20px;

position: relative;

}

.nav-primary {

margin-bottom: 20px;

text-align: center;

}

}

Мы убрали свободное перемещение, которое было первоначально задано .logo, и отцентрировали его по горизонтали над меню. Также мы установили text-align: centerдля .nav-primary, расположив все элементы по центру. Все изменения видны невооруженным глазом ( рис. 4.18). Логотип и основная навигация находятся в своих собственных рядах со своими собственными свойствами.

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

Лично мне нравится, как выглядит навигация, однако расслабляться все равно еще рано. Для элементов навигации осталось не так уж и много места. Фактически, если мы хоть немного изменим размер экрана, наша четкая линия снова сломается, и текст перенесется на следующую строку ( рис. 4.19).

(У меня какая-то личная неприязнь к такому тексту. Не знаю почему.)

Рис. 4.19.Слушайте, это уже не смешно

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

@media screen and (max-width: 768px) {

…

}

@media screen and (max-width: 520px) {

.nav-primary {

float: left;

width: 100 %;

}

.nav-primary li {

clear: left;

float: left;

width: 48 %;

}

li#nav-rated,

li#nav-contact {

clear: right;

float: right;

}

.nav-primary a {

display: block;

padding: 0.45em;

}

}

Для еще более мелких экранов, с разрешением меньше 520 пикселей, мы передвинули каждый liвнутри .nav-primary, присвоив второму и четвертому элементам свойство float: right. В результате мы получили более гибкую сетку 2 х 2, которая подстраивается под изменения размеров области просмотра, в отличие от display: inline( рис. 4.20).