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

Сервис обмена электронных валют

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

Помогите с кодом кнопки для сайта

#1 basilio

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

Отправлено 28 Март 2012 - 18:39

Хочу сделать своеобразную кнопку на сайт. Но только ни черта не получается ;)
Вот код:

<style type="text/css">
.download {
background: url("http://ourbc.ru/wp-c...loadbutton.gif");
display: block;
width: 204px; /* Ширина рисунка */
height: 64px; /* Высота рисунка */
opacity: 0.5;
}
download:hover {
background: url("http://ourbc.ru/wp-c...loadbutton.gif");
opacity: 1
}
download:active {
box-shadow:inset 0 0 10px #D4D4D4;
}
</style>


Где ошибка? На сайте в превью пусто.

 

 

  • 0

#2 yury

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

Отправлено 28 Март 2012 - 18:49

basilio,
ошибка, судя по всему, в том, что у вас нет кода кнопки (или вы от нас его скрываете). Есть только стиль для нее и тот с ошибками.
Короче, исправляется примерно так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>button</title>
<style type="text/css">
.download {
background: url("http://ourbc.ru/wp-content/themes/OnTheGo/images/Downloadbutton.gif");
display: block;
width: 204px; /* Ширина рисунка */
height: 64px; /* Высота рисунка */
opacity: 0.5;
}
.download:hover {
opacity: 1;
}
.download:active {
box-shadow:inset 0 0 10px #D4D4D4;
}
</style>
</head>
<body>
<a href="#" class="download"></a>
</body>
</html>
Обратите внимание так же на то, что стилевые свойства box-shadow и opacity из CSS3, поэтому их отобразить смогут не все браузеры.
  • 1

#3 basilio

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

Отправлено 28 Март 2012 - 19:21

yury,

Вы несомненно правы - учебник мне не повредит ;)
А что именно я должен вставить в style.css (Wordpress)? Я просто чайник по этой теме ;)
Заранее спасибо!
  • 0

#4 yury

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

Отправлено 28 Март 2012 - 20:38

basilio,
поймите, что только стиля для отображения кнопки недостаточно, нужен еще ее код.
В style.css ничего особенного вставлять не надо, только точки в начале описания классов не теряйте, иначе будут глюки:
.download:hover {
.download:active {
А вот в том месте html файла, где у вас должна быть кнопка, у вас должно быть что-то вроде такого:
<a href="#" class="download"></a>
т.е. ссылка или иной блок с классом "download".
Короче, рассказывайте подробнее, как вы кнопку вставляете, ибо возможны различные варианты. Иначе сложно понять, как вам помочь и в каком месте вы ошиблись.
  • 0

#5 basilio

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

Отправлено 28 Март 2012 - 20:49

В style.css вставляю:
<style type="text/css">
.download {
background: url("http://ourbc.ru/wp-c...loadbutton.gif");
display: block;
width: 204px; /* Ширина рисунка */
height: 64px; /* Высота рисунка */
opacity: 0.5;
}
.download:hover {
opacity: 1;
}
.download:active {
box-shadow:inset 0 0 10px #D4D4D4;
}
</style>


А в саму статью в html вставляю
<a href="#" class="download"></a>

Я знаю, что можно вставлять ещё через <div> и <span> ;)
  • 0

#6 yury

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

Отправлено 28 Март 2012 - 21:15

basilio,
в style.css
строчки
<style type="text/css">
и
</style>
помещать не надо
тэг <style> нужен только в случае размещения таблицы стилей в разделе <head> html-документа
  • 1

#7 basilio

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

Отправлено 28 Март 2012 - 21:19

Спасибо! ;)

У меня всё равно не показывает на сайте! В чём тогда проблема?
  • 0

#8 yury

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

Отправлено 28 Март 2012 - 21:24

Ссылку давайте на сайт или полный код проблемной страницы.

Ладно, я спать.
Все должно работать, если вы где-то еще в коде еще какой-то смешной ошибки не делаете.
Например, неверно ссылаетесь на style.css или не там ссылку ставите или тег где-то не закрыли.
Короче, весь код страницы нужен.

Сообщение отредактировал yury: 28 Март 2012 - 21:44

  • 1

#9 basilio

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

Отправлено 28 Март 2012 - 22:06

Фигня в том, что на простой хтмл страничке: file:///C:/Users... всё работает, а когда переношу стиль и вставляю в статью хтмл код - ничего не работает. Ошибок я не допускаю (проверяю тщательно). Дело в том, что не работает любая штука вида .ramka {} и тому подобное. Крч не робит у меня .что-то . Только вот как исправить эту проблему?
  • 0

#10 yury

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

Отправлено 29 Март 2012 - 12:10

basilio,
вы ссылку на то, что у вас не работает так и не дадите?

Ну ладно. Не хотите давать ссылку, вот вам рабочий вариант
Берете 1й файл tst.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>button</title>
<link rel="stylesheet" type="text/css" href="style_tst.css" />
</head>
<body>
<a href="#" class="download"></a>
</body>
</html>
2й файл style_tst.css
.download {
background: url("Downloadbutton.gif");
display: block;
width: 204px; /* Ширина рисунка */
height: 64px; /* Высота рисунка */
opacity: 0.5;
}
.download:hover {
opacity: 1;
}
.download:active {
box-shadow:inset 0 0 10px #D4D4D4;
}
3й файл с вашей картинкой Downloadbutton.gif
Изображение
кладете их все три на ваш сайт в одну папку и проверяете. Затем сравниваете с тем, что у вас и делаете выводы.

Больше не знаю, как вам помочь.
  • 2

robot

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


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