проблема с версткой

[evil911]

Добрый день!

есть сайт: http://movement-concept.ru/seminary/

не получается растянуть бэкграунд <div id="left">

ощущение что min-height:897px; и дальше не тянется...

и вторая проблема:

в поле контента текст не получается вывести над бэкграундом...

в чем может быть проблема?

заранее спасибо!

Edited April 27, 2010 by evil911

[antonP]

_

Edited April 27, 2010 by antonP

[psywalker]

http://forum.htmlbook.ru/index.php?s=&...st&p=147649

[evil911]

http://forum.htmlbook.ru/index.php?s=&...st&p=147649

z хоть и понимаю что тема может и треш, но не могу понять, почему левый див не тянется по высоте?

в чем проблема?

html:

<div id="left">
	<div class="left_top"></div>
	<div class="bottom"></div>
</div>


<div id="center">
	<div class="content_top"></div>
	<div class="content_bottom"></div>
	<div class="content">
	<h1>h1</h1>
	   text
		<div class="news">
		<h1>Наши мероприятия</h1>
		news
		</div>
	<div class="copy">Copyright 2010 ElHaddawi Dance Company. Все права защищены</div>
</div>

</div>

<div id="footer">
	</div>

css:

.left_top {background:url(/images/left2.jpg) no-repeat; width:426px; height:330px;position:absolute; top:0px; left:0px;}

.bottom {background:url(/images/bottom_back.jpg) no-repeat; width:426px; height:567px; position:absolute; bottom:0px; left:0px;}
.content {
color:#666666; font-size:12px;
z-index:30000!important;
}
.content a {color:#ff6600; text-decoration:underline;}
.content p {padding-bottom:10px; color:#666666; font-size:12px;}
.content_bottom {background:url(/images/content_bottom.jpg) repeat-x; height:567px; position:absolute; bottom:0px; left:0px; width:100%;z-index:100!important}

.content_top {background:url(/images/content_top.jpg) left repeat-x; position:absolute; top:0px; left:0px; height:330px; width:100%; z-index:100!important;}
.content_center {background:url(/images/content_center.jpg);}

.news {padding-top:70px; width:400px;}
.news .date {color:#ff6600;}
.news .name {color:#666666; font-weight:bold;}
.news .anons a {color:#666666; text-decoration:underline;}

#left{ 
float:left;
width:426px;
min-height:897px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:897px; /* for IE5.x and IE6 */
background:url(/images/cent_back.jpg);
position:relative;
}

#center { 
margin-left:426px;
min-height:897px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:897px; /* for IE5.x and IE6 */
position:relative;
background:url(/images/content_center.jpg);

}
.copy {position:absolute; bottom:10px; left:50%; margin-left:-200px; width:400px; text-align:center; color:#666666; font-size:11px; padding-top:20px; z-index:30000!important;}

#footer { 
clear:both;

height:1px;
}

[psywalker]

Какже не тянется, он тянется ровно настолько, на сколько ты ему написал min-height:897px;

[evil911]

Какже не тянется, он тянется ровно настолько, на сколько ты ему написал min-height:897px;

это я понимаю, но нужно чтобы высота задавалась относительно #center а минимальная была 897px; в этом загвоздка

т.е. нужно чтобы у left и center была одинаковая высота, а получается, если в center будет много текста, то left по высоте не тянется...

Edited April 27, 2010 by evil911

[Searcher]

А почему он должен тянутся?

Вообще для блочной верстки колонки одинаковой высоты принципиально не свойственны. В любом случае, что там должно тянутся в левой колонке, фон? Тогда совершенно не обязательно вешать этот фон на левую колонку, можно и родителю повесить. Родитель будет тянуться за самым высоким блоком и тем самым создастся впечатление, что колонки одинаковой высоты. Тут вариантов решения может быть много, например есть такой вариант.

[slicemasta]

width:426px;

действительно чеж оно не тянется то?......

[evil911]

А почему он должен тянутся?

Вообще для блочной верстки колонки одинаковой высоты принципиально не свойственны. В любом случае, что там должно тянутся в левой колонке, фон? Тогда совершенно не обязательно вешать этот фон на левую колонку, можно и родителю повесить. Родитель будет тянуться за самым высоким блоком и тем самым создастся впечатление, что колонки одинаковой высоты. Тут вариантов решения может быть много, например есть такой вариант.

спасибо, сделал)

надо было чтобы <div class="bottom"></div> (два человека внизу) всегда внизу слева)

а еще вопрос, у меня в <div id="center"> есть два дива с position:absolute; (<div class="content_top"> и <div class="content_bottom"> - эти дивы с бэкграундами) как их разместить под <div class="content"> - в этом диве текс.Чтобы текст был поверх этих двух дивов?

width:426px;

действительно чеж оно не тянется то?......

так ведь ширина должна быть фиксированной или я что-то не понимаю?

Edited April 27, 2010 by evil911

[evil911]

всем спасибо!

вроде бы разобрался и сделал )

[Searcher]

Ну для расположения внизу использовать такую верстку, конечно, перебор... Может достаточно было абсолютным позиционированием этого добиться?