ширину auto, делая ее такой же, как и ширина его контейнера. Второе правило восстанавливает
max-width: 100 %
, которое мы обсуждали в третьей главе, позволяя изображению увеличиваться и уменьшаться вместе с контейнером. Вместе эти два правила не позволяют изображению выходить за рамки контейнера, а при расширении – за рамки
остальной части дизайна (рис. 4.16). Не знаю, как вы, а я выдохнул с облегчением.
Рис. 4.16. Наш рисунок теперь оказался на своем месте. Я испытываю облегчение. А вы?
Рис. 4.17. Поле Contact Us, почему ты нас так ненавидишь?
И все же, прежде чем мы сможем расслабиться, нам нужно исправить еще кое-что. Навигация в верхней части страницы все еще выглядит сильно сжатой. Кроме того, если хоть немного изменить область просмотра, текст снова переносится на следующую строчку (рис. 4.17).
Разметка шапки довольно простая:
<h1 class="logo">
<a href="#">
<i
><img src="logo.png" alt="Robot or Not?" /></i>
</a>
</h1>
<ul class="nav nav-primary">
<l
i id="nav-blog"><a href="#">The ’Bot Blog</a></li>
<li id="nav-rated"><a href="#">Top Rated</a></li>
<l
i id="nav-droids"><a href="#">Droids of the Day</a></li>
<l
i id="nav-contact"><a href="#">Contact Us</a></li>
</ul><!– /end ul.nav.nav-primary – >
Итак, мы обозначили логотип тегом
h1
, сделали маркированный список для навигации и присвоили им классы
Стили достаточно простые. Мы применили фоновые изображения к обоим элементам, а не к самому макету: мы подвинули изображение влево, чтобы оно перекрывало навигацию. А элементам списка внутри
.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, которая подстраивается под изменения размеров области просмотра, в отличие от