Проблема с резиновым фоном div'a

2m2 · September 14, 2011

На странице 3 картинки для фона: хедер - bg-top.jpg,

ниже где контент - middle.jpg (пытаюсь использовать в качестве фона как <img> чтобы растянуть по высоте и ширине от конца header'a до начала bottom'а)

и bottom - bottom-min.jpg, который по идее должен быть прижат к низу страницы, но никак не хочет этого делать.

Подскажите что как тут быть?


<style type="text/css">
    *{margin:0;padding:0;}
    html, body{
	width:100%;
	height:100%;
	min-width:1000px;
    }
	.note{
	border:1px solid #ddd;
	margin:2% 7% 0 0px;
	width:55%;
	float:right;
	min-height:500px;
	height:auto !important;
	height:500px;
	position:relative;
    }
    .trans{
	background:#fff;
	opacity:0.4;
	position:absolute;
	height:100%;
	width:100%;
    }
    .text{
	position:relative;
	padding:10px;
    }
    #page{
	position:absolute;
	top:0;bottom:0;right:0;left:0;
	z-index:100;
    }    
    #fon{
	height:100%;
	width:100%;
	z-index:1;

	}
	#fon img{
	height:100%;
	width:100%;
	position:absolute;
    }
    </style>
  </head>
  <body bgcolor="#000c56">
  <div class="top" style="width: 100%; position: absolute; top: 0; background:url(index_files/bg-top.jpg); background-repeat: no-repeat; background-position: center bottom; background-color:#21cff2; height: 374px;">
</div>
  <div id="page2" style=" z-index:100; margin-top:374px; margin-bottom:328px; height:auto">
    <div id="page" >
    <div class="note">
        <div class="trans"></div>
        <div class="text">
	  Страница (page) <p><br /></p>
	  <div style="height:1000px">asd</div>
	</div>
      </div>
 </div>
      <div id="fon">
      <img src="index_files/middle.png" alt="" />
     </div>
</div>


<div class="bottom-bg" style="width: 100%; position: absolute; bottom: 0; height: 328px;">
<div id="fon">
      <img src="index_files/bottom-min.jpg" alt="" />
</div>
</div>

psywalker · September 14, 2011

Сделай скриншоты того, как должно быть и как не должно. И приведи ссылку на тестовую страницу.

sigma77 · September 14, 2011

2m2,

У тебя не задана высота у родителей. Соответственно высчитывать 100% неоткуда. Вместо этого задай координаты - top/left/right/bottom

amelice · September 14, 2011

2m2,
У тебя не задана высота у родителей. Соответственно высчитывать 100% неоткуда. Вместо этого задай координаты - top/left/right/bottom

У него заданы координаты во внутренних ситлях для родителей.


<div class="bottom-bg" style="width: 100%; position: absolute; bottom: 0; height: 328px;">
<div id="fon">
      <img src="index_files/bottom-min.jpg" alt="" />
</div>
</div>

Может ему нужно img сделать блочным?

2m2 · September 14, 2011

Сделай скриншоты того, как должно быть и как не должно. И приведи ссылку на тестовую страницу.

Ссылка на изображение (как должно быть) и тестовую страницу (как сейчас есть)

хттп://narod.ru/disk/25090986001/test.rar.html

sigma77 · September 14, 2011

У него заданы координаты во внутренних ситлях для родителей.
А растянуть нужно картинку )
Может ему нужно img сделать блочным?
Это лишнее. position: absolute сам по себе делает элемент блочным.

amelice · September 14, 2011

А растянуть нужно картинку )
Может ему нужно img сделать блочным?
Это лишнее. position: absolute сам по себе делает элемент блочным.

а я пропустила вот этот кусок.

#fon img{
        height:100%;
        width:100%;
        position:absolute;
    }

тогда, да, это лишнее.

Сделай скриншоты того, как должно быть и как не должно. И приведи ссылку на тестовую страницу.
Ссылка на изображение (как должно быть) и тестовую страницу (как сейчас есть)
хттп://narod.ru/disk/25090986001/test.rar.html

Заводите бесплатный хостинг, заливайте туда файлы тестовые с изображениями. А нам сюда ссылку.

Edited September 14, 2011 by cheburek

2m2 · September 14, 2011

Заводите бесплатный хостинг, заливайте туда файлы тестовые с изображениями. А нам сюда ссылку.

jqs-s.narod2.ru/img.html

картинка как должно быть - jqs-s.narod2.ru/primer.jpg

Edited September 14, 2011 by 2m2

amelice · September 14, 2011

На странице 3 картинки для фона: хедер - bg-top.jpg,
ниже где контент - middle.jpg (пытаюсь использовать в качестве фона как <img> чтобы растянуть по высоте и ширине от конца header'a до начала bottom'а)
и bottom - bottom-min.jpg, который по идее должен быть прижат к низу страницы, но никак не хочет этого делать.
Подскажите что как тут быть?
_jqs-s.narod2.ru/img.html
картинка как должно быть - _jqs-s.narod2.ru/primer.jpg

1. Проблема в том что вы используете этот стиль для среднего и нижнего областей.

     
        #fon img{
        height:100%;
        width:100%;
        position:absolute;
    }

в обоих случаях не подходит:

1. для средней области как высоту родителя вы берете высоту html (позиционирована относительно html), то есть растягиваете блок, у вас появляются прокрутки.

2. для нижней области задана высота родителя(height: 328px), но родитель сам является абсолютом и позиционирован(bottom: 0) также относительно html.

Теперь интересное в этом:

Вы растянули средний блок. Он сам по себе (абсолют) ни от кого не зависит. А нижний блок болтается не на конце страницы где вы хотели видеть, а где окно просмотра заканчивается(так как был позиционирован относительно html).


  <body bgcolor="#000c56">
  <div class="top" style="width: 100%; position: absolute; top: 0; background:url(index_files/bg-top.jpg); background-repeat: no-repeat; background-position: center bottom; background-color:#21cff2; height: 374px;">
</div>

  <div id="page2" style=" z-index:100; margin-top:374px; margin-bottom:328px; height:auto">
    <div id="page" >
    <div class="note">
        <div class="trans"></div>
        <div class="text">
          Страница (page) <p><br /></p>
          <div style="height:1000px">asd</div>
        </div>
      </div>
 </div>
 [b]<div id="fon">
   <img src="index_files/middle.png" alt="" />
 </div>[/b]
</div>


<div class="bottom-bg" style="width: 100%; position: absolute; bottom: 0; height: 328px;">
[b]<div id="fon">
      <img src="index_files/bottom-min.jpg" alt="" />
</div>[/b]
</div>

Чтобы футер был прижат к низу есть другие методы, поищите тут на форуме, ни раз обсуждалось.

2m2 · September 14, 2011

Теперь интересное в этом:
Вы растянули средний блок. Он сам по себе (абсолют) ни от кого не зависит. А нижний блок болтается не на конце страницы где вы хотели видеть, а где окно просмотра заканчивается(так как был позиционирован относительно html).
Чтобы футер был прижат к низу есть другие методы, поищите тут на форуме, ни раз обсуждалось.

jqs-s.narod2.ru/img.html

Переделал немного, но все равно средний блок не зависит ни от кого, менял значения дива, в котором он находится - проблема осталась. нижний блок прибил к низу иначе..

amelice · September 15, 2011

Попробуйте так:

HTML:


<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>problem_rezina1</title>
 <link href="problem_rezina_1.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<div id="wrap">
  <div class="top">
     <div id="palm"></div>
  </div>
  <div class="content">
     <div class="page">
       <div class="text">
        Техт
       </div>                 
     <div class="page_bg"></div>
     </div>
     <img id="fon" alt="" src="index_files/middle.png">
  </div>
  <div class="bottom">
     <img id="fon" alt="" src="index_files/bottom-min.jpg">
  </div>
</div>
</body>
</html>

CSS:

html,body,div,p{
	margin:0;
	padding:0;
	}
html,body,#wrap{
	width:100%;
	height:100%;	
	}
body {
	background:#000c56;
}
.top,.content,.bottom{
	position:relative;
	width:100%;
}
.top{
	background:url(index_files/bg-top.jpg) no-repeat center bottom #21cff2;
	height: 374px;
	}
#palm{
	position:absolute;
	background:url(index_files/palm.png);
	height:145px; 
	width:222px;
	top:0px; 
	right:0px
}
.content{
	border-top:1px solid #21cff2;
	min-height:70%;
}
#fon{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	z-index:1;
	}
.page{
	border:1px solid #ddd;
	margin:20px auto 0;
	min-height:500px;
	height:auto !important;
	width:960px;
	position:relative;
	z-index:100;  
	}
.page_bg{
	position:absolute;
	height:100%;
	width:100%;
	background:#fff;
	opacity:0.4;
	top:0;
	left:0;
	}	
.text{
	color:black;
	padding:20px;
	}
.bottom {
	height:328px;
}

Высоту тут сами отредактируйте.

.content{
        border-top:1px solid #21cff2;
        min-height:70%;
}

.page{
        border:1px solid #ddd;
        margin:20px auto 0;
        min-height:500px;
        height:auto !important;
        width:960px;
        position:relative;
        z-index:100;  
}

Edited September 15, 2011 by cheburek

Sign In

Проблема с резиновым фоном div'a

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information