Смена фона на Css
<ul>
<li onmouseover="this.style.backgroundColor='#FAFAF5';" onmouseout="this.style.backgroundColor='#ddddd0';" bgcolor="#ddddd0" style="display:block; height:50px; width:100px">Test[/list]Можно ли добиться анологичного только средствами CSS? Спасибо.
<html>
<head>
<title></title>
<style type="text/css">
.TDlink:link {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #036;
text-decoration: none;
background-color: #fff;
}
.TDlink:hover {
color: #fff;
background-color: #036;
text-decoration: underline;
}
.button {
display: block;
width: 150px;
height: 30px;
border: solid 1px #036;
cursor: pointer;
text-align: center;
line-height: 26px;
}
.button:hover {
background: #036;
}
</style>
</head>
<body>
<span class="button">Codenet2</span>
</body>
</html>
Мдяя... Оказываеться на работе +- то же самое писал, только немного по другому...
Примерно вот так... Осёл непонимает походу :hover не где, кроме как a: :(
Всё, спасибо. Немного жирно для ссылки, но работает:).
ul.menu a {
display: block;
width: 100px;
height: 50px;
background-color: #ddddd0;
}
ul.menu a:hover {
background-color: #FAFAF5;
}
</style>
...
<ul class="menu">Test 1Test 2Test 3[/list]
PS. ...а код Карпуса некорректно работает в FF :P :)
PS. ...а код Карпуса некорректно работает в FF :P :)
А в чем выражается некорректность? У меня вроде все как надо работает. Возможно я ошибаюсь, но с display: block; для ссылок в IE5 были проблемы.
А в чем выражается некорректность? У меня вроде все как надо работает. Возможно я ошибаюсь, но с display: block; для ссылок в IE5 были проблемы.
Проблема один: При наведении цвет фона меняет только ссылка. Т.е становится белой. Т.е. невидимой на белом фоне квадратика.
Проблема два: бордер показывается правильно, а hover срабатывает по всей строке (т.е. за пределами квадратика по горизонтали).
А какая проблема в ie5.5? (Хотя я легче наплюю на ie5.5, чем на FF) :)
Возможно я ошибаюсь, но с display: block; для ссылок в IE5 были проблемы.
К тому же, насколько я понимаю, если есть проблемы с display: block; для ссылок, то такие же должны быть и для spanов -- один хрен строчные элементы. Так что, если уж на то пошло, логичнее было бы ставить div вместо span, и вообще забыть про display.
К тому же, насколько я понимаю, если есть проблемы с display: block; для ссылок, то такие же должны быть и для spanов -- один хрен строчные элементы. Так что, если уж на то пошло, логичнее было бы ставить div вместо span, и вообще забыть про display.
Не логичней - согласно HTML 4.01 div не может быть вложен в строчный элемент.
В IE5, похоже, ничего другого не остается, как задавать padding-и для span-a.
Не логичней - согласно HTML 4.01 div не может быть вложен в строчный элемент.
Да, действительно. Весьма прискорбно...
Я все же думаю, что пора ie5 выбрасывать таки на помойку, но... а что ж происходит с ним при дисплей-блоке для ссылки? с 5.5 также плохо?
Да, действительно. Весьма прискорбно...
Я все же думаю, что пора ie5 выбрасывать таки на помойку,
Давно пора, но пользователей с User-Agent IE5-5.5 пока довольно много.
но... а что ж происходит с ним при дисплей-блоке для ссылки? с 5.5 также плохо?
Похожее меню я делал где-то 1,5 года назад, когда IE5 был более актуален. Не утверждаю, но ссылка в 5.0 не отображается как блок. Т.е. высоту ссылке задать не получается и при наведении остаются полосы сверху и снизу.
Когда проверю скажу точно.
Давно пора, но пользователей с User-Agent IE5-5.5 пока довольно много.
Похожее меню я делал где-то 1,5 года назад, когда IE5 был более актуален. Не утверждаю, но ссылка в 5.0 не отображается как блок. Т.е. высоту ссылке задать не получается и при наведении остаются полосы сверху и снизу.
Когда проверю скажу точно.
Собсно на следующий день я его переписал. В лисе, ослике и опере проверил, нормуль.
1. Проверил свой код в ie5 и ie5.5.
Как часы.
2. Свойство display: block; требуется только Мозиллам. Опере и ie(5, 5.5, 6) оно необязательно, они и без него показывают все как надо (даже странно).
3. Проверил код Карпуса в ie5 и ie5.5.
Работает.
4. Код Карпуса работал некорректно в Мозилле, потому что я забыл поставить правильный !DOCTYPE. :{
5. В коде Карпуса обнаружилось нечто странное: после нажатия (я поставил href="#") перестали срабатывать правила color: #036; и text-decoration: none; . Попытки обновить страницу ни к чему не привели.
Наблюдения:
1. Проверил свой код в ie5 и ie5.5.
Как часы.
Насчет пятерки я прогнал слегка. Вот цитата из MSDN:
In Internet Explorer 4.0, the block, inline, and list-item values are not supported explicitly, but do render the element.
The block and inline values are supported explicitly as of Internet Explorer 5.
2. Свойство display: block; требуется только Мозиллам. Опере и ie(5, 5.5, 6) оно необязательно, они и без него показывают все как надо (даже странно).
У элемента списка по умолчанию свойство display установлено в inline-block, оно распространяется и на вложенную ссылку.
5. В коде Карпуса обнаружилось нечто странное: после нажатия (я поставил href="#") перестали срабатывать правила color: #036; и text-decoration: none; . Попытки обновить страницу ни к чему не привели.
Это потому, что не прописано :visited.
Насчет пятерки я прогнал слегка. Вот цитата из MSDN:
У элемента списка по умолчанию свойство display установлено в inline-block, оно распространяется и на вложенную ссылку.
Это потому, что не прописано :visited.
А не кто не думал над созданием российского zengarden?
А не кто не думал над созданием российского zengarden?
Дерзай. Нарисуй валидный шаблон, иможно здесь типа конкурса устроить.
Дерзай. Нарисуй валидный шаблон, иможно здесь типа конкурса устроить.
Тем более место есть:). Ушёл в раздумье.