Javascript-форум - Подскажите по наложению слоёв

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Подскажите по наложению слоёв (https://javascript.ru/forum/xhtml-html-css/33544-podskazhite-po-nalozheniyu-slojov.html)

Подскажите по наложению слоёв

Добрый день,

Нужно сделать следующее: один слой растянуть на 100% по ширине и длине окна, который будет фоном, и второй слой заданной ширины, разместить по центру страницы с заданным отступом сверху. Сверстал небольшой пример нужной страницы, проверил в 4-х браузерах IE9, FF11, Chrome и Opera 12.11.
Корректно отображается только в опере, в мозиле и хроме бэкграунд сверху смещается на 100px, а в IE9 сверху отступа нет, но бэкграунд съезжает в сторону. Подскажите чего не хватает?

Код:

Код:

<!DOCTYPE html>

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Наложение слоёв</title>

  <style type="text/css"> 



body{

    margin: 0 0 0 0;

    background: #FFFFFF; /* Цвет фона содержимого */

    }

      

#id_background {

    position: absolute; /* Абсолютное позиционирование */

    background: #e0e0e0; /* Цвет фона */

    margin: 0px auto 0px;

    height:100%;

    width: 100%;

    z-index: -5000;

    }



#id_content { /* Этот слой накладывается поверх */ 

    position: relative; /* Относительное позиционирование */

    margin: 100px auto;

    width: 770px; /* Ширина верхнего слоя */

    height: 1500px; /* Высота верхнего слоя */

    background: #cccccc; /* Цвет фона */

    color: #000; /* Цвет текста */

    z-index: 5;

    }

  </style>

 </head>

<body>

  <div id="id_background"></div>

  <div id="id_content">содержание страницы</div>

</body>

</html>

Цитата:

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

один слой растянуть на 100% по ширине и длине окна, который будет фоном, и второй слой заданной ширины, разместить по центру страницы с заданным отступом сверху.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
	width: 100%;
}
#fon {
	min-height: 100%;
	background-color: #e0e0e0;
}
#content_tab {
	/* тот самый отступ */
	height: 20px;
}
#content {
	margin-left: auto;
	margin-right: auto;
	width: 770px;
	height: 50px;
	background-color: #cccccc;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='fon'>
	<div id='content_tab'></div>
	<div id='content'></div>
</div>
</body>
</html>

Работает в Опере, ФФ, Хроме и ИЕ...

Цитата:

Сообщение от ksa (Сообщение 218155)

Как вариант...

Такой вариант не подойдет, т.к. нужно чтоб при скроллинге содержимого ниже экрана был белый цвет который задан в body как бэкграунд. Кроме того, в этот див (id_background) планируется вставлять кликабельную картинку или флэшку.

Цитата:

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

нужно чтоб при скроллинге содержимого ниже экрана был белый цвет который задан в body как бэкграунд

Лёгким движением руки брюки превращаются в оригинальные шорты... (с)

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
	width: 100%;
}
body {
	background-color: #ffffff;
}
#fon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e0e0e0;
}
#content_tab {
	/* тот самый отступ */
	height: 20px;
}
#content {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 770px;
	height: 700px;
	background-color: #cccccc;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='fon'></div>
<div id='content_tab'></div>
<div id='content'></div>
</body>
</html>

Цитата:

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

Лёгким движением руки брюки превращаются в оригинальные шорты... (с)

спасибо, то что нужно :thanks: