Как сохранить расположение элемента при масштабировании?

@D@nger · Регистрация: 17.03.2014

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

Всем привет.
Возникла проблема, при уменьшении сайта в браузере (ctrl-), иконки смещаются в верхний правый угол.

Как сохранить расположение элемента при масштабировании?

P.S: Сайт пишу первый раз, HTML и CSS изучаю около недели. Знаю что нубо кода.

Комментарий модератора

Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... post594251

@Taatshi · 19.03.2014, 10:03

D@nger, кода нет, но попробую угадать.

Иконкам задано абсолютное позиционирование. Задайте родительскому блоку position:relative

@D@nger · 19.03.2014, 13:14 **[ТС]**

Taatshi, Что-то не со всем получается.
Вот код (повторюсь, знаю что нубо код).

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
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta name="keywords" content="" >
     <meta name="description" content="" >
     <link href="styles.css" rel="stylesheet">
     <title>Name</title>
</head>
<body>
      <div id="YT">
     <a href="#"><img src="images/youtube.png"></a>
     </div>
     <div id="VK">
     <a href="#"><img src="images/vk.png"></a>
     </div>
     <div id="FB">
     <a href="#"><img src="images/facebook.png"></a>
     </div>
     <div id="page_align">
         <div id="header">
        
             <ul>
                 <li><a href="#">Main</a></li>
                 <li><a href="#">Forum</a></li>
                 <li><a href="#">Info</a></li>
                 <li><a href="#">Radio</a></li>
                 <li><a href="#">Donate</a></li>
             </ul>
         </div>
         <div id ="img">
             <span>Надпись на лого</span>
             <img src = "images/logo.jpg" class = "img">
             <h1>Web Design</h1>
             <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nulla dui, pretium sit amet ultrices at, pulvinar in metus. Maecenas blandit erat sit amet pretium elementum. Donec ornare, lacus sed pretium vestibulum, lacus orci luctus nisl, ac rhoncus sapien dolor quis ipsum. Mauris varius, nisi at feugiat ultricies, sapien est semper elit, sit amet elementum orci est vel velit. Vivamus id nibh at quam gravida malesuada eget a quam. In sit amet faucibus quam. Aenean pulvinar risus id vestibulum elementum. Nulla ut quam eget turpis laoreet elementum. Duis tristique augue blandit, semper augue nec, facilisis velit. Duis laoreet, lorem quis tristique malesuada, neque ipsum pretium libero, id facilisis massa felis et velit. Mauris non orci augue. Donec semper dapibus leo et convallis. Integer a feugiat diam, fermentum elementum felis. Proin a enim lobortis, facilisis enim ultricies, suscipit nisl. Vivamus interdum felis sed nisi euismod, id ultricies sapien viverra.
             </p>
         </div>
         <div class="clr">
         </div>
         <ul id="gallery">
                 <li> <a href="#"><img src="http://placehold.it/200x100"></a></li>
                 <li> <a href="#"><img src="http://placehold.it/200x100"></a></li>
                 <li> <a href="#"><img src="http://placehold.it/200x100"></a></li>
             </ul>                   
     </div>
</body>
 
 
</html>

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
body{
     margin: 0; 
     padding: 0;
     background-image: url(images/bg3.jpg);
     background-color: #000;
     background-repeat: no-repeat;
     background-position: center top;
     background-attachment: fixed;
}
 
a {
     color: #333;
}
 
#YT {
     position: absolute;
     right: 30px;
     top: 20px;
}
 
#VK {
     position: absolute;
     right: 90px;
     top: 20px;
}
 
#FB {
     position: absolute;
     right: 150px;
     top: 20px;
}
 
#page_align{
     font-family: Arial, Calibri, Tahoma;
     font-size: 14px;
     color: #333;
     width: 990px;
     height: 490px;
     background: rgba(255,255,255,0.5);
     margin: 100px auto;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
     -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
     -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}
 
#header {
     width: 990px;
     height: 35px;   
     background: rgb(255,255,255);
     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YxZjFmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2UxZTFlMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
     background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));
     background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
     background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
     background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
     background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-top-right-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 5px;
     overflow: hidden;
     border-bottom: 1px solid #000;
}
 
#header ul {
     list-style: none;
     float: left;
     margin: 0;
     padding: 0;
}
 
#header ul li {
     float: left;
}
 
#header ul li a {
     text-decoration: none;
     padding: 0px 10px;
     height: 35px;
     display: block;
     line-height: 35px;  
     transition-property: all;
     transition-duration: 0.4s;
     transition-timing-function: ease-in-out;
     -moz-transition-property: all;
     -moz-transition-duration: 0.4s;
     -moz-transition-timing-function: ease-in-out;
     -webkit-transition-property: all;
     -webkit-transition-duration: 0.4s;
     -webkit-transition-timing-function: ease-in-out;    
}
 
#header ul li a:hover {
     background: #2fc5ff;    
}
 
#img {
     margin-left: 10px;
     margin-top: 10px;
     position: relative;
}
 
#img h1 {
     margin: 0;
     padding: 0;
     font-size: 16px;
     margin-left: 370px;
     border-bottom: dotted 1px #333;
     margin-right: 10px;
     margin-bottom: 5px;
     padding-bottom: 3px;
}
 
#img p {
     margin-left: 370px;
     margin-right: 10px;
}
 
#img span {
     position: absolute;
     bottom: 2px;
     background: rgba(0,0,0,0.4);
     color: #FFF;
     width: 347px;
     line-height: 25px;
     padding-left: 5px;
}
 
.img {
     border-radius: 5px;
     box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
     float: left;
     overflow: hidden;
}
 
#gallery {
     position: relative;
     list-style: none;
     float: left;
     margin-top: 300px;
     margin-left: 30px;   
}

@D@nger · 21.03.2014, 13:38 **[ТС]**

Подниму, все еще нужна помощь.

@denviii · 21.03.2014, 19:51

D@nger,

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#YT {
     position: relative;
     right: 30px;
     top: 20px;
}
 
#VK {
     position: relative;
     right: 90px;
     top: 20px;
}
 
#FB {
     position: relative;
     right: 150px;
     top: 20px;
}

@D@nger · 23.03.2014, 09:18 **[ТС]**

denviii, пробовал, не помогает.

@Taatshi · 23.03.2014, 14:41

D@nger, фишка в том, что у Вас иконки находятся прямо в body, а значит, позиционируются относительно границ body, которое по умолчанию всегда шириной в 100%. То есть - от правого края монитора.

Поместите их в еще один див и задайте ему ширину и margin: 0 auto; И в нем уже позиционируйте иконки. Абсолют там совершенно не нужен, лучше воспользуйтесь свойствами float:right и padding

И старайтесь ничего абсолютом не позиционировать до того самого момента, когда без него уже ну никак нельзя обойтись.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	19.03.2014, 10:03
	D@nger, кода нет, но попробую угадать. Иконкам задано абсолютное позиционирование. Задайте родительскому блоку position:relative 0

@D@nger 1 / 1 / 1 Регистрация: 17.03.2014 Сообщений: 80
	21.03.2014, 13:38 [ТС]
	Подниму, все еще нужна помощь. 0

@D@nger 1 / 1 / 1 Регистрация: 17.03.2014 Сообщений: 80
	23.03.2014, 09:18 [ТС]
	denviii, пробовал, не помогает. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	23.03.2014, 14:41
	D@nger, фишка в том, что у Вас иконки находятся прямо в body, а значит, позиционируются относительно границ body, которое по умолчанию всегда шириной в 100%. То есть - от правого края монитора. Поместите их в еще один див и задайте ему ширину и margin: 0 auto; И в нем уже позиционируйте иконки. Абсолют там совершенно не нужен, лучше воспользуйтесь свойствами float:right и padding И старайтесь ничего абсолютом не позиционировать до того самого момента, когда без него уже ну никак нельзя обойтись. 1