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

_Igor_ · November 26, 2012

Добрый день,

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

RodgerFox · November 26, 2012

что за бред?

#id_background {
    height:100%;
    width: 100%;
    }

Откуда берутся эти сотки?

И зачем этот блок, дай все нужные стили боди(body)... а если что перед ним есть еще шатамэлэ (html)!!!

_Igor_ · November 27, 2012

что за бред?
#id_background {
    height:100%;
    width: 100%;
    }
Откуда берутся эти сотки?

сотки для того, чтоб данный слой растянуть на весь экран по ширине и высоте.

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

_Igor_ · November 27, 2012

вопрос решён, всем спасибо.

Sign In

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

Question

_Igor_

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

RodgerFox

Link to comment

Share on other sites

_Igor_

Link to comment

Share on other sites

_Igor_

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information