Форум

Igor2001 · #1 (**permalink**) 27.11.2012, 12:57

Добрый день,

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

ksa · #2 (**permalink**) 27.11.2012, 13:55

Сообщение от 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>

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

Igor2001 · #3 (**permalink**) 27.11.2012, 14:53

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

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

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

ksa · #4 (**permalink**) 27.11.2012, 15:40

Сообщение от 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>

Igor2001 · #5 (**permalink**) 27.11.2012, 17:46

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

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

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

Форум

Справочник

Discord чат

Курсы javascript