Уважаемые посетители!
Здесь, я буду писать, статьи-заметки(свои и из инета), показавшиеся, мне интересными. Писать, буду, своими словами и возможно, с использованием неприличной лексики. Приношу извинения тем, кого, это будет коробить..
Как изменить цвет линии hr..
По умолчанию, цвет линии, тега <hr>, при добавлении на web-страницу, отображается серым цветом, да еще и с эффектом объема.
Такой цвет и вид линии, нам не всегда подходит по дизу сайта, поэтому будем, менять его через стили.
Что бы подружить наш <hr>, со всеми браузерами, будем использовать несколько стилевых атрибутов. Мы ж, не дурнее их, правда?!
К примеру, браузер Internet Explorer для цвета линии применяет свойство color, а вот Opera и Firefox — background-color. Но это пол-беды, нужно обязательно указать толщину линии (параметр height) больше нуля и убрать рамочку вокруг линии, задавав значение none у атрибута border.Собирем все параметры вместе, для селектора hr и получим универсальное решение для популярных браузеров.
Например, так:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Цвет линии</title>
<style type="text/css">
HR {
border: none; /* Убираем границу для браузера Firefox */
color: red; /* Цвет линии для браузера Internet Explorer */
background-color: red; /* Цвет линии для браузера Firefox и Opera */
height: 2px; /* Толщина линии */
}
</style>
</head>
<body>
<hr>
<hr>
</body>
</html>
Вот, что получилось, в видимом варианте(цвет линии задан как красный, а толщина линии равна двум пикселам):
21.04.2008. 17:08
Werdn 26.06.2008. 12:02
А как вообще убрать рамку у
в IE?
я пишу так:
hr {
margin: 2em auto;
width: 400px;
height: 20px;
background: transparent url(images/divider.png) no-repeat scroll center top;
border: none; /*В FireFox, Opera, Konqueror, Safari рамка убирается*/
border-collapse: 0;
outline: none;
}
А. Северский 30.06.2008. 18:17
Если уж линия тебе понадобилась, хоть и не могу понять зачем, если она будет невидима.. То, самый простой вариант, это задать ей тот же цвет, что и фон страницы. :)
обо мне · CSS · Как изменить цвет линии hr..
Написать коментарий
* = обязательное поле