CompoWiki Форум

Интернет и Сети => WEB-дизайнеру => Тема начата: VVVas от 07 апреля, 2005, 21:24:35

Название: Извращение ли <hr> через CSS?
Отправлено: VVVas от 07 апреля, 2005, 21:24:35
.line { width: 75%; text-align: center; }
Такой вот класс для <hr>, чувствую что можно сделать более культурно, не подскажете как?
И как через задать толщину <hr>? наподобие <hr size="1">.
Название: Извращение ли <hr> через CSS?
Отправлено: abram4 от 07 апреля, 2005, 23:36:37
Из статьи Кулинарные рецепты CSS (http://www.webmascon.com/topics/coding/01a.asp) :
ЦитироватьКак задать стиль для hr?
Internet Explorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал Stefan M. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие - как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем:

Internet Explorer:
HR { color: #F00; }

Прочие CSS-совместимые броузеры: HR { background-color: #F00; }

Тоже самое верно и для выравнивания:

Internet Explorer:
HR { text-align: right; }

Прочие CSS-совместимые броузеры:
HR { margin-right: 0; }

Итак, достичь с помощью css того, что в html выглядит как

<hr align="right" width="30%" size="2" color="#000F00" noshade>

...вы можете следующим образом:

HR { text-align: right; width: 30%; height: 2px; color: #F00; border: none; } /* Для IE */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: none; } /* Для броузеров на базе Gecko */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: 0px solid #F00; } /* Для Оперы и броузеров на базе Gecko */

Для более подробной информации по этой теме читайте статью Marek Prokop "Styling <hr>" (http://www.sovavsiti.cz/css/hr.html)
З.Ы.
Вспомнив про кроссбраузерность, скажу не в тему - ГЫ !  :crazy:
Название: Извращение ли <hr> через CSS?
Отправлено: VVVas от 21 апреля, 2005, 01:14:17
Спасибо, не для себя, но заюзал.