Древовидная карта сайта

Tmin10 · January 25, 2011

Можно ли как то реализовать на CSS карту сайта в виде этого:

swetlana · January 25, 2011

Можно.

Tmin10 · January 25, 2011

Я думаю напрашивается вопрос: как?

Конкретно интересует: чем можно нарисовать линии, которые соединяют блоки?

Edited January 25, 2011 by Tmin10

swetlana · January 25, 2011

В смысле — как этот инструмент в фотошопе называется?

Карандаш.

А потом полученные картинки фоном к элементам списка.

Но это если надо просто, быстро и максимально кроссбраузерно.

А так можно поизвращаться ещё с рамками, в частности для псевдоэлементов ::before или ::after с абсолютным позиционированием.

Если есть время поиграться и плевать на IE 7-, то даже интересно каким-нибудь подобным способом решить.

Tmin10 · January 25, 2011

Попробую сделать универсальное решение, спасибо за совет.

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

tmin10.net.ru/tree.html

Подскажите, в каком направлении двигатся дальше, чтобы соединить их?

И как сделать, чтобы по центру подпись блока поставить, пробовал vertical-align, но это видимо только для таблиц...

Edited January 25, 2011 by Tmin10

swetlana · January 25, 2011

не только для таблиц, а для элементов с табличным отображением.

То есть, если сделать display: table-cell, то и vertical-align будет работать.

B вашем случае table-cell вполне применим. Его можно использовать и для выстраивания элементов списка в строку вместо float: left.

А насчёт того, как соединить линиями…

Если позволите, делать за вас не буду, слегка лениво. Но направление мысли предложу:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<title>Дерево</title>
	 <style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		#tree ul {
			text-align: center;
		}
		#tree h2,
		#tree h3 {
			font-size: 100%;
			font-weight: normal;
			width: 100px;
			margin: auto;
		}
		#tree li a {
			display: table-cell;
			vertical-align: middle;
			color: black;
			width: 100px;
			height: 50px;
			border: solid 1px;
			position: relative;
			border-radius: 10px;
			margin: auto;
		}
		#tree li {
			text-align: center;
			border: solid 1px #eee;
			list-style: none;
			float: left;
			padding: 0px;
		}
		#tree h3:after {
			content: '';
			display: block;
			height: 10px;
			margin-left: 52px;
			border-left: 1px solid #000;
		}
		#tree h3 + ul li:before {
			content: '';
			display: block;
			width: 104px;
			height: 10px;
			border-top: 1px solid #000;
			border-right: 1px solid #000;
			margin-left: -50px;
		}
			#tree h3 + ul li:first-child:before {
				border-top: none;
			}
		#tree a {
			margin: auto;
		}

	 </style>
  </head>
  <body>
	<ul id='tree'>
	<li><h2><a href=''>Сайт</a></h2>
	<ul>
	  <li>
		  <h3><a href=''>Навигация</a></h3>
		<ul>
		  <li><a href='/index.php'>главная</a></li>
		  <li><a href='/other.php?act=map'>карта сайта</a></li>
		</ul>
	  </li>
	  <li>
		  <h3><a href=''>Общение</a></h3>
		<ul>
		  <li><a href='/wall.php'>гостевая</a></li>
		  <li><a href='/blog.php'>блог</a></li>
		  <li><a href='/news.php'>новости</a></li>
		</ul>
	  </li>
	  </ul>
	  </li>
	  </ul></body>
</html>

Tmin10 · January 26, 2011

Большое спасибо, я как раз и нуждался в небольшой подсказке.

Int · January 26, 2011

А я для схожих целей собрался svg учить. И выучу.

swetlana · January 26, 2011

а svg в таких случаях кошернее?

Можно при его применении сохранить такой же чистый красивый код html, как у топикстартера?

Int · January 26, 2011

Код никто не смотрит.

А знания SVG ещё никому не мешали.

swetlana · January 26, 2011

Код никто не смотрит.

- Надеюсь. Надеюсь, весь шведский народ будет смотреть на меня.
И она заторопилась.
- Ведь мне надо успеть сделать прическу, и принять ванну, и побывать у массажистки и маникюрши, и купить новые стельки. Необходимо привести себя в порядок перед выступлением по телевидению.
Бетан рассмеялась.
- Новые стельки?.. Да кто их увидит по телевизору?
Фрекен Бок посмотрела на неё неодобрительно.
- А разве я сказала, что их кто-нибудь увидит? Во всяком случае, мне нужны новые стельки... Чувствуешь себя уверенней, когда знаешь, что у тебя все с головы до ног в порядке. Хотя это, может, и не всем понятно. Но мы - те, что всегда выступают по телевидению, - мы-то хорошо это знаем.
Фрекен Бок торопливо попрощалась и ушла.

rash · January 26, 2011

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

Он не нужен никому, кроме верстальщика. Да и верстальщику не нужен, но есть причины, которые не дают себе в этом признаться.

В соседней теме в споре на тему «функциональность против красоты» вы выступаете на стороне функциональности. Почему же в отношении кода ваша позиция меняется на диаметрально противоположную?

Если есть выбор между красивым кодом и надежным сайтом, выбор должен быть в пользу сайта. Если svg не снизит доступность, при этом обеспечит какие-либо преимущества, красота кода не сможет оправдать того, что им не воспользовались.

swetlana · January 26, 2011

кстати, вопрос был не о нужности красивого кода, а о том, возможно ли его сохранить при использовании svg.

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

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

Ну и ещё одно соображение: каждый элемент — потенциальное гнездо для ошибки. Чем меньше элементов, тем меньше возможностей допустить ошибку.

Int · January 27, 2011

SVG - это XML, так что всё там красиво.

возможно ли его сохранить при использовании svg

Зачем сохранять то, что не нужно?

В соседней теме в споре на тему «функциональность против красоты» вы выступаете на стороне функциональности. Почему же в отношении кода ваша позиция меняется на диаметрально противоположную?

Я уже указывал на это. Было что-то типа: "Я выбираю себе заказчика, если он не адекватен и просит IE 6, я просто не буду браться за работу. Но если это Lenta.ru, то я даже под IE 3 верстать буду, ведь это такой популярный сайт".

А ещё, заметили, что она в каждой теме разводит спор?

Vlad · January 27, 2011

Дамы и господа, вы отвлеклись от темы, если желаете пообщаться, для этого есть раздел Флейм.

Int · January 27, 2011

Можно везде, где нужны такие линии, делать таблицы и у нужных td ставить границы.

Sign In

Древовидная карта сайта

Question

Link to comment

Share on other sites

15 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

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