ещё один вопрос по дивам: резина @ DeForum.ru

Хочу сделать резиновый по высоте div с рисунками сверху и снизу и с фоном позади.
Вот что получается (точнее, не получается):

– серый прямоугольник – это родительский див для двух других. В нём же прописан повторяющийся фон;
– над ним div (layer1) имеет z-index: 1. Это небольшая картинка (зелёный цвет);
– ещё выше div "layer2". Он включает в себя две картинки (зелёные) и текст (голубой цвет);

CSS:

Код:

.spannn {
   width:500px;
   position:relative;
   background: url(такой-то);   
}
#layer1 { position: relative; z-index:1; margin:0px; }
#layer2 { position: relative; top: -377px; z-index:2; }

HTML:

Код:

<div class="spannn">
     <div id="layer1">
          <img src="такой-то" />
     </div>
     <div id="layer2">
          <img src="такой-то" />
          <p>текст</p>
          <img src="такой-то" />
     </div>
</div>

Проблема в том, что когда я добавляю какое-то содержимое в самый верхний див, будь-то буква или картинка или ещё что-то, самый нижний див (серый) удлинняется (красный пунктир) на высоту добавляемого контента ("х" на рисунке), а вместе с ним продолжается и фон.

Что я делаю не так?

вовсе не понятна задача, совсем.
Смысла засовывать рилейтив в рилейтив нет: рилейтив нужен для своего чайлда, если тот — абсолют или фиксед (по-моему).
Что вам мешает засунуть контент и картинки из лэер2 прямо в спаннн, картинку из лэер1 сделать его фоном, а фон из спаннн-а назначить фоном для бади? Итого — 1 блок вместо 3.
Вы видимо не полностью обрисовали задачу: совсем не понятно, как обстоят дела с окружением и соседними по потоку и дизайну блоками. Например, совсем не ясно, что такое и почему «top: -377px» ?

karamba писал(а):

Что вам мешает засунуть контент и картинки из лэер2 прямо в спаннн, картинку из лэер1 сделать его фоном, а фон из спаннн-а назначить фоном для бади?

не могу назначить фон из spannn для всего body, так как тут на схеме изобразил только кусочек сайта. А для всего бади фон другой.

karamba писал(а):

Вы видимо не полностью обрисовали задачу: совсем не понятно, как обстоят дела с окружением и соседними по потоку и дизайну блоками. Например, совсем не ясно, что такое и почему «top: -377px» ?

да, упустил этот момент. Это только один из многочисленных дивов на сайта - везде, вокруг него, и сверху и снизу и по бокам есть другие дивы.
В данном случае 377px – это высота картинки из layer1. На это растояние я двигаю вверх layer2 для того, чтобы layer1 и layer2 выровнялись по верхнему краю.

ваш коммент не прояснил ситуацию.
Лэер1 вам не нужен. Пусть остается спаннн как контейнер для локального фона, без указания высоты и позишна за ненадобностью. Картинка из лэер1 становится фоном для лэер2, а чтобы она не загромождалась (если таковое необходимо) его верхней картинкой текстом — используйте для него паддинг-топ. Нижнюю же картинку кладите как картинку просто под текст. Никакие позишны не нужны, з-индексы — тем более.

karamba, да, спасибо. Этот способ действительно нормальный в отличие от моего

P.S. Мама всегда говорила, ложись спать по-раньше – не сиди до поздна :laugh:

DeДверь
Логин:
Пароль:
	Автологин