<h1 class="main-title">You can never be too sure.</h1>
</div><!– /end.main – >
</div><!– /end.welcome.section – >
Изрядный кусок HTML, да? Но по существу мы сделали модуль
.welcome
, в который поместили изображение и идущий за ним вступительный текст (
.main
). Изображение, в свою очередь, входит в блок
.figure
,
а сам
img
заключен в элемент
b
, который действует как хук для CSS.
Звучит слишком заумно? И я знаю почему. Но элемент
b
, как бы глупо здесь ни выглядел, на самом деле обрабатывает большой кусок макета. Вот как выглядит соответствующий CSS:
.slides.figure b {
display: block;
overflow: hidden;
margin-bottom: 0;
width: 112.272727 %; /* 741px / 660px */
}
.slides.figure b img {
display: block;
max-width: inherit;
}
Сначала мы задали свойству
hidden
в элементе
b
значение
overflow
, то есть контейнер обрезал любой лишний контент. Теперь же гибкие изображения меняют свои размеры при изменении элемента
b
. Поэтому мы отменяем масштабирование
max-width: 100 %
по отношению к изображениям слайд-шоу (
max-width: inherit
). В результате картинка робота будет попросту обрезана, если ее ширина превысит содержащий ее элемент
b
.
Как видите, ширина элемента
b
на самом деле больше 100 %. Мы использовали формулу
target : context = result
, чтобы создать элемент больше, чем модуль
.welcome
, благодаря чему изображение немного выходит за рамки с правой стороны.
Как назло, ни один из этих эффектов не будет работать при низком разрешении. Но я везучий парень. Так что давайте кое-что допишем в конце нашего медиазапроса:
@media screen and (max-width: 768px) {
.slides.figure b {
width: auto;
}
.slides.figure b img {
max-width: 100 %;
}
}
Первое правило задает элементу
b
ширину 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).