Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / ссылка, стилизованная под кнопку (css) / 8 сообщений из 8, страница 1 из 1
08.08.2013, 11:09
    #38359328
новичок-любитель
новичок-любитель
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
в процессе гугления по теме HTML и PHP наткнулся на сайт
 
оффтоптематика которого кстати, несколько лет назад была мне очень близка :)
на него сослались не помню где как на пример кнопки для скачивания файла с помощью http заголовков Content-disposition: attachment ... или даже спрашивали как сделать также. не помню.

с красивой кнопкой для скачивания файла
http://gtp-db.ru/gtp/view/dream_theater/dream_theater_-_overture_1928_4

захотел позаимствовать, просто скопипастил кусочек html и css в пустую страницу, ничего не меняя, но в моей страничке кнопка не зеленая а белая.
у этой кнопки (а точнее ссылки) как бы три класса class="btn btn-success btn-large".
Через FireBug вижу на оригинальной странице применяется сначала btn-success, затем .btn-large и последним .btn. Но в моем тесте только .btn, остальные FireBug показывает в конце и элементы стилей перечеркнуты.

Это выше моего понимания, объясните, пожалуйста.
 
вот мой пример. (css пробовал делать внешним).
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<!--<link href="Untitled-8.css" rel="stylesheet" type="text/css">-->
</head>
<style>
.btn:first-child {
}
.btn-success {
    background-color: #5BB75B;
    background-image: linear-gradient(to bottom, #62C462, #51A351);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn {
    border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn-large {
    border-radius: 6px 6px 6px 6px;
    font-size: 17.5px;
    padding: 11px 19px;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #A2A2A2;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
}
a {
    color: #0088CC;
    text-decoration: none;
}
</style>
<body>
<p>
<a href="/gtp/download/dream_theater_-_overture_1928_4" class="btn btn-success btn-large" rel="popover" data-html="true" data-content="Понравился подбор? Лайкни!" data-title="Закачка сейчас начнется... <img src="/images/loader.gif">" id="download-btn">Скачать GTP Overture 1928 (4)</a></p>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2013, 12:12
    #38359439
Gustly
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
новичок-любитель,

Не знаю почему, но на сайте картинка фона от .btn не перекрывает картинку фона .btn-success, удали все фоновые картинки от .btn и оно возьмется от .btn-success
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.08.2013, 08:46
    #38362165
gtp-db
gtp-db
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
новичок-любитель, привет, я создатель сайта http://gtp-db.ru . Оформление сделано на чистом twitter bootstrap. Перечеркнутые стили значат, что они перекрываются более приоритетными.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2013, 10:22
    #38362761
Gustly
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
gtp-db,

Как определяется приоритетность стилей?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.08.2013, 10:35
    #38362772
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
GustlyКак определяется приоритетность стилей?
Вот
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2013, 20:25
    #38366782
deblogger
deblogger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
Столько кода ради одного кнопаря, непостижимо (эвфемизм от анально).

автордля скачивания файла с помощью http заголовков Content-disposition: attachment

Заголовки яву не колебут. Либо айфрейм, но скорее всего айякс.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.08.2013, 13:11
    #38376501
новичок-любитель
новичок-любитель
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
gtp-dbновичок-любитель, привет, я создатель сайта http://gtp-db.ru . Оформление сделано на чистом twitter bootstrap. Перечеркнутые стили значат, что они перекрываются более приоритетными.Привет, молодец. Я раньше и сам табы в этой проге простенькие делал когда увлекался гитарой. и с помощью табов осваивал типа таких мелодий
http://gtp-db.ru/artists/view/blackmore_ritchie , http://gtp-db.ru/artists/view/blackmores_night и даже отсюда кое-что

Я уже понял, что это какой-то фреймворк, потом стили аккуратно выдерну. Мне сначала наверно лучше освоить HTML CSS Javascript и PHP в чистом виде, а после всякие bootstrap и jquery.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.08.2013, 13:14
    #38376502
новичок-любитель
новичок-любитель
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ссылка, стилизованная под кнопку (css)
debloggerавтордля скачивания файла с помощью http заголовков Content-disposition: attachment

Заголовки яву не колебут. Либо айфрейм, но скорее всего айякс.яву айфрейм айякс ... причем тут это? или не могли бы подробнее ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / ссылка, стилизованная под кнопку (css) / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 746ms
Закрыть
start [/forum/search_topic.php?author=ilya-php&author_mode=last_topics&do_search=1]:
 0ms
get settings:
 10ms
get forum list:
 17ms
get settings:
 8ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 168ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 45ms
get tp. blocked users:
 2ms
others: 460ms
total:  746ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]