VPF::Фон вылезает за пределы дива - Форум программистов

FightInGlory

Дата 11.1.2010, 15:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1

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;}

Проблема в том, что backround

Код

#frame .bottom {background:url(images/img04.jpg) no-repeat left bottom; position:absolute; bottom:0;}

вылезает за пределы дива, опускается на самый низ страницы. А этот фон

Код


#frame .top {background:url(images/img02.jpg) no-repeat left top; position:absolute; top:0;}

закрывает див, налаживается на все дивы поверх, а не применяется самому нижнему.

Ниже прикреплен архив со всеми файлами.

Это сообщение отредактировал(а) FightInGlory - 11.1.2010, 15:49

Присоединённый файл ( Кол-во скачиваний: 5 )

________.rar 14,38 Kb

FightInGlory

Дата 12.1.2010, 14:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1

Чтоб нижний фон стал на место как надо, а не вылезал за пределы дива, надо было добавить position:relative в #frame.
Со второй проблемой решения пока что не нашел. Заметил то, что если position:absolute сменить на position:relative в классах top и bottom, то фон вообще исчезает, а фон #frame ложится под дивы как я и хотел. Мне сказали что проблему можно решить свойством z-index, но пока у меня ничего не получается.

FightInGlory

Дата 12.1.2010, 17:07 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1

Решить проблему z-index не получалось, возможно я пользоваться им не умею)
Добавил два дива в главный див, а им соответственно добавил фон. И вроде как получилось.
Спасибо что никто ничем не помог)

bars80080

Дата 12.1.2010, 18:41 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(FightInGlory @ 12.1.2010, 16:07

)

Спасибо что никто ничем не помог)

да всегда пожалуйста

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »