LINUX.ORG.RU
Форум — Web-development  

Верстка блоков в html/css

 , , ,


0

1

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

В коде это выглядит так:

#body {
	background: url(logo.png);
	background-size: cover;
}

#a {
	position: absolute;
	width:42%;
	bottom: 4%;
	left: 5%;
}

#b {
	position: absolute;
	width:42%;
	left: 5%;
	top: 51%;
}
★★
← Как включить локализацию для bonecms/laravel-captcha ?
Почему PHP7 быстрее чем Python3? →

Ответ на: комментарий от MrClon

Ориентация и пропорции как и в маленьком разрешении. Подозреваю что при увеличении размера экрана, блоки вычисляют размеры от размера экрана, а не родительского блока.

Riniko ★★
() автор топика

Вариант с общим родителем для #a и #b, который ты позиционируешь как тебе нужно и уже отступами #a и #b подойдёт?

nutsandmilk ★★★
()
Ответ на: комментарий от nutsandmilk

Пойдёт. Общим родителем тут выступает фоновое изображение с параметром 

background-size: cover;
менял 
position: relative;
у #a и #b, позиционирование меняется немного. В этом направлении разбираться?

Riniko ★★
() автор топика
Последнее исправление: Riniko (всего исправлений: 1)
Ответ на: комментарий от Riniko

Но фоновое изображение не является родительским блоком (окей, body можно назвать родителем, но это странно). Тебе нужно #a и #b завернуть в #c и уже #c позиционировать

nutsandmilk ★★★
()
Ответ на: комментарий от nutsandmilk

А можно пример в коде этой реализации?

Догадываюсь что я чего-то в целом не понимаю и пишу говнокод. В примере с фоновым изображением, которое выступает как родитель, при изменении размера экрана появляется полоса прокрутки, пропорции не уменьшаются что бы соответствовать границам экрана/браузера. Это то что нужно.

Мне тогда вместо фона сделать какой-то прозрачный блок и фиксированными пропорциями и уже внутри него позиционировать? Если завернуть #a и #b в #c, то насколько понимаю, #c нужно будет позиционировать относительно чего-то? Если позиционировать относительно краёв монитора/браузера то вёрстка съедет как и прошлом варианте.

Riniko ★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Как включить локализацию для bonecms/laravel-captcha ?
Web-development
Почему PHP7 быстрее чем Python3? →