Всегда важно помнить о контексте

Если снова вспомнить нашу формулу (ширина цели х ширина контекста = результат), то можно понять причину возникшей проблемы. Здесь она заключается в контексте. Вот соответствующая разметка:

<div id="navigation">

<ul>

<li><a href="#">Why?</a></li>

<li><a href="#">Synopsis</a></li>

<li><a href="#">Stills/Photos</a></li>

<li><a href="#">Videos/clips</a></li>

<li><a href="#">Quotes</a></li>

<li><a href="#">Quiz</a></li>

</ul>

</div>

Как вы можете видеть, ссылки <a href="#"> заключены в теги <li>. Они представляют собой контекст для наших пропорциональных полей. Взглянув на CSS-код для тегов <li>, можно увидеть, что там не задано никаких значений ширины:

#navigation ul li { display: inline-block; }

Как это часто бывает, оказывается, решение данной проблемы возможно разными способами. Мы могли бы добавить конкретное значение ширины в теги <li>, однако оно должно быть либо значением фиксированной ширины в пикселах, либо значением, выраженным в процентах от ширины элемента-контейнера (<div> с идентификатором #navigation), но ни одно из них не обеспечит гибкости для текста, который в конечном счете будет там располагаться.

Вместо этого мы могли бы откорректировать CSS-код для тегов <li>, изменив значение display с inline-block на inline:

#navigation ul li { display: inline;

}

Выбор в пользу display: inline; (в результате этого элементы <li> перестанут вести себя как блочные элементы) также приведет к тому, что строка навигации будет обрабатываться горизонтально в более ранних версиях Internet Explorer (версиях 6 и 7), имеющих проблемы с inline-block. Однако я поклонник значения inline-block, поскольку оно обеспечивает больший контроль над полями и отступами в современных браузерах. Я лучше оставлю для тегов <li> свойство display: inline-block; (и, возможно, позднее добавлю переопределяющий стиль для Internet Explorer версии 6 и 7), а также перемещу правило для задания полей на основе процентов из тега <a> (который не имеет явного контекста) в блок-контейнер <li>. Правила с внесенными изменениями теперь будут выглядеть так:

#navigation ul li { display: inline-block; margin-right: 2.6595745%; /* 25х940 */

}

#navigation ul li a { height: 42px; line-height: 42px; text-decoration: none; text-transform: uppercase;

Font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 27px; color: black;

}

На рисунке 3.5 показано, как наша страница будет выглядеть в браузере с областью просмотра шириной 1200 пикселов.

Исправленная страница в области просмотра шириной 1200 пикселов

Итак, ситуация с навигацией постепенно улучшается, однако у нас все еще остается проблема — ссылки начинают растягиваться на две строки при уменьшении ширины области просмотра вплоть до того, как она окажется менее 768 пикселов, и тогда начинает работать медиазапрос, написанный нами в главе 2. Он переопределяет текущие стили, относящиеся к навигации. Прежде чем мы приступим к решению проблемы с навигационными ссылками, преобразуем все показатели размеров верстки из пиксельных значений в величины, выраженные в пропорциональных единицах em. В результате мы взглянем на еще одну очевидную, но часто игнорируемую проблему и сделаем так, чтобы наши изображения масштабировались пропорционально дизайну.