Вертикальное дерево

[Aliance]

Кто-нибудь может предложить верстку вертикального дереа (вложенного множества)?

Нигде не нашел, сам попытался (3 уровня вложенности), но получилось так себе...

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

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

Кто не понял, мне нужно что-то на подобие следующего:

[Nekromancer]

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

эта строчка меня убивает, может я жёстко туплю с утра.. но всё же можно по чётче сформулировать?

[Aliance]

Глянь на картинку. Второй уровень состоит из элементов 2,3 и 4. Допустим, элементы 2 и 4 - имеют одинаковую высоту, а элемент 3 - в два раза меньше. Таким образом, элемент третьего уровня 7 у меня будет показываться на расстоянии отступа от элемента 3, как и прочие элементы от своих родителей, но НЕ на одной и той же абсолютной высоте, что и элементы 5,6,8 и 9 (будет немного выше их, т.к. его родитель "заканчивается" раньше). Если и так не понятно, могу нарисовать.

[Justnewone]

Чую, никак не заставить соседние LI чувствовать высоту друг друга, если речь о семантически верном, в данном случае, списке. Выход - с помощью js пересчитывать высоты на конкретном уровне, вычленять самую большую и назначать ее всем остальным.

[Aliance]

Ну теоретически же можно потомков не в родительский контейнер пихать, а сделать по-другому: на каждый уровень свой контейнер, тогда высота будет одна - но как тогда быть с отступом, чтобы потомки были строго под своими родителями?

Но в любом случае, хотелось бы увидеть примеры "правильно-спроектированного" когда данного дерева, пусть даже и не учитывающего того фактора, которое я описал. Потому что у меня получился уж больно кривой он

Edited April 21, 2009 by Aliance

[Justnewone]

Ну теоретически же можно потомков не в родительский контейнер пихать, а сделать по-другому: на каждый уровень свой контейнер, тогда высота будет одна - но как тогда быть с отступом, чтобы потомки были строго под своими родителями?

Но в любом случае, хотелось бы увидеть примеры "правильно-спроектированного" когда данного дерева, пусть даже и не учитывающего того фактора, которое я описал. Потому что у меня получился уж больно кривой он

Будь передо мной та же задача, я бы поступил примерно так:

<ul class="level-1">
	<li>
		<ul class="level-2">
			<li>
				<ul class="level-3">
					<li>
						<ul class="level-4">
							<li>содержание, уровень 4</li>
						</ul>
					</li>
					<li>содержание, уровень 3</li>
				</ul>
			</li>
			<li>содержание, уровень 2</li>
		</ul>
	</li>
	<li>содержание, уровень 1</li>
</ul>

А затем, погуглив, я бы нашел в интернете решение для js (в коем сам не особо силен), которое вычисляло бы нужные высоты по предложенному ранее способу.

Edited April 21, 2009 by Justnewone

[Aliance]

Попробовал - что-то наверное я не допонимаю. Дерево получилось горизонтальным, да еще и обратным...

Вот мое решение приблизительное:

#menu {
	display: inline;
}
div.submenu > div.wrapper {
	display: inline;
	position: absolute;
	top: 280px;
}

............................................................

<div id="menu" align="center">
	<div class="wrapper">
		<?php printDepartment( 1, $this ); ?>
		<div class="submenu">
			<div class="wrapper" style="left: 60px;">
				<?php printDepartment( 2, $this ); ?>
			</div>
			<div class="wrapper" style="left: 200px;">
				<?php printDepartment( 5, $this ); ?>
			</div>
			<div class="wrapper" style="left: 340px;">
				<?php printDepartment( 9, $this ); ?>
				<div class="submenu">
					<div class="wrapper" style="left: -70px;">
						<?php printDepartment( 3, $this ); ?>
					</div>
					<div class="wrapper" style="left: 70px;">
						<?php printDepartment( 4, $this ); ?>
					</div>
				</div>
			</div>
			<div class="wrapper" style="left: 480px;">
				<?php printDepartment( 6, $this ); ?>
			</div>
			<div class="wrapper" style="left: 620px;">
				<?php printDepartment( 7, $this ); ?>
			</div>
			<div class="wrapper" style="left: 760px;">
				<?php printDepartment( 8, $this ); ?>
			</div>
			<div class="wrapper" style="left: 900px;">
				<?php printDepartment( 12, $this ); ?>
			</div>
			<div class="wrapper" style="left: 1040px;">
				<?php printDepartment( 10, $this ); ?>
			</div>
			<div class="wrapper" style="left: 1180px;">
				<?php printDepartment( 11, $this ); ?>
			</div>
		</div>
	</div>
</div>

Но это сделано статично без алгоритма с ручным заданием смещения. Хотелось бы более алгоритмичный подход.

P.S.: с JS у меня проблем не возникнет, там главное чтобы был алгоритм единый.

[Justnewone]

Почитайте тут на сайте про display, не поймете что-то, еще почитайте в гугле. Да и вообще про CSS.

[Aliance]

Я относительно хорошо владею информацией об этом св-ве. И по ссылке был. А в чем проблема, что не так сделано?

[Justnewone]

Я относительно хорошо владею информацией об этом св-ве. И по ссылке был. А в чем проблема, что не так сделано?

Инлайн элементы, по спецификации, которую вы относительно хорошо знаете в контексте этого свойства, вообще не могут принимать какую-либо заданную высоту и конечно же, не осуществляют перенос строки до и после себя в потоке. "Дерево получилось горизонтальным". В добавок вообще, у Вас в строчное вставлено блочное, судя по стилям. Вы всем браузерам наступили на горло тем самым. Они отомстят )))

Кстати, не смотря на то что вы конечно относительно хорошо знаете, почитайте заодно про абсолютное позиционирование и общий поток.

Edited April 21, 2009 by Justnewone

[Aliance]

Обычно я ставлю block: inline, когда хочу юзать div как span

Не вопрос, изменю.

[SelenIT]

Как вариант:

<!DOCTYPE html>
<style type="text/css">
ol, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
li {
	display: table-cell; /* для FF2 */
	display: inline-block;
	vertical-align: top;
	text-align: center;
	padding: 0.5em 0.25em 0;
}
* html li {
	display: inline;  /* для IE6 */
}
*+html li {
	display: inline;  /* для IE7 */
}
ol ol {
	border: 1px dotted #ddd;
}
span {
	background: #ddd;
}
</style>
<ol>
	<li><span>Раз</span>
		<ol>
			<li><span>1.1</span></li><li><span>1.2</span>
				<ol>
					<li><span>1.2.1</span></li><li><span>1.2.2</span></li></ol>
			</li><li><span>1.3</span></li></ol>
	</li><li><span>Два</span>
		<ol>
			<li><span>2.1</span>
				<ol>
					<li><span>2.1.1</span></li></ol>
			</li></ol>
	</li><li><span>Три</span>
		<ol>
			<li><span>3.1</span></li><li><span>3.2</span>
				<ol>
					<li><span>3.2.1</span></li><li><span>3.2.2</span></li></ol>
			</li></ol>
	</li></ol>

Вот только красивые соединительные линии без фоновой графики и/или SVG/VML нарисовать, по-моему, не получится...

[Aliance]

SelenIT, спасибо огромное. Буду тестировать.

Функция для отрисовки линий через canvas уже готова. Если кому интересно, могу поделиться собственной наработкой

Отлично, это то, что доктор прописал! К сожалению не могу поставить тут плюс..))