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

216 • Глава 6. Разные размеры экрана, разный дизайн

просмотра составляет минимум 1200 пикселов. Разумеется, сейчас внутри медиаза-
проса нет никаких стилей, всего лишь пустые фигурные скобки, ожидающие, когда
вы заполните их содержимым. Поскольку в области просмотра шириной от 1200
пикселов остается огромное количество пустого пространства, как насчет того,
чтобы разбить макет на три столбца вместо стандартных двух?
Для этого необходимо поменять позицию навигационного блока div, а также ширину
и размер полей двух div-блоков с содержимым. Вот как выглядят текущие стили
этих трех блоков div за пределами медиазапроса:
#nav-main {
float: right;
margin: 40px 0 0 0;
}
#content-main {
overflow: hidden;
float: left;
width: 70%;
margin-bottom: 40px;
}
#content-secondary {
float: right;
width: 25%;
margin-bottom: 40px;
}

Модифицируйте эти стили для области про-
В Opera 10.6 наблюдается стран- смотра шириной свыше 1200 пикселов, доба-
ная ошибка: навигационный вив в только что созданный медиазапрос новые
блок div исчезает при первой правила:
попытке растянуть окно до 1200
пикселов. Но если подвести @media screen and (min-width: 1200px) {
#nav-main {
указатель мыши к тому месту, position: fixed;
где он должен находиться, этот top: 136px;
блок появится. Пока что обход- width: 13%;
ного пути для этой ситуации не margin: 0;
существует; надеюсь, команда }
разработчиков Opera скоро из- #content-main {
бавит нас от этой нелепой про- width: 58%;
блемы. margin-left: 18%;
}
#content-secondary { width: 20%; }
}

Итак, мы помещаем навигационный блок div под логотип, создавая третий стол-
бец. Для того чтобы освободить пространство для него, нам пришлось уменьшить
ширину блока div content-secondary с 25% до 20%, уменьшить ширину блока div
content-main с 70% до 58% и добавить поле слева от content-main.

www.trk.kg