backround div-а вылезает за пределы

[FightInGlory]

HTML код:

<div id="frame">
   <i class="top"></i>
   <i class="bottom"></i>
  <div id="header"></div>
   <div id="main">
      <div id="content"></div>
      <div id="menu"></div>
   </div>
   <div id="footer"></div>
</div>

CSS код:

* {padding:0; margin:0}
body {background:#B29269 url(images/img01.jpg) repeat-x left top;}
   #frame {width:860px; height:100%; margin:0 auto; border:1px black solid; /*background:url(images/img03.jpg) repeat-y left top;*/}
      #frame i {width:860px; height:100%; position:relative; display:block;}
         #frame .top {background:url(images/img02.jpg) no-repeat left top; position:absolute; top:0;}
         #frame .bottom {background:url(images/img04.jpg) no-repeat left bottom; position:absolute; bottom:0;}
   #header {width:780px; height:150px; margin:0 auto; border:1px black dashed; margin-top:30px; background:#5C3F1C;}
   #main {width:780px; height:400px; margin:0 auto; border:1px black dashed;} 
   #content {width:539px; height:400px; border:1px dashed black; float:left;} 
   #menu {width:237px; height:400px; border:1px dashed black; float:right;}
   #footer {width:780px; height:50px; margin:0 auto; border:1px dashed black; margin-bottom:40px; background:#5C3F1C;} 

Проблема №1 заключается в том, что фон тега <i></i>, принадлежащей классу bottom вылезает за пределы дива. Он опускает на самый низ страницы, а должен опустится в низ дива.

Проблема №2 фон класса top закрывает дивы которые находятся над ним.

Скачать архив с версткой

Размер архива 15 кб.

[psywalker]

Покажи скрин того, что хочешь получить с подробным объяснением

[rus]

По первой проблеме быть может оверфлоу:хидден; а по второй быть может позишен:абсолют; либо зет-индекс: ...;

[FightInGlory]

Спасибо за помощь, во втором я разобрался, просто в строке

#frame {width:860px; height:100%; margin:0 auto; border:1px black solid;}

надо было добавить

position:relative;

footer теперь стоит как мне надо, но он закрывает остальные дивы как и background класса top.

Вот скрин, на нем четко видно, как верхний top и нижний bottom background закрываю div который внутри. Я хочу чтобы фон id frame классов top и bottom был под всеми остальными дивами, а не накрывал их поверх.

Ссылка на скрин

2 rus чем мне поможет свойство overflow:hidden если скрывать нечего? у меня фон строго под размеры самого дива, он влезал без проблем.

z-index не помогает, в решении проблемы.

Edited January 11, 2010 by FightInGlory

[rus]

Нужна ссылка на страницу.

[FightInGlory]

Я же прикрепил архив. Он не устраивает?

Я заметил такую странность. Если в классах top и bottom задаю параметр position:absolute; то фон этих классов и фон id frame ложится поверх всех дивов. Если установить параметр position:relative; в этих классах, то фон id frame отображается корректно, но вообще не отображаются фоны классов top и bottom.

[rus]

Мне не интересно скачивать архив.

А чем вас не устраивает на какой-нить бесплатный хост закинуть?

К тому же с проблемой не я к вам пришел, а вы на форум.

[psywalker]

Мне не интересно скачивать архив.

А чем вас не устраивает на какой-нить бесплатный хост закинуть?

К тому же с проблемой не я к вам пришел, а вы на форум.

Присоединяюсь, считаю, что если ты занимаешься вебом, то хост и сервак тебе необходим. Рано или поздно пригодиться как минимум.