рекурсивное дерево на списках

**DELPHIna** · 12.07.2007, 17:27

Есть каталог в виде дерева. Вложенность бесконечная(ну предположим).
Возможно ли его реализация рекурсивно(я понимаю это вопрос к программисту...он сделает своё дело), вопрос к верстальщикам...как же так нарезать и описать в Css чтобы после каждого набора подпунктов в дереве не вырастало бы расстояние(отступы сверху и снизу) в арифметич. прогрессии? Возможно ли это?

вот пример:

Код:

<ul class="links">
<li class="folderminus">[Только зарегистрированные пользователи могут видеть ссылки. ]
 * <ul class="links">
 * * <li class="sub">[Только зарегистрированные пользователи могут видеть ссылки. ]
 * * <li class="subact">[Только зарегистрированные пользователи могут видеть ссылки. ]
 * * <li class="sub">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *[/list]
 * * <li class="folderminus">[Только зарегистрированные пользователи могут видеть ссылки. ]
 * * <ul class="links">
 * * * *<li class="sub">[Только зарегистрированные пользователи могут видеть ссылки. ]
 * * * *<li class="subact">[Только зарегистрированные пользователи могут видеть ссылки. ]
 * * * * <li class="sub">[Только зарегистрированные пользователи могут видеть ссылки. ]
 * *[/list]
 * * 
[/list]

стили примерно такие:

Код:

.links {padding: 5px 5px 5px 10px;}
li {list-style: none;text-align: left;}
.folderminus {
****background: transparent url(images/icons/minus.gif) no-repeat;
****background-position: 0px 3px;
****padding-left: 15px;
****padding-bottom: 10px;
}
li.sub{
****display:block;
****background: transparent url(images/icons/note.gif) no-repeat;
****background-position: left 3px;
****padding-left: 15px;
****padding-bottom: 5px;
}
li.subact{
****display:block;
****background: transparent url(images/icons/noteact.gif) #c3b88e no-repeat;
****background-position: 5px 3px;
****margin-left: -5px;
****margin-right: 5px;
****padding-left: 22px;
****padding-bottom: 4px;
}

остальное не важно...

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

P.S. вообще то пример не совсем близкий к рекурсии...но мне надо чтобы как можно одинаковее выглядела вложенность <список в списке>, чтобы классы были одинаковыми почти...Понятно?

**garA** · 12.07.2007, 18:52

решение такое же как и [Только зарегистрированные пользователи могут видеть ссылки. ]

**null** · 12.07.2007, 18:58

Во-первых — у вас усы отклеились: размечен текстик с ошибкой.
Во-вторых — не понял вопроса: где что растет? Если поправить разметку нигде ничего не растет...

Э... Я чегото не понял?

**DELPHIna** · 13.07.2007, 09:57

Originally posted by null@Jul 12 2007, 16:58
Во-первых — у вас усы отклеились: размечен текстик с ошибкой.
Во-вторых — не понял вопроса: где что растет? Если поправить разметку нигде ничего не растет...

Э... Я чегото не понял?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

null ...насчёт усов не страшно подправлю...мне бы суть понять о волженность бесконечной списков...вот как организовать по уму?

насчёт растёт... нужно сделать вложенность бесконечную списков, как её описать

П- пункт
пд - подпункт

П -
- пд
- пд
- П
- пд
- пд
П -
П -
- пд
- пд

P.S. **решение такое же как и в колонке Xepec'а*** сижу читаю, вникаю

**Zigzag** · 13.07.2007, 11:41

вот читаю я, читаю, и никак не могу понять суть вашей проблемы.

объясните поточнее, какую проблему вам нужно решить?

**DELPHIna** · 13.07.2007, 12:41

Zigzag, вот пример кода вложенного каталога ввиде-дерева,
1) вложенность нужна бесконечная, кот. программируется более менее нормально(а для этого нужно чтобы не приходилось указывать параметры отступов и всего прочего для каждого вложения...)

2) обеспечить стабильно одинаковое отображение в основных броузерах (на данном примере видно, что в ИЕ нормально, в Опере всё тесно-притесно)

3) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> именно такой нужен

Выручайте кто может!

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 *<title></title>
</head>
<style>
ul.navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

li.note
{
padding-left: 15px;
background: transparent url(images/icons/note.gif) no-repeat;
background-position: 0 .3em;
}
.navlist *ul{ list-style: none; margin-left:15px;}

li.note a {
****font: 11px Tahoma;
****color: #5b84c1;
****text-decoration: underline;
}
li.subact{
****display:block;
****background: transparent url(images/icons/noteact.gif) #c3b88e no-repeat;
 * *background-position: 5px .3em;
****margin-left: -5px;
****margin-right: 5px;
****padding-left: 22px;
****padding-bottom: 4px;
}
li.subact a.linksubact {
****font: 11px Tahoma;
****color: #FFF;
****text-decoration: none;
}
a {
****font: 12px Tahoma;
****color: #1144ad;
}

</style>
<body>

<div style="width:250px;border:#000 1px solid;">
<ul class="navlist">[*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ]
 **<ul class="navlist">
****[*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ]
 *<ul class="navlist">
 *<li class="subact">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *[/list]
****
****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
****[/list]
[*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ]
[/list]
</div>
</body>
</html>

**DELPHIna** · 13.07.2007, 14:08

вроде как вот этот вариант более правильный и упрощенный....

но если будут идеи лучшии, то готова выслушать

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 *<title></title>
</head>
<style>
ul.navlist
{
margin: 0;
padding: 5px 5px 5px 10px;
list-style: none;
}
ul.navlist li {
****height:20px;
****vertical-align:middle;
}
ul.navlist li a img
{
margin-right: 5px;
}
li.note0 {
margin-left: 1px;
padding-left: 0;
}

li.note
{
padding-left: 15px;
background: transparent url(images/icons/note.gif) no-repeat;
background-position: 0 5px;
}
.navlist *ul{ list-style: none; margin-left:15px;}

li.subact{
****display:block;
****background: transparent url(images/icons/noteact.gif) #c3b88e no-repeat;
 * *background-position: 5px .3em;
****margin-left: -5px;
****margin-right: 5px;
****padding-left: 22px;
 * *padding-top: 3px;
}
li.subact a.linksubact {
****font: 12px Tahoma;
****color: #FFF;
****text-decoration: none;
****display:block;

}
a {
****font: 12px Tahoma;
****color: #1144ad;
}

</style>
<body>

<div style="width:250px;border:#000 1px solid;">
<ul class="navlist">
<li class="note0">[Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ]
****<ul class="navlist">
****<li class="note0">[Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ]
 *<ul class="navlist">
 *****<li class="subact">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
 *[/list]
****
****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
****<li class="note">[Только зарегистрированные пользователи могут видеть ссылки. ]
****[/list]
[*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][Только зарегистрированные пользователи могут видеть ссылки. ]
[/list]
</div>

</body>

</html>

**Zigzag** · 13.07.2007, 16:08

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

**Aykroyd** · 14.07.2007, 01:34

Начинаем с того, что ОТД вида <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> для вас, Татьяна, существовать не должно...

**Zigzag** · 14.07.2007, 14:48

Originally posted by Aykroyd@Jul 13 2007, 22:34
Начинаем с того, что ОТД вида <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> для вас, Татьяна, существовать не должно...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

кстати, да. а ты понял вообще суть самой проблемы?

**Aykroyd** · 14.07.2007, 21:05

Суть проблемы – контекстными селекторами надо пользоваться. )

**DELPHIna** · 17.07.2007, 10:31

наверное для Вас будет это кошмаром....но пришлось реализовывать задумку частично таблицами

суть проблемы, что есть сайты на таблицах....с такими вот доктайпами(для работы корректной высоты 100%) инадо работать в них, что то дописывать, переделывать

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

многое мне не сделать(особенно в навороченном дизайне с кучей округлостей, вложенных блоков и т.п.)
:fie: я сама не хочу таблицами верстать.....но инода дают такие задания...что без них сделать не могу, а иногда напрямую просят именно таблицами!

**Aykroyd** · 17.07.2007, 14:20

Originally posted by DELPHIna@Jul 17 2007, 10:31
суть проблемы, что есть сайты на таблицах....с такими вот доктайпами(для работы корректной* высоты 100%)* инадо работать в них, что то дописывать, переделывать
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Корректная высота 100% легко достижима и при нормальных доктайпах в совокупности как с семантической разметкой, так и с табличным говнокодом...

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

**Zigzag** · 17.07.2007, 14:26

Originally posted by DELPHIna+Jul 17 2007, 07:31-->

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

главное не опускать руки. чтобы переучиться с табличной верстки нужен опыт, нужно постоянно искать решения, иначе никак.

<!--QuoteBegin-DELPHIna@Jul 17 2007, 07:31
[b]:fie: я сама не хочу таблицами верстать.....но инода дают такие задания...что без них сделать не могу, а иногда напрямую просят именно таблицами!

я от таких предложений просто отказываюсь.

**Aykroyd** · 17.07.2007, 15:15

Zigzag
Я вот о чем задумываюсь в последнее время, Павел... Если даже просят именно таблицами... Зачем делать таблицами, если можно (в данном контексте пусть даже не нужно, а именно МОЖНО) сверстать все НЕ таблицами? ))

Тема: рекурсивное дерево на списках

Опции темы

Поиск по теме

Отображение

Ваши права