Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 109
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день.
Сегодня продолжение темы о фиксированной верстке с помощью слоев. Речь пойдет о макете с тремя колонками. Полностью статью можно прочитать по адресу www.htmlbook.ru/content/?id=185.
Колонки с разделительной линией
Используя приемы размещения слоев, можно создать три колонки, разделенных между собой вертикальной линией. Такая линия четко отделяет один блок текста от другого и направляет взгляд читателя, не позволяя ему перескакивать с одной колонки на другую. На рис. 2 показан пример использования текста с вертикальными линиями.
Рис. 2. Три колонки с разделительной линией
Для создания подобного макета понадобится три слоя, образующих колонки и два селектора. Один из селекторов, назовем его col1, создает линию справа от блока. Применяя его к первому и второму слою, получим нужную черту. У третьей колонки линейка справа не нужна, поэтому и добавляется еще один селектор col2 (пример 2).
Пример 2. Создание колонок с разделительной линией<head>
<style>
#col1, #col2 {
width: 200px;
padding: 0px 7px 0px 7px;
float: left;
}
#col1 {
border-right: 1px solid #000;
}
</style>
</head>
<body>
<div id=col1>И мышка рассказала следующее. Давным-давно, людям, чтобы
достать яркие пригожие яблоки с высоких деревьев, требовалась особая ловкость
и умение. Не всякий умел быстро забраться на яблоню (а эти деревья были тогда
высокие-превысокие) и суметь полакомиться вкусными плодами.</div>
<div id=col1>И вот однажды пришел добрый волшебник по имени Нортон,
посмотрел он на страдания людей, покачал головой и сделал специальную колотушку,
с помощью которой любой человек мог получить плоды с самого возвышенного дерева.</div>
<div id=col2>Надо было только встать под него, ударить посильней и ловить
яблоки в корзину. Колотушка получилась очень красивая - ручка золоченая, а
сам набалдашник синий, одно удовольствие было работать.</div>
</body>
</html>
Параметр float, как уже упоминалось, требуется для размещения слоев по горизонтали. Вертикальная линия создается с помощью свойства border, изменяя значение которого, можно получить линии разной толщины, цвета и вида.
Величина отступов от текста до черты варьируется параметром padding. Через пробел указываются поля всех четырех сторон, в примере верхнее и нижнее поле равно нулю, чтобы линия не выступала над текстом.
background-position
| Браузер | Internet Explorer | Netscape Navigator | Opera | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Платформа | Windows | Macintosh | Все платформы | Все платформы | ||||||||
Версия |
4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Нет | Да | Да | Да | Да | Да |
Описание
Задает положение левого верхнего угла фонового изображения, установленного
с помощью параметра background-image.
Синтаксис
background-position: [проценты | значение] | [left | center | right] || [top
| center | bottom]
Аргументы
У этого параметра два значения, положение по горизонтали (может быть —
left, center, right) и вертикали (может быть — top, center, bottom).
Положение можно, также, задавать в процентах, пикселях или других единицах.
Значение по умолчанию
0%
Наследование
Значения, присвоенные данному параметру, не наследуются.
Применяется
Ко всем элементам.
Объектная модель
[window.]document.getElementById("elementID").style.backgroundPosition
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
