Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Как сделать кнопки с подсветкой

#1 brokkoli

brokkoli
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 15 Январь 2012 - 14:07

Добрый день уважаемые вебмастера!
Подскажите с помощью каких функций css сделать кнопки как бы с подсветкой? Обычными средствами умею делать это так: сначала отображается одна картинка кнопки, но при наведении на нее накладывается другая и создает эффект нажатия, это в html. В-принципе устраивает, но большой обьем кода не нравится.

 

 

  • 0

#2 sogologo

sogologo
  • Пользователь
  • 29 сообщений
  • Репутация: 0

Отправлено 15 Январь 2012 - 14:22

привет :blink:

а вы какие средствами это делаете?? через js чтоли :) ну вы даете...

в css это делается через class:hover {...}

пример:
/*класс отображения по дефолту*/
.className {
   color:green;
}
/*класс отображения по наведению*/
.className:hover {
   color:red;
}

Работает во всех браузерах.
  • 0

#3 brokkoli

brokkoli
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 15 Январь 2012 - 14:30

=))
Спасибо!
А если мне нужен не цвет фона, а картинка, которая будет фоном?
  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 15 Январь 2012 - 15:06

brokkoli,
рисуем кнопку размером 150х40px
Фон лежит в картинке button.png 150х80px — в ней хранятся оба состояния кнопки, одно под другим: вверху обычное, сразу под ним то, которое с подсветкой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>button</title>
<style type="text/css">
.button{
width: 150px;
height: 40px;
}
.button a,
.button a:visited{
display: block;
height: 40px;
background: url(button.png) no-repeat;
}
.button a:hover{
background: url(button.png) 0 -40px no-repeat;
}
</style>
</head>
<body>
<div class="button"><a href="#">Кнопка</a></div>
</body>
</html>

  • 0

#5 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 15 Январь 2012 - 15:48

Работает во всех браузерах.

sogologo,
не совсем так.
Псевдо-класс hover в IE6 работает только со ссылками.
Так что кнопочки с подсветкой правильнее рисовать не на абстрактных классах, а, именно, на ссылках, см пример выше (ну или эти классы применять только к ссылкам).
  • 0

#6 xilgiz

xilgiz
  • Пользователь
  • 155 сообщений
  • Репутация: 0

Отправлено 15 Январь 2012 - 16:27

Думаю, сейчас на IE 6 можно и не обращать особого внимания...
  • 0

#7 brokkoli

brokkoli
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 17 Январь 2012 - 16:46

Спасибо всем за советы!

Мне требуется создать горизонтальное меню. Каждый пункт меню это <li> . В style.css я описываю как должна выглядеть отдельная кнопка меню, но видимо что-то неверно и кнопки отображаются некорректно, не такие как я для них картинку рисовал (button.png) =( Помогите, пожалуйста.

#menu li {
	display:inline;
		width: 100px;
		height: 24px;
		background: url(/images/vse/button.png) no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
		font-size: 10pt; /* Размер шрифта в пунктах */ 
	font-variant:small-caps;
	margin-right:0px;
	margin-left:70px;
	padding-left:0px;
	
	}

  • 0

#8 brokkoli

brokkoli
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 17 Январь 2012 - 17:19

Разобрался, только не могу убрать отступы между ячейками-кнопками...паддинги нигде не прописаны, а отступ все равно есть. Подскажите, пожалуйста, как его убрать? и выровнять кнопки по центру? Сайт: stellaji-pro.ru
  • 0

#9 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 17 Январь 2012 - 19:04

brokkoli, Вы используете для элементов #menu li свойство display со значением inline-block. Недостатком этого значения является то, что элементы, с назначенным inline-block, чувствительны к пробелам. Чтобы решить поблему нужно убрать все пробелы между элементами меню, т.е. в коде:
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/o-nas/">О нас</a></li>
<li><a href="/tseny/">Цены</a></li>
<li><a href="/internet-magazin-stellazhejj/">Каталог</a></li>
<li><a href="/dostavka/">Доставка</a></li>
<li><a href="/montazh-stellazhejj/">Монтаж</a></li>
<li><a href="/contacts/">Контакты</a></li>
</ul>

убираем пробелы:
<ul>
<li><a href="/">Главная</a></li><li><a href="/o-nas/">О нас</a></li>... и т.д.
</ul>

Вообще же, лучше обойтись без display:inline-block... лучше использовать float:left.
  • 0


#10 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 17 Январь 2012 - 21:05

brokkoli,
горизонтальное меню с кнопками фиксированного размера кодируется, примерно, так:
style.css

*{ /* Обнуляем отступы везде, а где они будут нужны ненулевыми, там потом их явно пропишем */
margin:0;
padding:0;
}
#menu ul{
list-style:none; /* Убираем маркеры у списка */
}
#menu li{
float:left; /* Это свойство выстроит список в строку */
margin-left:70px; /* Это вы так расстояние между кнопками задаете? */
}
#menu li a{
float:left; /* Это же свойство превратит ссылки внутри списка в блочные элементы
(ну чтобы вся кнопка была активной, а не только буковки в надписи на кнопке) */
width:100px;
height:24px;
background: url(/images/vse/button.png) no-repeat;
font:small-caps 10pt Verdana, Arial, Helvetica, sans-serif;
text-align:center; /* На всякий случай, для красоты, центруем надпись по горизонтали на кнопке */
text-decoration:none; /* Обычно надписи на кнопках не подчеркивают, но это на любителя */
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="pnt1.html">Пункт 1</a></li>
<li><a href="pnt2.html">Пункт 2</a></li>
<li><a href="pnt3.html">Пункт 3</a></li>
</ul>
</div>
</body>
</html>

А тут http://www.masterweb...&...ost&p=61673 пример горизонтального меню с кнопками нефиксированного размера.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru