Высота блока с position relative

[Aurica]

Здравствуйте.

вот что есть сейчас:

у блока menu_text position:relative;он встает на правильное место. Но вот высота у него как 2 блока, ниже меню большое расстояние. Если я этот блок удаляю, то лишнее пространство исчезает.

Как сделать так, чтобы блок advert_list начинался сразу после меню?

html:

		<div id="menu_wrapper">
		  <div id="menu_center">
		  </div>
		  <div id="menu_text">
			<div class="menu_button">
			  <img src="images/menu_home_page.png"><br>
		  Главная
		</div>
			<div class="menu_button">
			  <img src="images/menu_education.png"><br>
		  Образование
		</div>
			<div class="menu_button">
			  <img src="images/menu_training.png"><br>
		  Тренинги
		</div>
			<div class="menu_button">
			  <img src="images/menu_contacts.png"><br>
		  Контакты
		</div>
	  </div>
		</div>
		<div id="menu_left">
		</div>
		<div id="menu_right">
		</div>
		<div class="clearence"> </div>
			<div id="advert_list">
			 <ul>
				  <li class=advert_item>объявление 1</li>
				  <li class=advert_item>объявление 2</li>
				  <li class=advert_item>объявление 3</li>
				  <li class=advert_item>объявление 4</li>
				  <li class=advert_item>объявление 5</li>
				</ul>
			</div>

css:

#menu_wrapper{
	float:left;
  width:100%;
}
#menu_center{
  margin: 0 250px;
  height:77px;

}
#menu_left{
  width:250px;
  height:77px;
  float:left;
  margin-left:-100%;
}
#menu_right{
  width:250px;
  height:77px;
  float:left;
  margin-left:-250px;
}
#menu_text{
  top:-65px;
  right:-40px;
  z-index:100;
  position:relative;
  width:90%;
  height:70px;

}
.menu_button{
  float:left;
  margin:0 2em;
}
#advert_list{
  margin:0.5em;
}
.advert_item{
  float:left;
  width:120px;
  height: 45px;
  margin: 0 0.5em;
  border: solid black 1px;
}

страничка находится по адресу http://studii.md/t1/

[Нет]

Aurica, задайте #menu_wrapper высоту.

[Aurica]

Aurica, задайте #menu_wrapper высоту.

Сработало! мда...

Благодарю!

Edited December 14, 2010 by Aurica

[Aurica]

еще один вопрос.

как быть в том случае, если высота родительского элемента заранее неизвестна?

Поясняю.

Есть задача: сверстать резиновый в высоту блок. Блок сложный. Фон полупрозрачный, сверху и снизу градиенты. Реализовано через 4 дива - контейнер блока с основным фоном, верхний градиент, блок с текстом (position: relative, top:-высота верхнего градиента), блок с нижним градиентом. Блок с текстом по высоте должен растягивать контейнер, если текста больше.

Скриншот: обозначила рамки верхнего блока(зел), нижнего (черный) и текстового (красн) просто чтобы видеть какой где заканчивается/начинается.

Проблемы:

1) та же, если обратите внимание, расстояние между границами верхнего и нижнего блока увеличивается на высоту текстового блока (максимально на те самые 220px(высота верхнего градиента)). На картинке это красная стрелка. Но в этот раз высоту блока контейнера я не знаю, она резиновая.

2) текстовый блок должен заходить на нижний градиент, я пробовала поставить bottom:109px (высота нижнего градиента), но не работает. (я не совсем понимаю, что тут нужно поставить +109 или -109, но не работает ни то, ни другое)

ссылка на тестовую страницу test

ссылка на основную страницу argint

css

.block{
  margin:1em 2em;
}
.block_top{
  height:220px;
  width:100%;
  position:relative;
  z-index:0;
}
.block_bot{
  height:109px;
  position:relative;
  width:100%;
  z-index:0;
}

.block_text{
  position:relative;
  top:-220px;
  z-index:1;
  bottom:109px;
}
.main{
  width:710px;
  min-height:340px;
}
.block{
  background:url(images/back_block.png);
  text-align:center;
}
.block_top{
  background:url(images/block_top.png) repeat-x;
  border-bottom:1px solid green;
}
.block_bot{
  background:url(images/block_bot.png) repeat-x;
  border-top:1px solid black;
}
.block_text{
  border-bottom:1px solid red;
  border-top:1px solid red; 
  text-align:left;
}

html

 
	   <div class="block main">
			<div class="block_top">top</div>
			<div class="block_text">	  
			  text text text text text <br> text text text text text text text text text text text text text text text text text text text text text
			  text text text text text text text text text text text text text text text text text text text text text text text text text text
			  text text text text text text text text text text text text text text text text text text text text text text text text text text
			  text text text text text text text text text text text text text text text text text text text text text text text text text text
			</div>
			<div class="block_bot">bottom</div>
		</div>

Есть какие-то решения? или может сверстать блок как-нибудь по-другому?

P.S.Насчет второй проблемы - поняла, что top:-109px надо ставить нижнему градиенту, а main поставить overflow:hidden и конкретную высоту (что проблематично, но относительно решаемо)... но остается проблема дополнительного расстояния между верхним и нижним градиентами...

Edited December 20, 2010 by Aurica

[Нет]

Aurica, вот вам пример. Если нужны пояснения, спрашивайте.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Сложный фон резинового блока</title>
<style type="text/css">
html, body, div, p {
	margin: 0;
	padding: 0;
}

#wrap {
	width: 70%;
	margin: 75px auto;
}

#bottom,
#top {
	height: 100px;
	opacity: 0.5;
	background: #09F;
}

#bottom {
	background: #093;
}

#text-wrap {
	zoom: 1;
	background: #306;
	padding: 20px;
}

#text {
	margin: -100px 0;
	position: relative;
	z-index: 2;
}

#text p {
	text-align: justify;
	font: 75%/130% Georgia, "Times New Roman", Times, serif;
	color: #555;
}
</style>
</head>

<body>
	<div id="wrap">
		<div id="top"></div>
		<div id="text-wrap">
			<div id="text">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris lectus, pellentesque ut gravida quis, viverra non purus. Suspendisse potenti. Mauris id nulla nulla, eu iaculis nunc. Praesent rutrum vestibulum purus, vehicula vulputate odio feugiat vitae. Proin at lacus arcu, eu aliquet urna. Nullam nec malesuada magna. Praesent congue, lectus in consectetur varius, diam ipsum consectetur mauris, ut mollis neque arcu id diam. Etiam quis mi quam. Praesent rutrum dignissim elit. Nulla quis justo vel arcu consequat laoreet nec vel felis. Etiam vitae imperdiet urna. Nullam ligula lorem, blandit vel aliquet sodales, semper at nibh. Sed ut elit non nibh aliquet dignissim id eget ante. Aenean ullamcorper feugiat feugiat. Aenean lacus neque, dignissim quis posuere a, semper vitae augue. Proin varius diam sed nulla egestas condimentum. In hac habitasse platea dictumst. Nullam ullamcorper mauris dui. Fusce vitae enim purus. Etiam imperdiet venenatis ligula, eu matnisi condimentum ac. Curabitur scelerisque justo felis, eu tempor orci. Vestibulum porttitor tempor pharetra. Mauris et tellus nisi, ut posuere est. Nullam dictum, nunc vel scelerisque condimentum, erat nisi luctus tortor, vel egestas elit purus at tellus. Duis ac augue lorem, nec laoreet purus. In commodo posuere mollis. Duis consequat ipsum vel risus pharetra ac condimentum ligula dignissim. Sed aliquam venenatis dolor, eget consectetur nunc varius in. Duis at tortor sem. Nam vel facilisis mi. Nulla facilisi. Pellentesque felis leo, iaculis sodales tincidunt id, hendrerit id sem. Vestibulum at quam arcu. Phasellus luctus posuere lacinia. Quisque urna nulla, pellentesque in interdum eget, auctor id justo. Aliquam nec nibh sapien, congue lacinia ipsum. Vivamus in urna sit amet diam consectetur varius. Morbi velit mi, euismod at iaculis non, porta vitae justo. Vestibulum dui urna, rhoncus id consequat nec, auctor non tortor. Nam nec nibh arcu. Mauris non purus et magna vestibulum adipiscing. Nulla sodales blandit urna at elementum. Mauris euismod lectus ut risus venenatis vel facilisis erat lacinia. In et diam ligula. Curabitur hendrerit consequat bibendum. Nullam nec neque lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris lectus, pellentesque ut gravida quis, viverra non purus. Suspendisse potenti. Mauris id nulla nulla, eu iaculis nunc. Praesent rutrum vestibulum purus, vehicula vulputate odio feugiat vitae. Proin at lacus arcu, eu aliquet urna. Nullam nec malesuada magna. Praesent congue, lectus in consectetur varius, diam ipsum consectetur mauris, ut mollis neque arcu id diam. Etiam quis mi quam. Praesent rutrum dignissim elit. Nulla quis justo vel arcu consequat laoreet nec vel felis. Etiam vitae imperdiet urna. Nullam ligula lorem, blandit vel aliquet sodales, semper at nibh. Sed ut elit non nibh aliquet dignissim id eget ante. Aenean ullamcorper feugiat feugiat. Aenean lacus neque, dignissim quis posuere a, semper vitae augue. Proin varius diam sed nulla egestas condimentum. In hac habitasse platea dictumst.</p>
			</div>
		</div>
		<div id="bottom"></div>
	</div>
</body>
</html>

[Aurica]

Aurica, вот вам пример. Если нужны пояснения, спрашивайте.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
...
#text-wrap {
	zoom: 1;
	background: #306;
	padding: 20px;
}
...
#text p {
	text-align: justify;
	font: 75%/130% Georgia, "Times New Roman", Times, serif;
	color: #555;
}
...

Вы просто клад! Спасибо вам большое! Единственное, не поняла что делает в text-wrap свойство zoom:1. Ага, нашла... ZOOM-Fixing-CSS-Issues-In-Internet-Explorer. Действительно, без него в IE7 (по крайней мере) верхний блок схлопывается.

И непонятна эта запись: font: 75%/130%. Хотя что-то нашла тут font-size/line-height... Я правильно поняла - речь идет о записи font-size/line-height? даже не знала что так можно.

Благодарю! Это очень полезный код.

Edited December 22, 2010 by Aurica

[Нет]

Aurica, вы правы, свойство «zoom: 1» нужно для IE(6,7), оно задает hasLayout. Его лучше вынести из общего кода в отдельный файл CSS, который подключить с помощью условных комментариев для IE.

Запись шрифта в общем виде выглядит так:

font: font-style font-variant font-weight font-size/line-height font-family;

Например:

font: italic bold 75%/130% Georgia, "Times New Roman", Times, serif;