Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.08.2017, 01:55   #1
eqdqdqwqws
Новичок
Джуниор
 
Регистрация: 28.08.2017
Сообщений: 1
По умолчанию Размер окна и абсолютное позиционирование

Друзья, я только начинаю изучать css и html, будьте снесходительны.
Я сверстал на коленке сайт (или скорее картинку) через абсолютное позиионирование, знаю что код отвратителен, но выглядит красиво и нормально.

Вопрос в следующем, при сжимании окна элементы начинают наезжать друг на друга (что и логично, ведь они абсолютные и заданы от разных сторон), но я не понимаю как это прекратить, мне просто ничего не приходит в голову, кроме логичного решания задать для body минимальную ширину типо:
Код:
min-width: 800px;
min-height: 800px;
или даже не минимальную:
Код:
width: 800px;
height: 800px;
,но никакие ограничения не работают, у меня такое ощущение что я данном случае установление размеров просто не действует, потому что страница ведет себя абсолютно так же, как и без этих width и height
Вопрос: почему браузер отказывает задавать фиксированный размер body и что с этим делать?

Собственно код:
Код:
<!DOCTYPE html>
<html lang="ru">
    
<head>
  <title>Пёся</title>
  <meta charset="utf-8">
  <style>
  body {
  	background-color: #CCFFFF;
  	overflow: hidden;
  	padding: 0;
  }

  .zz {
  	width: 800px;
  }

  .land {
  	width: 120%;
  	height: 240px;
  	background-color: #009933;
  	margin-left: -10px;
  	position: absolute;
  	bottom: 0px;
  	right: 0px;
  	box-shadow: 0px 0px 8px 0px black;

  }

  @keyframes cloud {
  	100% {
  		transform: translateX(-1500px);
  	}
  }

  .cloud {
  	width: 200px;
  	float: right;
  	margin-right: -250px;
  	animation-name: cloud;
  	animation-duration: 17s;
  	animation-timing-function: linear;
  	animation-iteration-count: infinite;
  }


.cloud2 {
	animation-delay: 7.5s;
	margin-top: 70px;
}

.sun {
	width: 200px;
}

.dog {
	width: 300px;
	position: absolute;
	bottom: 40px;
	left: 40px;
	filter: drop-shadow(3px 3px 4px black);
}

.mini-cloud {
	width: 300px;
	position: absolute;
	bottom: 270px;
	left: 350px;
	display: none;

}

.dog:hover ~ .mini-cloud,
.dog:hover ~ .span-1{
	display: block;
}

.span-1 {
	position: absolute;
	bottom: 410px;
	left: 440px;
	font-size: 40px;
	display: none;
}

.span-11 {
	bottom: 360px;
	left: 450px;
}

.dog-2 {
	width: 300px;
	filter: drop-shadow(-3px -3px 4px black);
	transform: scale(-1, 1);
	position: absolute;
	bottom: 40px;
	right: 60px;
}

.mini-cloud-2 {
	width: 300px;
	position: absolute;
	bottom: 270px;
	right: 370px;
	transform: scale(-1, 1);
	display: none;
}

.span-2 {
	position: absolute;
	bottom: 410px;
	right: 465px;
	font-size: 40px;
	display: none;

}

.span-22 {
	position: absolute;
	bottom: 370px;
	right: 440px;
	font-size: 30px;
}

.dog-2:hover ~ .mini-cloud-2,
.dog-2:hover ~ .span-2{
	display: block;
}


  </style>



</head>
<body>
	<div class = 'zz'>
	<div class = 'land'>
	</div>

	<img class = 'sun' src = 'http://clipart-library.com/image_gallery2/Sun-PNG-Clipart.png'>
	</img>

	<img class = 'cloud' src = 'https://openclipart.org/image/2400px/svg_to_png/28302/jean-victor-balin-cloud.png'>
	</img>

	<img class = 'cloud cloud2' src = 'https://openclipart.org/image/2400px/svg_to_png/28302/jean-victor-balin-cloud.png'>
	</img>

	<img class = 'dog' src = 'https://cdn.pixabay.com/photo/2013/07/12/16/27/dog-150923_640.png'>
	</img>

	<img class = 'mini-cloud' src = 'http://clipart-library.com/images/M8cAEr6Ta.png'> <span class = 'span-1'>УФ УФ</span>
	<span class = 'span-1 span-11'>я пёся</span>
	</img>

	<img class = 'dog-2' src = 'https://cdn.pixabay.com/photo/2013/07/12/16/27/dog-150923_640.png'>
	</img>

	<img class = 'mini-cloud-2' src = 'http://clipart-library.com/images/M8cAEr6Ta.png'> <span class = 'span-2'>УФ УФ</span>
	<span class = 'span-2 span-22'>я тебя люблю</span>
	</img>
</div>

</body>
</html>

Последний раз редактировалось eqdqdqwqws; 28.08.2017 в 01:59.
eqdqdqwqws вне форума Ответить с цитированием
Старый 28.08.2017, 11:20   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от eqdqdqwqws Посмотреть сообщение
Вопрос: почему браузер отказывает задавать фиксированный размер body и что с этим делать?
Он не отказывает, а задает. Этого не заметно по двум причинам:
1. overflow: hidden; скрывает полосы прокрутки, но средней кнопкой мыши можно сдвинуть экран на винде, чтобы в этом убедиться.
2. абсолютно расположенные элементы позиционируются в контексте окна, а не body. Контекст позиционирования задается для абсолюта задается, как не странно, свойством position со значением отличным от static.

Вкратце: задай для body { position: relative; }, и все заработает как ты задумал.
PS: <img/> — не блочный тег.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
размер окна horpenst Windows 7 08.05.2017 14:41
Абсолютное позиционирование криво работает на длинном по высоте лэндинге NDanilov2015 HTML и CSS 1 10.08.2015 16:12
Абсолютное позиционирование таблицы vlad-55 HTML и CSS 4 11.03.2012 23:40
Размер окна в С++ Krezol Помощь студентам 1 02.04.2010 20:53
Размер окна в зависимости от размера окна Reverent JavaScript, Ajax 1 02.02.2008 15:49