чичас
Добавлено через 16 минут
Вот код, для кратоски привожу только одну пару (т.е. неактивно-активно), остальные аналогично. | 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
| <div class="headline h1 relative">Виды и стоимость товаров</div>
<!--Это блок, который изначально видно-->
<input type="radio" name="chetyre" id="chetyre1"/>
<label for="chetyre1"><div class="block-main-product" >
<div class="block-product"><div class="button2 product1 button-w98">
<div class="product-main-text animated productanim"><div class="hint button1 h2">Подробнее...</div><div class="product-text h2">Товар1
<div class="h3">описание 1</div><br>от 10 000 рублей
</div></div>
</div></div>
</div></label>
<!--Закончился-->
<div style="clear: both;"></div>
<!--Чтобы высота подстраивалась под содержимое-->
<!--Это блок, который появляется при нажатии-->
<div class="Green1" id="one"><!--идентификатор этого блока, к которому ведет якорная ссылка-->
<!--Страничка товара-->
<div class="element fone-rgba">
<div class="headline text h1 membrane">Товар 1</div>
<div class="main text">
<!--Общие положения-->
<div class="block-main2">
<div class="block membrane">
<div class="block h2 center">Описание услуги</div>
<div class="h3">Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?</div>
<div class="block h2">Описание рисков</div>
<div class="h3">Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?</div>
</div>
<div style="clear: both;"></div>
</div></div></div></div> |
|
Это по кнопкам
| 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
| .block-main-product {
float: left;
width: 25%;
min-width: 300px;
position:relative;
margin:0;
border:0;
padding:0;
}
.block-product {
position: relative;
padding:20px 20px 20px 20px;
}
/*кнопка 1*/
a.button1 {
text-align:center;
display: inline-block;
color: white;
text-decoration: none;
padding: 5px;
outline: none;
border-width: 2px 0;
border-style: solid none;
border-color: #FDBE33 #000 #D77206;
border-radius: 6px;
background: linear-gradient(#F3AE0F, #E38916) #E38916;
transition: 0.2s;
}
a.button1:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00;
cursor:pointer; }
a.button1:active { background: linear-gradient(#f59500, #f5ae00) #f59500;
cursor:pointer; }
.button1 {
text-align:center;
display: inline-block;
color: white;
text-decoration: none;
padding: 5px;
outline: none;
border-width: 2px 0;
border-style: solid none;
border-color: #FDBE33 #000 #D77206;
border-radius: 6px;
background: linear-gradient(#F3AE0F, #E38916) #E38916;
transition: 0.2s;
}
.button1:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00;
cursor:pointer; }
.button1:active { background: linear-gradient(#f59500, #f5ae00) #f59500;
cursor:pointer; }
/*кнопка 2*/
a.button2 {
height: 45%;
/*max-height: 400px;*/
display: inline-block;
font-weight: bold;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px rgba(0,0,0,.5);
user-select: none;
padding: .7em 1.5em;
border: 1px solid rgb(80,32,0);
border-radius: 5px;
outline: none;
/*background: rgb(147,80,36) linear-gradient(rgb(106,58,26), rgb(147,80,36) 80%);*/
box-shadow: 0 6px rgb(86,38,6),
0 3px 15px rgba(0,0,0,.4),
inset 0 1px rgba(255,255,255,.3),
inset 0 0 3px rgba(255,255,255,.5);
transition: .2s;
background-repeat: no-repeat;
background-size:cover;
z-index:5;
}
.button2 {
height: 45%;
/*max-height: 400px;*/
display: inline-block;
font-weight: bold;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px rgba(0,0,0,.5);
user-select: none;
/*padding: .7em 1.5em;*/
border: 1px solid rgb(80,32,0);
border-radius: 5px;
outline: none;
/*background: rgb(147,80,36) linear-gradient(rgb(106,58,26), rgb(147,80,36) 80%);*/
box-shadow: 0 6px rgb(86,38,6),
0 3px 15px rgba(0,0,0,.4),
inset 0 1px rgba(255,255,255,.3),
inset 0 0 3px rgba(255,255,255,.5);
transition: .2s;
background-repeat: no-repeat;
background-size:cover;
}
.button2:hover {
cursor:pointer;
}
.button2:active {
/* background: rgb(120,63,25) linear-gradient(rgb(120,63,25) 20%, rgb(167,91,41));*/
box-shadow:
0 2px rgb(86,38,6),
0 1px 6px rgba(0,0,0,.4),
inset 0 1px rgba(255,255,255,.3),
inset 0 0 3px rgba(255,255,255,.5);
-webkit-transform: translate(0, 4px);
transform: translate(0, 4px);
}
.hint {
display:none;
}
.button2:hover .hint {
display:inline;
position:absolute;
bottom:10px;;
right:3%;
z-index:8;
}
/*дополнительные параметры*/
.button-w98 {
width:98%;
min-width: 250px;
height:auto;
min-height:67%;}
/*Кнопка
<div class="main"><div class="block-main-product"><div class="block-product"><a href="#onen" class="button2 product1 h2">Ликвидация через реорганизацию</a></div></div>*/
.product-main-text {
width:100%;
height:auto;
min-height:35%;
text-align:justify;
margin:70% 0 0 0;
background-color: rgba(227, 220, 216, 0.6);
border-radius: 5px;
z-index:7;
position:relative;
}
.product-text {
padding: 10%;
width: 80%;
position: relative;
color: #000;
height:auto;
}
@media screen and (max-width: 620px) {
.block-product {
padding:5px 5px 5px 5px;
}
.product-main-text {
margin:0;
}
.button-w98 {
min-height:15%;}
} |
|
Это по соотношению input
| 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
| input[name="chetyre"] {
display:none;}
.yellow {
display:none;
position:static;
width:100%;
height:auto;
min-height:300px;
background-color:#333;}
#chetyre1:checked ~ .yellow {
background-color:#331;}
#chetyre2:checked ~ .yellow {
background-color:#666;}
#chetyre3:checked ~ .yellow {
background-color:#999;}
#chetyre4:checked ~ .yellow {
background-color:#CCC;}
.Green1 {
width: 100%;
height:auto;
min-height:300px;
transition: .5s;
position:static;
display:none;
}
#chetyre1:checked ~ .Green1 {
display:block;
}
.Green2 {
width: 100%;
height:auto;
min-height:300px;
transition: .5s;
position:static;
display:none;
}
#chetyre2:checked ~ .Green2 {
display:block;
}
.Green3 {
width: 100%;
height:auto;
min-height:300px;
transition: .5s;
position:static;
display:none;
}
#chetyre3:checked ~ .Green3 {
display:block;
} |
|
Другие стили не привожу, т.к. они не имеют отношения к проблеме.
Так вот, если я делаю ссылку на id="one" (где класс Green1), она не работает, и не важно, открыто или скрыто содержимое.
А проблема в том, что пользователь кликает на кнопку, ниже кнопки отображается скрытый элемент, но пользователь этого не видит, т.к. отображается за пределами зоны просмотра. А нужно, чтобы он кликнул, и не только открылся скрытый блок, но и его туда "перенесло".
0
|
(
Сообщение от Jewbacabra
