1 / 1 / 3
Регистрация: 27.12.2012
Сообщений: 192
1

Всплывающие подсказки для кнопок

15.07.2014, 11:37. Показов 2279. Ответов 8
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Есть подсказки для кнопок. Всё хорошо, но на других разрешениях эти подсказки съезжают влево. Как их привязать к верхнему правому углу на всех разрешениях.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a.help span{
  display: none;
}
a.help:hover{
  position: relative;
}
a.help:hover span#k1{
  position: absolute;
  display: block;
  left: 1483px;
  top: 55px;
  border: solid 1px #000000;
  background: #ffffff;
  color: #000000;
  white-space: pre;
  padding: 2px;
}
HTML5
1
2
3
4
<a href="/" class="help">
<div class="button btn-search"></div>
<span id="k1">Поиск</span>
</a>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.07.2014, 11:37
Ответы с готовыми решениями:

Всплывающие подсказки
Возможно сделать привязку по атрибуту? .tooltip:hover:after{ background: #333; ...

Ссылки на всплывающие подсказки
Как сделать ссылку на другой файл, загружаемый вместо текущего, я знаю. А как сделать, чтоб при...

Всплывающие подсказки заходят под таблицу
Здравствуйте! Я не силен в CSS, и прошу помощи: как сделать так, чтобы всплывающие подсказки не...

Стиль для подсказки
Подскажите пожалуйста как реализовать красную рамку для всплывающей подсказки как на картинке

8
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
15.07.2014, 11:41 2
Попробуйте вместо left... Поставить right:0
0
1 / 1 / 3
Регистрация: 27.12.2012
Сообщений: 192
15.07.2014, 12:12  [ТС] 3
vovandr, нет

Добавлено через 22 минуты
Ну верстальщики "от бога", ещё варианты.
0
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
15.07.2014, 12:22 4
Цитата Сообщение от Арти7030 Посмотреть сообщение
Ну верстальщики "от бога", ещё варианты.
ссылку на сайт киньте, не понятна ситуация, надо визуально видеть что происходит
0
1 / 1 / 3
Регистрация: 27.12.2012
Сообщений: 192
15.07.2014, 17:30  [ТС] 5
vovandr, проблема в том что кнопки в правом углу не дают пододвинуть меню к правой стороне блока. Помогите сделать обтекание или что там надо сделать.
Миниатюры
Всплывающие подсказки для кнопок  
0
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
15.07.2014, 17:45 6
так у вас конечно, вы видите какое позиционирование у подсказок. И у <a> у вас почему-то position:relative; стоит при событии hover.

Если у любого элемента, в который вложен блок с абсолютным позиционированием не будет прописано свойство position:relative; Вложенный элемент с абсолютной позицией будет брать свои координаты от ближайшего родителя, а этим родителем будет первый ближайший элемент с position:relative;

Если же таких не найдется, элемент с абсолютным позиционированием будет брать свои координаты от body
0
1 / 1 / 3
Регистрация: 27.12.2012
Сообщений: 192
15.07.2014, 17:54  [ТС] 7
maximus2011, с подсказками вопрос уже решен. другой вопрос чуть выше. Можете помочь?
0
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
15.07.2014, 18:05 8
ну тут надо смотреть на разметку макета в коде
0
1 / 1 / 3
Регистрация: 27.12.2012
Сообщений: 192
15.07.2014, 21:19  [ТС] 9
maximus2011,
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
<header>                                                
<h1 id="blink7"></h1>
<a class="help">
<div class="button btn-search"></div>
<span id="k1">Поиск</span>
</a>
<a target="_self" href="index_1.html" class="help">
<div class="button btn-registration"></div>
<span id="k2">Регистрация</span>
</a>
<a target="_self" href="index_2.html" class="help">
<div class="button btn-open"></div>
<span id="k3">Войти</span>
</a>
</header>                                               <!--Конец шапки сайта-->
<section>                                               <!---Начало секции-->
<article id="s1">   
<h2>                                                    <!--Начало блока навигации-->
<font id="a1">Ваши мнения</font> &nbsp&nbsp
<font id="a2">Добавить мнение</font> &nbsp&nbsp
<font id="a3">Блоггеры</font> &nbsp&nbsp
<font id="a4">Настройки</font> &nbsp&nbsp
</h2>
</article>
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
html, body {
  margin: 0;
  padding: 0;
  display: table;
  height: 100%;
  width: 100%;
  background: url([url]http://www.look.com.ua/pic/201209/1920x1080/look.com.ua-14719.jpg[/url]) repeat-y center #dedede;
}
@font-face {
  font-family: Broadway;
  src: url(font/Broadway.ttf);
  font-family: UniSansHeavyCAPS;
  src: url(font/8bEubJ5y.otf);
}
header{
  background: #000000;
  height: 108px;
  width: auto;
  margin-bottom: 2%;
  padding-left: 0.5%;
  color: #ffffff;
}
section{
  background: #a0c0ff;
  height: 100%;
  width: 80%;
  margin: auto;
}
article{
  background: #c0ff00;
  height: 100%;
  width: 100%;
}
footer{
  background: #c080ff;
  height: 50px;
  width: auto;
}
#s1{
  background: #000000;
  color: #ffffff;
  height: 12%;
  width: 100%;
  margin: auto;
  outline: 5px double #6060ff;
}
#s2{
  background: #c0ff00;
  height: 88%;
  width: 20%;
  float: left;
 
}
#s3{
  background: #20ff80;
  height: 88%;
  width: 80%;
  float: right;
}
h1{
  font-size: 35pt;
  font-family: Broadway;
  margin: 0;
}
h2{
  font-size: 26pt;
  font-family: UniSansHeavyCAPS;
  text-align: right;
}
a{
  text-decoration: none;
}
#a1{
   text-shadow: -4px -3px 7px #4080ff, 4px 3px 7px #4080ff;
}
#a2{
   text-shadow: -4px -3px 7px #ff2020, 4px 3px 7px #ff2020;
}
#a3{
   text-shadow: -4px -3px 7px #8080ff, 4px 3px 7px #8080ff;
}
#a4{
   text-shadow: -4px -3px 7px #ff00ff, 4px 3px 7px #ff00ff;
}
#g1{
  text-align: left;
  padding-left: 30px;
}
@-webkit-keyframes pulsate{
50%{color: #fff; text-shadow: 0 -1px rgba(0,0,0,3),0 0 5px #ffd, 0 0 8px #fff;}
}
@keyframes pulsate{
0%{color: #fff; text-shadow: 0 5px rgba(0,0,0,1),0 0 5px #ffd, 0 0 8px #fff;}
95%{color: #fff; text-shadow: 0 5px rgba(0,0,0,0.3),0 0 5px #00f, 0 0 8px #00f;}
}
#blink7{
  color: rgb(245, 245, 245);
  text-shadow: 0 -1px rgba(0,0,0,1);
  background: black;
  -webkit-animation: pulsate 3.2s linear infinite;
  animation: pulsate 3.2s linear infinite;
}
.button {
  display: inline-block;
  margin: 20px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 50%;
  float: right;
  position: relative;
  bottom: 70px;
  
  box-shadow: 0 3px 20px rgba(0,0,0,.25),
  inset 0 2px 0 rgba(255,255,255,.6),
  0 2px 0 rgba(0,0,0,.1),
  inset 0 0 20px rgba(0,0,0,.1);
}
.button:hover {
  box-shadow: inset 0 0 20px rgba(0,0,0,.2),
  0 2px 0 rgba(255,255,255,.4),
  inset 0 2px 0 rgba(0,0,0,.1);
}
.btn-search{
  background: url(icon/magnifying_glass@2x.png) center center no-repeat;
}
.btn-registration{
  background: url(icon/plus@2x.png) center center no-repeat;
}
.btn-open{
  background: url(icon/arrow_up@2x.png) center center no-repeat;
}
a.help span{
  display: none;
}
a.help:hover{
  position: relative;
}
a.help:hover span#k1{
  position: fixed;
  display: block;
  right: 46px;
  top: 120px;
  border: solid 1px #000000;
  background: #ffffff;
  color: #000000;
  white-space: pre;
  padding: 2px;
}
a.help:hover span#k2{
  position: fixed;
  display: block;
  right: 166px;
  top: 120px;
  border: solid 1px #000000;
  background: #ffffff;
  color: #000000;
  white-space: pre;
  padding: 2px;
}
a.help:hover span#k3{
  position: fixed;
  display: block;
  right: 326px;
  top: 120px;
  border: solid 1px #000000;
  background: #ffffff;
  color: #000000;
  white-space: pre;
  padding: 2px;
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.07.2014, 21:19
Помогаю со студенческими работами здесь

Всплывающие подсказки для кнопок панели инструментов
Visual Studio 2008. Диалоговый проект MFC. Как установить всплывающие подсказки для кнопок панели...

Всплывающие подсказки для объектов unity c#
Доброго времени суток. Предупреждаю сразу, в Unity я новичок, так что... Нужно создать...

Реализовать всплывающие подсказки для элементов управления
Доброго времени суток, господа программисты! Подскажите. На форме есть рисунок. Можно ли сделать...

Как использовать всплывающие подсказки для компонентов
Есть ли в C# параметр аналогичный Hint (подсказка всплывающая при наведении курсора на объект...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru