Зависимый div - HTML и CSS

Dimafly · 24.02.2014, 16:18

Доброго времени суток,
Господа нужна помощь в таком вопросе.
Нужно сделать зависимы div от другого.
То есть, есть раскрывающийся div, под ним есть второй div, нужно, чтобы нижний div опускался при раскрытии верхнего. (в данный момент у меня верхний при раскрывании наплывает на нижний).
Заранее спасибо.

MaTBeu · 24.02.2014, 20:23

Показывайте код. Без кода никто не будет разбираться

Dimafly · 28.02.2014, 20:36

Index:

Код HTML:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="news_content_main.css"/>
  <link rel="stylesheet" type="text/css" href="footer.css"/>
  <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
  <script type="text/javascript" src="news_content_main.js"></script>  
</head>
<body>
<div class="news_content">
<div id="content">
 <div class="post inactive">
  <div class="title">
   <h3><a href="#" title="">Тема новости</a></h3>
   <p>Автор: </p>
  </div>
  <div class="entry" style="display:none;">
    <div class="img-radius"></div>
   <p>текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости текст новости</p>
  </div>
 </div>
  <div class="post inactive">
  <div class="title">
   <h3><a href="#" title="">Тема новости</a></h3>
	<p>Автор:</p>
  </div>
  <div class="entry" style="display:none;">
   <p>текст новости</p>
  </div>
 </div>
</div>
</div>
<div class="footer">footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter</div>
</body>
</head>

CSS:

Код HTML:

.news_content {
	width: 60%;
	position: absolute;
	left: 20%;
	}
* {
	margin: 0;
	padding: 0;
	}
.post {
	padding: 1%;
	position: relative;
	background: linear-gradient(to top, #99958c, #FFF);
    margin-bottom: 1%;
	border-radius: 10px;
	width: 97,5%;
	margin: 1% auto;
	text-align: justify;
	}
.inactive {
	color: #FFF;
	}
.post .title {
	position: relative;
	height: 1%;
	}
.post .title h3 {
	font-size: 300%;
	font-family: Shellyallegroc;
	}
.post .title h3 a {
	text-decoration: none;
	color: #000;
	}
.inactive .title h3 a {
	color: #FFF;
	}
.post .title p {
	font-size: 70%;
	font-style: italic;
	font-weight: bold;
	margin: 0%;
	}
.post .title span {
	position: absolute;
	right: 0%;
	top: 30%;
	cursor: pointer;
	width: 14px;
	height: 14px;
	background: url(trigger.gif) no-repeat left bottom;
	display: block;
	font-size: 0%;
	}
#content .inactive .title span {
	background-position: left top;
	}
#content .post .entry {
	padding: 10px 0;
    }
#content {
    width: 100%;
    height: 100%;
}
.footer {
	height: 15%;
	width: 100%;
	background: linear-gradient(to top, #99958c, #FFF);
	position: absolute;
	top: 40%;
}

Javascript:

Код:

$(document).ready(function() {
	$('.title').append('<span></span>');
	$('.post span').each(function() {
		var trigger = $(this), state = false, el = trigger.parent().next('.entry');
		trigger.click(function(){
			state = !state;
			el.slideToggle();
			trigger.parent().parent().toggleClass('inactive');
			
		});
	});
});
document.onclick = function(ev) {
    var block = document.getElementById('content');
    if (ev.target.id != block.id && block.style.display == 'block')  {
        block.style.display = 'none';
    }
}

24.02.2014, 16:18	#1
Dimafly Новичок Джуниор Регистрация: 24.02.2014 Сообщений: 2	Зависимый div Доброго времени суток, Господа нужна помощь в таком вопросе. Нужно сделать зависимы div от другого. То есть, есть раскрывающийся div, под ним есть второй div, нужно, чтобы нижний div опускался при раскрытии верхнего. (в данный момент у меня верхний при раскрывании наплывает на нижний). Заранее спасибо.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Раскрывающий зависимый список в форме.	uznknown1	Microsoft Office Excel	26	05.01.2014 18:49
Что нужно делать чтобы высота div зависила то дочурного div?	Duddu	HTML и CSS	2	25.04.2012 21:23
Зависимый список	vlad-minsk	Microsoft Office Access	4	05.08.2010 11:32
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Зависимый набор значений в поле со списком	2323	Microsoft Office Excel	2	09.04.2010 13:10

24.02.2014, 20:23	#2
MaTBeu Eclipse Foundation Старожил Регистрация: 19.09.2007 Сообщений: 2,604	Показывайте код. Без кода никто не будет разбираться