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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Помогите с кодом кнопки для сайта
basilio
basilio
Topic Starter сообщение 28.3.2012, 19:39; Ответить: basilio
Сообщение #1


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

<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 {
background: url("http://ourbc.ru/wp-content/themes/OnTheGo/images/Downloadbutton.gif");
opacity: 1
}
download:active {
box-shadow:inset 0 0 10px #D4D4D4;
}
</style>


Где ошибка? На сайте в превью пусто.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 28.3.2012, 19:49; Ответить: yury_mw
Сообщение #2


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, поэтому их отобразить смогут не все браузеры.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
basilio
basilio
Topic Starter сообщение 28.3.2012, 20:21; Ответить: basilio
Сообщение #3


[b]yury,[/b]

Вы несомненно правы - учебник мне не повредит ;)
А что именно я должен вставить в style.css (Wordpress)? Я просто чайник по этой теме ;)
Заранее спасибо!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 28.3.2012, 21:38; Ответить: yury_mw
Сообщение #4


basilio,
поймите, что только стиля для отображения кнопки недостаточно, нужен еще ее код.
В style.css ничего особенного вставлять не надо, только точки в начале описания классов не теряйте, иначе будут глюки:
.download:hover {

.download:active {

А вот в том месте html файла, где у вас должна быть кнопка, у вас должно быть что-то вроде такого:
<a href="#" class="download"></a>

т.е. ссылка или иной блок с классом "download".
Короче, рассказывайте подробнее, как вы кнопку вставляете, ибо возможны различные варианты. Иначе сложно понять, как вам помочь и в каком месте вы ошиблись.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
basilio
basilio
Topic Starter сообщение 28.3.2012, 21:49; Ответить: basilio
Сообщение #5


В style.css вставляю:
<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>


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

Я знаю, что можно вставлять ещё через <div> и <span> ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 28.3.2012, 22:15; Ответить: yury_mw
Сообщение #6


basilio,
в style.css
строчки
<style type="text/css">

и
</style>

помещать не надо
тэг <style> нужен только в случае размещения таблицы стилей в разделе <head> html-документа
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
basilio
basilio
Topic Starter сообщение 28.3.2012, 22:19; Ответить: basilio
Сообщение #7


Спасибо! ;)

У меня всё равно не показывает на сайте! В чём тогда проблема?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 28.3.2012, 22:24; Ответить: yury_mw
Сообщение #8


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

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

Сообщение отредактировал yury - 28.3.2012, 22:44
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
basilio
basilio
Topic Starter сообщение 28.3.2012, 23:06; Ответить: basilio
Сообщение #9


Фигня в том, что на простой хтмл страничке: file:///C:/Users... всё работает, а когда переношу стиль и вставляю в статью хтмл код - ничего не работает. Ошибок я не допускаю (проверяю тщательно). Дело в том, что не работает любая штука вида .ramka {} и тому подобное. Крч не робит у меня .что-то . Только вот как исправить эту проблему?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 29.3.2012, 13:10; Ответить: yury_mw
Сообщение #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
[img]http://ourbc.ru/wp-content/themes/OnTheGo/images/Downloadbutton.gif[/img]
кладете их все три на ваш сайт в одну папку и проверяете. Затем сравниваете с тем, что у вас и делаете выводы.

Больше не знаю, как вам помочь.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 351 Вчера, 15:13
автор: LiveExpert
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 324 Вчера, 15:13
автор: LiveExpert
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыAzinomoney.com - гемблинг-партнерка с 65%RS для каждого
Гарантированный заработок на гемблинг-трафике
65 AzinoMoney 29183 27.3.2024, 19:10
автор: AzinoMoney
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6367 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1354 26.3.2024, 21:43
автор: c4p1t4l15t


 



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