Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

  Все выпуски  

Рецепты HTML # 105


Информационный Канал Subscribe.Ru

 | Руководство | Дизайн и юзабилити | Графика | Создание и раскрутка сайта |
| Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум |  

Добрый день.

Приятная новость - скоро на сайте появится раздел с подробным описанием всех элементов CSS. С этого выпуска в каждом номере рассылки будет публиковаться описание одного или нескольких необходимых параметров стилей. Сегодня начинаем с background.

Что-то мало людей высказалось по поводу размещения на сайте электронных книжек. Полагаю, что раздел с книжками никому не интересен. Если это не так, сообщите об этом в форум сайта, либо мне по почте vlad@htmlbook.ru

На сайте опубликована статья Поля у блочных элементов, в которой решается проблема отступов в разных браузерах. Адрес статьи на сайте - www.htmlbook.ru/content/?id=182

Поля у блочных элементов

Полями называют отступы от края блока до воображаемого прямоугольника, ограничивающего его содержимое. Использование полей повышает читабельность текста и улучшает дизайн страницы.

В CSS существует параметр padding, который задает отступы для всех сторон блока. Однако браузеры по-разному понимают этот атрибут и показывают результат на веб-странице неодинаково.

Чтобы понять особенности и различия браузеров в использовании полей, создадим прямоугольник с помощью тега DIV и установим у него отступы параметром padding (пример 1).

Пример 1. Одинаковые поля у блока
<div style=""padding:" 10px; width: 300; background: #C0C0C0">
<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, результат действия примера в основных браузерах будет различаться.

Рис. 1. Результат действия примера 1 в Internet Explorer
Internet Explorer

Рис. 1. Результат действия примера 1 в Netscape
Netscape Communicator

Рис. 1. Результат действия примера 1 в Opere
Opera

Рис. 1. Результат действия примера 1

Internet Explorer, сохраняя заданную ширину блока неизменной, управляет величиной полей от края до текста, как, собственно, и должно быть. Браузеры Opera и Netscape по какой-то странной прихоти увеличивают размер блока, добавляя к его ширине, заданной параметром width, еще и величину полей. Вертикальные отступы в разных браузерах тоже очень сильно разнятся, показывая совершенно противоречивый результат.

Чтобы добиться нужного результата, отступы следует устанавливать не у блочного элемента, а у дочернего, который размещен внутри него. Для примера 1 это будет тег параграфа P. Оставляя ширину и цвет фона для тега DIV неизменным, величину полей переносим в стиль параграфа (пример 2).

Пример 2. Поля, показываемые одинаково в разных браузерах
<div style=""width:" 300; background: #C0C0C0">
<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

Аргументы
Любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
BODY { background: url(bg.gif ) repeat fixed }
P { background: #C0C0C0 }

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById.elementID.style.background

Примечание
Netscape 4.x работает некорректно с отображением фона. Если вокруг элемента нет никакой границы, то фон будет только под текстом, а не у всей области. Даже если граница добавлена, между ней и областью будет небольшой промежуток, избавиться от которого нет возможности.

Copyright 2002, 2003 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное