Изменение расположения элементов макета на противоположное, чтобы меню было справа
Можно ли с помощью метода, описанного в разделе «Создание «резино- вого» макета с двумя колонками, в котором слева расположено меню, а справа – основная область с контентом», создать макет, в котором меню расположено справа?
Решение
Конечно, это можно сделать с помощью того же метода! Для этого нуж- но переместить меню слева направо и задать для области с контентом большой внешний отступ справа, чтобы освободить для меню место. Ре- зультат показан на рис. 9.31.
Рис. 9.31. Создание двухколоночного макета с меню справа
Обсуждение
Чтобы разместить меню справа, не нужно вносить никаких изменений в разметку документа – достаточно всего лишь изменить свойства, за- дающие позиционирование элемента nav и внешние отступы для эле- мента content:
chapter09/2col-reverse.css
#nav {
position: absolute;
top: 5em; right: 1em; width: 14em;
}
#content {
margin-left: 2em;
margin-right: 16em;
}
В этом случае преимущества использования абсолютного позициони- рования налицо. Неважно, где наше меню находится в разметке доку- мента – при использовании абсолютного позиционирования оно будет удалено из основного потока элементов, и его можно разместить в лю- бом месте страницы. Это очень удобно с точки зрения доступности сай- та, поскольку разработчик может разместить менее важные элементы (например, список ссылок на другие сайты, рекламу и т. д.) в конце кода документа. Таким образом, пользователям экранных дикторов не
придется тратить время на прослушивание этой маловажной информа- ции при каждом обращении к странице. В то же время для достижения желаемого визуального эффекта вы можете позиционировать элементы в любом месте страницы.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Макет фиксированной ширины с двумя колонками по центру страницы (0)
- Создание макета с тремя колонками средствами CSS (0)
- Добавление к «резиновому» макету нижнего блока (0)
- Выделение текста на странице (0)