Добрый день,
Нужно сделать следующее: один слой растянуть на 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> |