Изменить в CSS атрибут hr на сайте - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Горизонтальная линия (тег
) такой простой элемент, а столько с ним проблем:

Цвет и отступыhr

Для устранения этих проблем используем CSS код:

Код
hr {
height: 1px;
border: none;
color: #ff0000;
background: #ff0000;
margin: 0; /* устраняем начальный отступ для всех браузеров (в ие6 не работает) */
}
* html hr {/* хак для ие6 */
margin: -7px 0; /* устраняем начальный отступ для ие6 */
}


Для избежания хака и отдельного CSS для IE6 можно воспользоваться свойством float для hr:

Код
hr {
height: 1px;
border: none;
color: #ff0000;
background: #ff0000;
margin: 0;
float: left; /* чтобы в IE6 устранить отступ по умолчанию */
width: 100%; /* плавающие элементы обязательно должны иметь явно указанную ширину */
}


update: 2.12.09 - Чтобы задать одинаковый цвет для hr, можно воспользоваться и таким способом:

Код
hr {
height: 1px;
border: none;
border-top: 1px solid #000;
}


По умолчанию hr имеет выравнивание по центру. Выровнять влево/вправо не так очевидно как казалось.

Выравнивание hr влево

Код
hr {
height: 1px;
border: none;
width: 50%;
text-align: left; /* для ie */
margin: 0 auto 0 0; /* для остальных браузеров */
}
[code]

[b]Выравнивание hr вправо[/b]

[code]hr {
height: 1px;
border: none;
width: 50%;
text-align: right; /* для ie */
margin: 0 0 0 auto; /* для остальных браузеров */
}
[code]

[b]Бордюр для hr[/b]

[b]hr[/b] может выглядеть не только сплошной линией, например, она может быть пунктирной:

[code]hr {
height: 1px;
border: none;
width: 50%;
border-top: 1px dotted #000;
}


Background для hr

Код
hr {
height: 1px;
border: none;
background: url(path-to/hr.png) no-repeat;
}


Все просто, за одним исключение — это не работает в IE. Поэтому приходится использовать
:

Код
.line {
height: 1px;
border: none;
background: url(path-to/hr.png) no-repeat;
overflow: hidden; /* для ie6, чтобы высота блока была 1px */
}

Важно!

При копировании материала указывать ссылку на источник.

- 393
- 04-Сентября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта