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

@Арти7030 · Регистрация: 27.12.2012

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>

@vovandr · 15.07.2014, 11:41

Попробуйте вместо left... Поставить right:0

@Арти7030 · 15.07.2014, 12:12 **[ТС]**

vovandr, нет

Добавлено через 22 минуты
Ну верстальщики "от бога", ещё варианты.

@vovandr · 15.07.2014, 12:22

Сообщение от Арти7030

Ну верстальщики "от бога", ещё варианты.

ссылку на сайт киньте, не понятна ситуация, надо визуально видеть что происходит

@Арти7030 · 15.07.2014, 17:30 **[ТС]**

vovandr, проблема в том что кнопки в правом углу не дают пододвинуть меню к правой стороне блока. Помогите сделать обтекание или что там надо сделать.

@maximus2011 · 15.07.2014, 17:45

так у вас конечно, вы видите какое позиционирование у подсказок. И у <a> у вас почему-то position:relative; стоит при событии hover.

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

Если же таких не найдется, элемент с абсолютным позиционированием будет брать свои координаты от body

@Арти7030 · 15.07.2014, 17:54 **[ТС]**

maximus2011, с подсказками вопрос уже решен. другой вопрос чуть выше. Можете помочь?

@maximus2011 · 15.07.2014, 18:05

ну тут надо смотреть на разметку макета в коде

@Арти7030 · 15.07.2014, 21:19 **[ТС]**

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;
}

Новые блоги и статьи Все статьи Все блоги /
Java Micronaut в Docker: контейнеризация с Maven и Jib Javaican 16.03.2025 Когда речь заходит о микросервисной архитектуре на Java, фреймворк Micronaut выделяется среди конкурентов. Он создан с учётом особенностей облачных сред и контейнеров, что делает его идеальным. . .	Управление зависимостями в Java: Сравнение Spring, Guice и Dagger 2 Javaican 16.03.2025 Инъекция зависимостей (Dependency Injection, DI) — один из фундаментальных паттернов проектирования, который радикально меняет подход к созданию гибких и тестируемых Java-приложений. Суть этого. . .	Apache Airflow для оркестрации и автоматизации рабочих процессов Mr. Docker 16.03.2025 Управление сложными рабочими процессами — одна из главных головных болей инженеров данных и DevOps-специалистов. Представьте себе: каждый день нужно запускать десятки скриптов в определенной. . .	Оптимизация приложений Java для ARM Javaican 16.03.2025 ARM-архитектура переживает настоящий бум популярности в технологическом мире. Когда-то воспринимаемая исключительно как решение для мобильных устройств и встраиваемых систем, сегодня она штурмует. . .	Управление состоянием в Vue 3 с Pinia и Composition API Reangularity 16.03.2025 Когда я начал работать с Vue несколько лет назад, мне казалось достаточным использовать простую передачу данных через props и события между компонентами. Однако уже на среднем по сложности проекте. . .
Введение в DevSecOps: основные принципы и инструменты Mr. Docker 16.03.2025 DevSecOps - это подход к разработке программного обеспечения, который объединяет в себе принципы разработки (Dev), безопасности (Sec) и эксплуатации (Ops). Суть подхода заключается в том, чтобы. . .	GitHub Actions vs Jenkins: Сравнение инструментов CI/CD Mr. Docker 16.03.2025 В этой битве за эффективность и скорость выпуска программных продуктов ключевую роль играют специализированные инструменты. Два гиганта в этой области — GitHub Actions и Jenkins — предлагают разные. . .	Реактивное программирование с Kafka Stream и Spring WebFlux Javaican 16.03.2025 Реактивное программирование – это программная парадигма, ориентированная на потоки данных и распространение изменений. Она позволяет выражать статические или динамические потоки данных и. . .	Простая нейросеть на КуМир: Учебное пособие по созданию и обучению нейронных сетей EggHead 16.03.2025 Искусственные нейронные сети — удивительная технология, позволяющая компьютерам имитировать работу человеческого мозга. Если вы хотя бы немного интересуетесь современными технологиями, то наверняка. . .	Исполнитель Кузнечик в КуМир: Решение задач EggHead 16.03.2025 Среди множества исполнителей в системе КуМир особое место занимает Кузнечик — простой, но невероятно полезный виртуальный персонаж, который перемещается по числовой прямой, выполняя ваши команды. На. . .

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

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	15.07.2014, 12:12 [ТС]	3
	vovandr, нет Добавлено через 22 минуты Ну верстальщики "от бога", ещё варианты. 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	15.07.2014, 12:22	4
	Сообщение от Арти7030 Ну верстальщики "от бога", ещё варианты. ссылку на сайт киньте, не понятна ситуация, надо визуально видеть что происходит 0

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	15.07.2014, 17:30 [ТС]	5
	vovandr, проблема в том что кнопки в правом углу не дают пододвинуть меню к правой стороне блока. Помогите сделать обтекание или что там надо сделать. Миниатюры 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.07.2014, 17:45	6
	так у вас конечно, вы видите какое позиционирование у подсказок. И у <a> у вас почему-то position:relative; стоит при событии hover. Если у любого элемента, в который вложен блок с абсолютным позиционированием не будет прописано свойство position:relative; Вложенный элемент с абсолютной позицией будет брать свои координаты от ближайшего родителя, а этим родителем будет первый ближайший элемент с position:relative; Если же таких не найдется, элемент с абсолютным позиционированием будет брать свои координаты от body 0

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	15.07.2014, 17:54 [ТС]	7
	maximus2011, с подсказками вопрос уже решен. другой вопрос чуть выше. Можете помочь? 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	15.07.2014, 18:05	8
	ну тут надо смотреть на разметку макета в коде 0

Опции темы