Проблема со слоями за экраном

North-28 · August 2, 2011

Проблема заключается в том что бы спрятать изображения за экраном то есть за пределами видимой области.

При масштабировании сайта изображения левого и правого бекграунда должны выезжать либо заезжать соответственно за пределы видимой области (экрана.)

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

есть идеи?

Nekromancer · August 2, 2011

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
	html {overflow-y: auto; overflow-x: hidden;}
	body {
		min-width: 1000px; 
		width: 1000px;
		margin: 0 auto;
		height: auto;
		background: grey;
		position: relative;
	}
	#left, #right {
		position: absolute;
		top: 0;
		width: 500px;
		background: red;
		height: 100%;
	}
	#left {
		left: -500px;
	}
	#right {
		right: -500px;
	}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
</html>

UPD and Fixed

Vlad · August 2, 2011

Мне кажется проще объединить два фона в один и выровнять его по центру. У такого фона должна быть "дырка" по центру равная ширине контента.

North-28 · August 2, 2011

Мне кажется проще объединить два фона в один и выровнять его по центру. У такого фона должна быть "дырка" по центру равная ширине контента.

мне кажется с дыркой сильно увеличивается размер файла.. надо все по честному делать)

Vlad · August 2, 2011

Не видя самих изображений сложно сказать, насколько сильно увеличится.

ruslan.savenok · August 2, 2011

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


<div class="left-bg"></div>
<div class="right-bg"></div>

<div id="wrap">
</div>

.left-bg {
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  height: высота фона; /* если ваш фон повторяется то это точно с "дыркой" надо делать*/
}
.right-bg {
  width: 50%; 
  position: absolute;
  right: 0;
  top: 0;
  height: высота фона;
}
#wrap {
  width: 1000px;
  margin: 0 auto;
  /* эту часть есть ваш фон по причине разметки выше слоя с контентом*/
  position: relative;
  z-index: 10;
}

Edited August 2, 2011 by ruslan.savenok

North-28 · August 3, 2011

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
	html {overflow-y: auto; overflow-x: hidden;}
	body {
		min-width: 1000px; 
		width: 1000px;
		margin: 0 auto;
		height: auto;
		background: grey;
		position: relative;
	}
	#left, #right {
		position: absolute;
		top: 0;
		width: 500px;
		background: red;
		height: 100%;
	}
	#left {
		left: -500px;
	}
	#right {
		right: -500px;
	}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
</html>

UPD and Fixed

Большущее спасибо.. попробую применить на его на практике

Nekromancer · August 3, 2011

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
	html {overflow-x: auto; overflow-y: hidden;}
	body {overflow-y: auto; overflow-x: hidden; min-width: 1000px;}
	#conteiner {
		width: 1000px;
		margin: 0 auto;
		height: auto;
		background: grey;
		position: relative;
	}
	#left, #right {
		position: absolute;
		top: 0;
		width: 500px;
		background: red;
		height: 100%;
	}
	#left {
		left: -500px;
	}
	#right {
		right: -500px;
	}
</style>
</head>
<body>
<div id="conteiner">
<div id="left"></div>
<div id="right"></div>
<div id="main">
... Some content ...
</div>
</div>
</body>
</html>

Пофиксил горизонтальный скрол при уменьшении окна.

Sign In

Проблема со слоями за экраном

Question

North-28

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Nekromancer

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

North-28

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

ruslan.savenok

Link to comment

Share on other sites

North-28

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information