Как закрепить элементы, чтобы при масштабировании браузера они не слезали?

@inquisitor · Регистрация: 22.12.2015

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Безымянная страница</title>
</head>
<body>
   <div id="Image1" style="position:absolute;width:100%;z-index:0;">
      <img src="images/01.png" id="indexImage1" alt="">
   </div>
   <div id="Image2" style="position:absolute;left:1364px;top:14px; z-index:1;">
      <img src="/images/vk.png" id="indexImage2" alt="">
   </div>
   <div id="Image3" style="position:absolute;left:1410px;top:14px;z-index:2;">
      <img src="images/fb.png" id="indexImage3" alt="">
   </div>
   <div id="xImage4" style="position:absolute;left:1459px;top:14px;z-index:3;">
      <img src="images/In.png" id="indexImage4" alt="">
   </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
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
   margin: 0;
   padding: 0;
}
#indexImage1
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#indexImage2
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#indexImage3
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#indexImage4
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

Image1 =1920px.

Добавлено через 10 минут
Может изображение 01.png сделать фоном таблицы или div только как bacround не срабатывает и изображение не появляется

HTML5
1
 <table background="images/01.png" width="600">

а поверх сделать таблицу в с тремя ячейками.В третью что справа и поместить эти иконки соц сетей 49Х46 px

@dzendev · 14.10.2017, 17:41

метастазировании браузера

Что это такое?

Потому что если посмотреть определение метастазирования...

Метастази́рование — процесс образования вторичных очагов опухолевого роста (метастазов) в результате распространения клеток из первичного очага в другие ткани.

получается очень смешно.

@inquisitor · 14.10.2017, 20:56 **[ТС]**

маштабировании

@dzendev · 14.10.2017, 21:34

Всё равно не понятно что Вы хотите получить.
Вот так Ваш код отображается. Что там не должно слетать?

Как закрепить элементы, чтобы при масштабировании браузера они не слезали?

@inquisitor · 15.10.2017, 03:46 **[ТС]**

Сами иконки vk/fb/In их left/top при маштабировании уносит сами элементы со своего места.

@dzendev · 15.10.2017, 12:09

Может скрин сделаете того что нужно получить?

@inquisitor · 15.10.2017, 16:47 **[ТС]**

Есть пять экранов,на каждом из них по три радиокнопки.Нужно сделать,что бы в них можно было мышкой включать по одному радиобоксу за раз.
121.rar

@dzendev · 15.10.2017, 17:59

Непонятно как это относится к сути темы, которая была задана изначально. Вопрос был в том, что при масштабирование изображения слетали. Сейчас же речь идёт о радиокнопках.

Ну да ладно. Вот радиокнопки стилизованные с помощью css.
https://codepen.io/anon/pen/XexRqd

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Radio and Checkbox css</title>
    <style>
        label{
            display: inline-block;
            cursor: pointer;
            font: 14px Arial;
            margin-left: 10px;
        }
        label input[type=radio]{
            display: none;
        }
        label input+i{
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid red;
            border-radius: 50%;
            background: transparent;
            transition: .4s;
            position: relative;
            top: 5px;
            left: -4px;
        }
        label input:checked+i{
            background: red;
        }
    </style>
</head>
<body>
    <form>
        <label><input type="radio" value="check-1" name="radio-but" checked><i></i>Радио кнопка 1</label>
        <label><input type="radio" value="check-2" name="radio-but"><i></i>Радио кнопка 2</label>
        <label><input type="radio" value="check-3" name="radio-but"><i></i>Радио кнопка 3</label>
    </form>
</body>
</html>

@inquisitor · 15.10.2017, 18:13 **[ТС]**

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

background: red;

они всего красного цвета.Да это к другой ветки.Там просто нужно,что на каждом слое(экране) были свои радиокнопки со своими цветами.

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

HTML5
1
2
3
 <label><input type="radio" value="check-1" name="radio-but" checked><i></i>Радио кнопка 1</label>
        <label><input type="radio" value="check-2" name="radio-but"><i></i>Радио кнопка 2</label>
        <label><input type="radio" value="check-3" name="radio-but"><i></i>Радио кнопка 3</label>

нужно,что бы все три радиокнопки были с вашими параметрами в одну строку,а сейчас третья уходит на вторую строку.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	14.10.2017, 20:56 [ТС]
	маштабировании 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	14.10.2017, 21:34
	Всё равно не понятно что Вы хотите получить. Вот так Ваш код отображается. Что там не должно слетать? 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	15.10.2017, 03:46 [ТС]
	Сами иконки vk/fb/In их left/top при маштабировании уносит сами элементы со своего места. 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	15.10.2017, 12:09
	Может скрин сделаете того что нужно получить? 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	15.10.2017, 16:47 [ТС]
	Есть пять экранов,на каждом из них по три радиокнопки.Нужно сделать,что бы в них можно было мышкой включать по одному радиобоксу за раз. 121.rar 0