Page 271 - Сила CSS3 Освой новейший стандарт

Создание многостолбцовых макетов без плавающих полей • 271

Горизонтальная центровка навигационной полосы
Теперь обратим внимание на следующий элемент страницы, навигационную полосу.
Наша задача — выполнить ее горизонтальную центровку. Однако для этого недо-
статочно будет присвоить свойству box-align в обрамляющем div-блоке значение
center — как вы помните, оно работает только для вертикального пространства
вокруг горизонтальных полей (и наоборот для вертикальных полей). Нам необхо-
димо свойство, управляющее дополнительным пространством по той же оси, вдоль
которой выводятся блоки, — в данном случае по горизонтали.

иСчезающие поля и Блоки
Если вы применяете модель гибкого поля только для пары элементов, а не для всего макета
страницы, высока вероятность того, что у вас в коде окажется элемент со свойством float
или overflow, у которого также есть свойство display со значением box или который явля-
ется дочерним по отношению к гибкому полю. В любом случае, это приведет к проблемам.

В Safari и Chrome есть ошибка, из-за которой дочерние элементы полей, имеющие свойство
float, а также пустое пространство вокруг них, исчезают. Хотя свойство float не рекоменду-
ется использовать с дочерними элементами гибких полей, оно никак не должно влиять на
отображение, а попросту игнорироваться. В Firefox есть аналогичная ошибка, но исчезают
блоки, имеющие свойство overflow, а не float.

Обе эти ошибки значительно затрудняют объединение модели гибкого поля со старыми
методами верстки на одной странице (для обеспечения совместимости со старыми брау-
зерами). Например, на странице из нашего примера элементы li — плавающие, благодаря
чему ссылки во всех браузерах выстраиваются в одну линию по горизонтали. Для того
чтобы элемент ul ограничивал свои плавающие дочерние элементы, можно применить
один из распространенных методов изоляции плавающих элементов: сделать элемент ul
плавающим или установить для него overflow: auto или overflow: hidden. Но элемент ul —
дочерний по отношению к гибкому полю, и если сделать его плавающим, он пропадет
в браузерах Webkit, а если использовать свойство overflow — в Firefox.

Именно для этого предназначено свойство box-pack. С помощью него элемент ul
можно переместить в центр div-блока nav-main. Для этого сперва превратите div-
блок nav-main в гибкое поле и присвойте его свойству box-pack значение center.
Внесите следующие изменения в существующее правило #nav-main:
#nav-main {
display: -moz-box;
display: -o-box;
display: -webkit-box;
display: box;
-moz-box-pack: center;
-o-box-pack: center;
-webkit-box-pack: center;
box-pack: center;

www.trk.kg