X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать кнопки с подсветкой
brokkoli
brokkoli
Topic Starter сообщение 15.1.2012, 15:07; Ответить: brokkoli
Сообщение #1


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


привет :blink:

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

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

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


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
brokkoli
brokkoli
Topic Starter сообщение 15.1.2012, 15:30; Ответить: brokkoli
Сообщение #3


=))
Спасибо!
А если мне нужен не цвет фона, а картинка, которая будет фоном?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 15.1.2012, 16:06; Ответить: yury_mw
Сообщение #4


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>



Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 15.1.2012, 16:48; Ответить: yury_mw
Сообщение #5


(sogologo @ 15.1.2012, 15:22) *
Работает во всех браузерах.

sogologo,
не совсем так.
Псевдо-класс hover в IE6 работает только со ссылками.
Так что кнопочки с подсветкой правильнее рисовать не на абстрактных классах, а, именно, на ссылках, см пример выше (ну или эти классы применять только к ссылкам).
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
xilgiz
xilgiz
сообщение 15.1.2012, 17:27; Ответить: xilgiz
Сообщение #6


Думаю, сейчас на IE 6 можно и не обращать особого внимания...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
brokkoli
brokkoli
Topic Starter сообщение 17.1.2012, 17:46; Ответить: brokkoli
Сообщение #7


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

Мне требуется создать горизонтальное меню. Каждый пункт меню это <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;
    
    }
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
brokkoli
brokkoli
Topic Starter сообщение 17.1.2012, 18:19; Ответить: brokkoli
Сообщение #8


Разобрался, только не могу убрать отступы между ячейками-кнопками...паддинги нигде не прописаны, а отступ все равно есть. Подскажите, пожалуйста, как его убрать? и выровнять кнопки по центру? Сайт: stellaji-pro.ru
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matroskin8
matroskin8
сообщение 17.1.2012, 20:04; Ответить: matroskin8
Сообщение #9


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.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 17.1.2012, 22:05; Ответить: yury_mw
Сообщение #10


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.masterwebs.ru/index.php?s=&...ost&p=61673 пример горизонтального меню с кнопками нефиксированного размера.


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1124 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2297 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3920 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3646 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1943 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 29.3.2024, 11:50
Дизайн