Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
| ← Октябрь 2003 → | ||||||
|
1
|
2
|
3
|
4
|
5
|
||
|---|---|---|---|---|---|---|
|
7
|
9
|
10
|
11
|
12
|
||
|
13
|
14
|
16
|
17
|
18
|
19
|
|
|
21
|
22
|
23
|
24
|
25
|
26
|
|
|
28
|
29
|
30
|
||||
Статистика
-26 за неделю
Рецепты HTML # 105
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день.
Приятная новость - скоро на сайте появится раздел с подробным описанием всех элементов CSS. С этого выпуска в каждом номере рассылки будет публиковаться описание одного или нескольких необходимых параметров стилей. Сегодня начинаем с background.
Что-то мало людей высказалось по поводу размещения на сайте электронных книжек. Полагаю, что раздел с книжками никому не интересен. Если это не так, сообщите об этом в форум сайта, либо мне по почте vlad@htmlbook.ru
На сайте опубликована статья Поля у блочных элементов, в которой решается проблема отступов в разных браузерах. Адрес статьи на сайте - www.htmlbook.ru/content/?id=182
Поля у блочных элементов
Полями называют отступы от края блока до воображаемого прямоугольника, ограничивающего его содержимое. Использование полей повышает читабельность текста и улучшает дизайн страницы.
В CSS существует параметр padding, который задает отступы для всех сторон блока. Однако браузеры по-разному понимают этот атрибут и показывают результат на веб-странице неодинаково.
Чтобы понять особенности и различия браузеров в использовании полей, создадим прямоугольник с помощью тега DIV и установим у него отступы параметром padding (пример 1).
Пример 1. Одинаковые поля у блока<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>
Обязательно указывайте, в каких единицах измеряются поля (в примере – px). Хотя по умолчанию, если стоит просто число, всегда подразумеваются пиксели, браузер Opera требует, чтобы единицы измерения были заданы. В противном случае никаких полей не будет.
Параметр padding, если он у него указано только одно значение, устанавливает величину полей со всех сторон блока равными. Однако, как показано на рис. 1, результат действия примера в основных браузерах будет различаться.
Internet Explorer
Netscape Communicator
Opera
Рис. 1. Результат действия примера 1
Internet Explorer, сохраняя заданную ширину блока неизменной, управляет величиной полей от края до текста, как, собственно, и должно быть. Браузеры Opera и Netscape по какой-то странной прихоти увеличивают размер блока, добавляя к его ширине, заданной параметром width, еще и величину полей. Вертикальные отступы в разных браузерах тоже очень сильно разнятся, показывая совершенно противоречивый результат.
Чтобы добиться нужного результата, отступы следует устанавливать не у блочного элемента, а у дочернего, который размещен внутри него. Для примера 1 это будет тег параграфа P. Оставляя ширину и цвет фона для тега DIV неизменным, величину полей переносим в стиль параграфа (пример 2).
Пример 2. Поля, показываемые одинаково в разных браузерах<p style=""padding:" 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>
Хотя решение не идеально, поскольку всегда требует добавление еще одного блока внутрь уже существующего, оно дает нужный результат с наименьшими затратами.
background
| Браузер | 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 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Ошибки | Да | Да | Да | Да | Да |
Описание
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения
могут идти в любом порядке, браузер сам определит, какое из них соответствует
нужному атрибуту. Некоторые параметры не поддерживаются браузером Netscape
4.x. Для более подробного ознакомления с аргументами, смотрите свойства каждого
параметра отдельно.
Синтаксис
background: background-attachment || background-color || background-image
|| background-position || background-repeat
Аргументы
Любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке.
Значения разделяются между собой пробелом. Ни один аргумент не является обязательным,
поэтому неиспользуемые значения можно опустить.
Значение по умолчанию
Нет.
Наследование
Значения, присвоенные данному параметру, не наследуются.
P { background: #C0C0C0 }
Применяется
Ко всем элементам.
Объектная модель
[window.]document.getElementById.elementID.style.background
Примечание
Netscape 4.x работает некорректно с отображением фона. Если вокруг элемента
нет никакой границы, то фон будет только под текстом, а не у всей области.
Даже если граница добавлена, между ней и областью будет небольшой промежуток,
избавиться от которого нет возможности.
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
