Кнопка работает через раз, почему?

@Maddor · Регистрация: 23.03.2013

Студворк — интернет-сервис помощи студентам

Добрый день, делаю сайт. Сделал кнопки, а они работают через раз. Помогите
Вот CSS:

CSS
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
* {
    margin: 0;
    padding: 0;
}
 
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
}
 
a {
    color: 6E6E6E;
    outline: none;
    text-decoration: underline;
    font: 14px/18px Courier, monospace;
 
}
 
a:hover {
    text-decoration: none;
    color: 4C4945;
}
 
a:active {
    color: 201F1D;
}
 
p {
    margin: 0 0 18px
}
 
img {
    border: none;
    vertical-align: middle;
}
 
input {
    vertical-align: middle;
}
 
h1 {
    display: inline-block;
    font: 25px Courier, monospace;
    font-variant:small-caps;
    margin: 10px;
    word-spacing: 0px
}
 
 
 
/* ШАПКА
-----------------------------------------------------------------------------*/
#wrapperhd {
    width: 800px;
    margin: 5 auto;
}
 
#header {
    height: 100px;
    background: #EEEEEE;
    padding: 0px;
}
 
 
#wrapperhd_st {
    width: 800px;
    margin: 5 auto;
}
 
#header_st {
    height: 100px;
    background: #EEEEEE;
    padding: 0px;
}
 
#wrapperhd_fd {
    width: 800px;
    margin: 5 auto;
}
 
#header_fd {
    height: 100px;
    background: #EEEEEE;
    padding: 0px;
}
 
 
/* КОНТЕНТ
-----------------------------------------------------------------------------*/
#wrappercn {
    width: 600px;
    margin: 20 auto;
}
 
#content {
height: 600px;
border: 1px solid #DDDDDD;
padding: 20px;
background: #FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
 
 
#wrappercn_st {
    width: 600px;
    margin: 20 auto;
}
 
#content_st {
height: 1500px;
border: 1px solid #DDDDDD;
padding: 20px;
background: #FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
 
#wrappercn_fd {
    width: 450px;
    margin: 20 auto;
}
 
#content_fd {
height: 500px;
border: 1px solid #DDDDDD;
padding: 20px;
background: #FFFFFF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
 
 
/* ПОДВАЛ
-----------------------------------------------------------------------------*/
#wrapperft {
    width: 800px;
    margin: 0 auto;
}
 
#footer {
    height: 20px;
    background: #EEEEEE;
    padding-top: 10px;
    padding-left: 10px;
    color: #393937;
}
 
#wrapperft_st {
    width: 800px;
    margin: 0 auto;
}
 
#footer_st {
    height: 20px;
    background: #EEEEEE;
    padding-top: 10px;
    padding-left: 10px;
    color: #393937;
}
 
 
 
/* КНОПКИ
-----------------------------------------------------------------------------*/
#padding_btn {
    padding: 20px;
}
 
.btn {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}
 
.btn:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}
 
.btn:before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}
 
.btn:active:before {
    top:-2px;
}

HTML:

HTML5
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
<html>
    <head>
        <title>Write anythink</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection"/>
    </head>
    <body bgcolor="#EEEEEE">
 
 
        <div id="wrapperhd">
            <div id="header">
                    <img src="logo.png"><h1>The Powder toy по-русски!</h1>
            </div><!--#шапка-->
        </div><!--#ширина шапки-->
 
 
        <div id="wrappercn">
            <div id="content">
 
                <div id="padding_btn">
                    <center>
                        <a href="stuff.html" class="btn">
                            Описание всех веществ
                        </a>
                    </center>
                </div>
 
                <div id="padding_btn">
                    <center>
                        <a href="" class="btn">
                            Инструктаж по бла бла бла бла бла бла бла бла бла бла бла...
                        </a>
                    </center>
                </div>
 
                <div id="padding_btn">
                    <center>
                        <a href="" class="btn">
                            Инструктаж по бла бла бла бла бла бла бла бла бла бла бла...
                        </a>
                    </center>
                </div>
 
            </div><!--#контент-->
        </div><!--#ширина контента-->
 
 
        <div id="wrapperft">
            <div id="footer">
                Copyright *** © 2013|<a href="feedback.html">Контактные данные</a>
            </div><!--#подвал-->
        </div><!--#ширина подвала-->
 
 
    </body>
</html>

Помогите, пожалуйста, найти проблему.

Donald28 · 27.03.2013, 01:38

я что-то не вижу в коде кнопок

@Maddor · 27.03.2013, 12:03 **[ТС]**

Ну в CSS я пометил, и в HTML видно класс - btn.

Donald28 · 27.03.2013, 12:54

ну так это не кнопки - это ссылки, которые буду перенаправлять пользователя по адресу указанному в href. А он указан только в первой "кнопке"

@Maddor · 27.03.2013, 13:50 **[ТС]**

Да, ошибся, это ссылки. НО проверьте даже первую. Один раз нажал - сработала, другой - нет

Donald28 · 27.03.2013, 13:57

не очень понятен этот другой раз. а на странице stuff.html такой же код?

@Maddor · 27.03.2013, 15:21 **[ТС]**

Да, я имею в виду то что кнопка срабатывает рандомно, или да - перенаправляет куда нужно, или нет.

Donald28 · 27.03.2013, 15:27

ну а в чем тогда проблема, на странице stuff.html, вы нажимаете на кнопку с адресом страницы stuff.html. И правильно что ничего не происходит, т.к. вы уже на этой странице

@Maddor · 27.03.2013, 15:36 **[ТС]**

Нет, то что в начале топика, это index.html, первая из кнопок ведет на stuff.html.
Действия которые я описал:
"Да, я имею в виду то что кнопка срабатывает рандомно, или да - перенаправляет куда нужно, или нет."
Разворачиваются на index.html а не на stuff.html

Donald28 · 27.03.2013, 15:40

Сообщение от Maddor

Разворачиваются на index.html а не на stuff.html

потому что в href="" остальных ссылок ничего не написано

@Maddor · 27.03.2013, 16:10 **[ТС]**

Допустим мы убрали все остальные кнопки, все так и останется! Дело не в количестве кнопок, дело в самом коде кнопки. Тем более что бы говорим о полноценной - то есть с адресом и прочим.
Так вы мне поможете или будите ссылаться на то что в соседних кнопках нет адреса?

Donald28 · 27.03.2013, 16:18

Да нету у вас никакой кнопки:
Вот кнопка:

HTML5
1
<input type="button" value="BUTTON" />

А это банальная ссылка:

HTML5
1
<a href="адрес куда вам надо">Текст ссылки</a>

И работает она так: при нажатии по ссылке происходит переход на указанную страницу. И если как вы выражаетесь что-то не работает, а в частности переходит на index.html, значит в ссылке в атрибуте href прописано либо "", либо "/"!!!!

@Maddor · 27.03.2013, 16:36 **[ТС]**

Да плевать на остальные кнопки!!!!!!!
Вот теперь кнопка ОДНА!!!!!

HTML5
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
<html>
    <head>
        <title>Write anythink</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection"/>
    </head>
    <body bgcolor="#EEEEEE">
 
 
        <div id="wrapperhd">
            <div id="header">
                    <img src="logo.png"><h1>The Powder toy по-русски!</h1>
            </div><!--#шапка-->
        </div><!--#ширина шапки-->
 
 
        <div id="wrappercn">
            <div id="content">
 
                <div id="padding_btn">
                    <center>
                        <a href="stuff.html" class="btn">
                            Описание всех веществ
                        </a>
                    </center>
                </div>
 
            </div><!--#контент-->
        </div><!--#ширина контента-->
 
 
        <div id="wrapperft">
            <div id="footer">
                Copyright *** © 2013|<a href="feedback.html">Контактные данные</a>
            </div><!--#подвал-->
        </div><!--#ширина подвала-->
 
 
    </body>
</html>

Опишу проблему еще раз!
Эта кнопка срабатывает рандомно, или да - перенаправляет куда нужно, или нет.
Мы находимся на index.html, кнопка ведет на stuff.html

Добавлено через 1 минуту
Назовем эту ссылку кнопкой.

Добавлено через 1 минуту

Сообщение от Donald28

а в частности переходит на index.html

ОНА ДОЛЖНА ПЕРЕХОДИТЬ НЕ НА INDEX.HTML, А НА STUFF.HTML

Добавлено через 1 минуту
И ПЕРЕХОДИТ ОНА ЧЕРЕЗ РАЗ!!!

Donald28 · 27.03.2013, 16:39

приветите код страницы stuff.html

@Maddor · 27.03.2013, 16:48 **[ТС]**

HTML5
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
<html>
    <head>
        <title>Write anythink</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection"/>
    </head>
    <body bgcolor="#EEEEEE">
 
 
        <div id="wrapperhd_st">
            <div id="header_st">
                    <img src="logo.png"><h1>The Powder toy по-русски!</h1>
            </div><!--#шапка-->
        </div><!--#ширина шапки-->
 
 
        <div id="wrappercn_st">
            <div id="content_st">
                напишу еще
            </div><!--#контент-->
        </div><!--#ширина контента-->
 
 
        <div id="wrapperft">
            <div id="footer">
                Copyright *** © 2013|<a href="feedback.html">Контактные данные</a>
            </div><!--#подвал-->
        </div><!--#ширина подвала-->
 
 
    </body>
</html>

Donald28 · 27.03.2013, 18:55

короче, косяк в том, что при нажатии на ссылку, она смещается на 7px вниз (top: 7px

. А переход по ссылке происходит тогда, когда на ней оказывается курсор во время отпускания клавиши мышки. Т.е. в вашем случае мышка находится не на ссылке.

@Maddor · 28.03.2013, 02:49 **[ТС]**

А как это исправить?

Donald28 · 28.03.2013, 02:54

немного изменить конструкцию этих кнопок. Ты делал - ссылку оборачивал в div, и внешний вид кнопки применял к ссылке стилями. Попробуй сделать наоборот: div оберни ссылкой, и внешний вид кнопки примени этому диву.
Стили применяй примерно так:

CSS
1
2
3
4
a{ display: block;} /* чтобы ссылка веля себя как блок */
a div{ ... } /* стили внешнего вида кнопки */
 
a:activ div { ... } /* стили внешнего вида кнопки при нажатии на неё*/

@Maddor · 28.03.2013, 04:02 **[ТС]**

А в HTML как это будет выглядеть?

@Taatshi · 28.03.2013, 09:22

Donald28, нельзя див оборачивать в ссылку. Не пройдет валидацию.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 01:38
	я что-то не вижу в коде кнопок 1

@Maddor 1 / 1 / 0 Регистрация: 23.03.2013 Сообщений: 94
	27.03.2013, 12:03 [ТС]
	Ну в CSS я пометил, и в HTML видно класс - btn. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 12:54
	ну так это не кнопки - это ссылки, которые буду перенаправлять пользователя по адресу указанному в href. А он указан только в первой "кнопке" 1

@Maddor 1 / 1 / 0 Регистрация: 23.03.2013 Сообщений: 94
	27.03.2013, 13:50 [ТС]
	Да, ошибся, это ссылки. НО проверьте даже первую. Один раз нажал - сработала, другой - нет 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 13:57
	не очень понятен этот другой раз. а на странице stuff.html такой же код? 1

@Maddor 1 / 1 / 0 Регистрация: 23.03.2013 Сообщений: 94
	27.03.2013, 15:21 [ТС]
	Да, я имею в виду то что кнопка срабатывает рандомно, или да - перенаправляет куда нужно, или нет. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 15:27
	ну а в чем тогда проблема, на странице stuff.html, вы нажимаете на кнопку с адресом страницы stuff.html. И правильно что ничего не происходит, т.к. вы уже на этой странице 1

@Maddor 1 / 1 / 0 Регистрация: 23.03.2013 Сообщений: 94
	27.03.2013, 15:36 [ТС]
	Нет, то что в начале топика, это index.html, первая из кнопок ведет на stuff.html. Действия которые я описал: "Да, я имею в виду то что кнопка срабатывает рандомно, или да - перенаправляет куда нужно, или нет." Разворачиваются на index.html а не на stuff.html 0

@Maddor 1 / 1 / 0 Регистрация: 23.03.2013 Сообщений: 94
	27.03.2013, 16:10 [ТС]
	Допустим мы убрали все остальные кнопки, все так и останется! Дело не в количестве кнопок, дело в самом коде кнопки. Тем более что бы говорим о полноценной - то есть с адресом и прочим. Так вы мне поможете или будите ссылаться на то что в соседних кнопках нет адреса? 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 16:39
	приветите код страницы stuff.html 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 18:55
	короче, косяк в том, что при нажатии на ссылку, она смещается на 7px вниз (top: 7px. А переход по ссылке происходит тогда, когда на ней оказывается курсор во время отпускания клавиши мышки. Т.е. в вашем случае мышка находится не на ссылке. 2

@Maddor 1 / 1 / 0 Регистрация: 23.03.2013 Сообщений: 94
	28.03.2013, 02:49 [ТС]
	А как это исправить? 0

@Maddor 1 / 1 / 0 Регистрация: 23.03.2013 Сообщений: 94
	28.03.2013, 04:02 [ТС]
	А в HTML как это будет выглядеть? 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	28.03.2013, 09:22
	Donald28, нельзя див оборачивать в ссылку. Не пройдет валидацию. 1