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

Вид для печати

12.07.2007, 17:27
DELPHIna

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

вот пример:

Код:

<ul class="links"> <li class="folderminus">[Only registered and activated users can see links. Click Here To Register...] * <ul class="links"> * * <li class="sub">[Only registered and activated users can see links. Click Here To Register...] * * <li class="subact">[Only registered and activated users can see links. Click Here To Register...] * * <li class="sub">[Only registered and activated users can see links. Click Here To Register...] *[/list] * * <li class="folderminus">[Only registered and activated users can see links. Click Here To Register...] * * <ul class="links"> * * * *<li class="sub">[Only registered and activated users can see links. Click Here To Register...] * * * *<li class="subact">[Only registered and activated users can see links. Click Here To Register...] * * * * <li class="sub">[Only registered and activated users can see links. Click Here To Register...] * *[/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. вообще то пример не совсем близкий к рекурсии...но мне надо чтобы как можно одинаковее выглядела вложенность <список в списке>, чтобы классы были одинаковыми почти...Понятно?
12.07.2007, 18:52
garA

решение такое же как и [Only registered and activated users can see links. Click Here To Register...]
12.07.2007, 18:58
null

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

Э... Я чегото не понял?
13.07.2007, 09:57
DELPHIna

Цитата:

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

Э... Я чегото не понял?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

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

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

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

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

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

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

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

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">[*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...] **<ul class="navlist"> ****[*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...] *<ul class="navlist"> *<li class="subact">[Only registered and activated users can see links. Click Here To Register...] *<li class="note">[Only registered and activated users can see links. Click Here To Register...] *<li class="note">[Only registered and activated users can see links. Click Here To Register...] *<li class="note">[Only registered and activated users can see links. Click Here To Register...] *[/list] **** ****<li class="note">[Only registered and activated users can see links. Click Here To Register...] ****<li class="note">[Only registered and activated users can see links. Click Here To Register...] ****<li class="note">[Only registered and activated users can see links. Click Here To Register...] ****[/list] [*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...][*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...][*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...] [/list] </div> </body> </html>
13.07.2007, 14:08
DELPHIna

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

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

Код:

<!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">[Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...] ****<ul class="navlist"> ****<li class="note0">[Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...] *<ul class="navlist"> *****<li class="subact">[Only registered and activated users can see links. Click Here To Register...] *****<li class="note">[Only registered and activated users can see links. Click Here To Register...] *****<li class="note">[Only registered and activated users can see links. Click Here To Register...] *****<li class="note">[Only registered and activated users can see links. Click Here To Register...] *[/list] **** ****<li class="note">[Only registered and activated users can see links. Click Here To Register...] ****<li class="note">[Only registered and activated users can see links. Click Here To Register...] ****<li class="note">[Only registered and activated users can see links. Click Here To Register...] ****[/list] [*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...][*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...][*][Only registered and activated users can see links. Click Here To Register...][Only registered and activated users can see links. Click Here To Register...] [/list] </div> </body> </html>
13.07.2007, 16:08
Zigzag

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

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

Цитата:

Originally posted by Aykroyd@Jul 13 2007, 22:34
Начинаем с того, что ОТД вида <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> для вас, Татьяна, существовать не должно...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

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

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

наверное для Вас будет это кошмаром....но пришлось реализовывать задумку частично таблицами [Only registered and activated users can see links. Click Here To Register...]
суть проблемы, что есть сайты на таблицах....с такими вот доктайпами(для работы корректной высоты 100%) инадо работать в них, что то дописывать, переделывать

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

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

Цитата:

Originally posted by DELPHIna@Jul 17 2007, 10:31
суть проблемы, что есть сайты на таблицах....с такими вот доктайпами(для работы корректной* высоты 100%)* инадо работать в них, что то дописывать, переделывать
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

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

В остальном, конечно, пока могу только посочувствовать...) Но я уверен, что скоро будет больше опыта и правильных работ, поскольку верной дорогой идем... [Only registered and activated users can see links. Click Here To Register...]
17.07.2007, 14:26
Zigzag

Цитата:

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

Цитата:

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

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

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

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

Zigzag
Я вот о чем задумываюсь в последнее время, Павел... Если даже просят именно таблицами... Зачем делать таблицами, если можно (в данном контексте пусть даже не нужно, а именно МОЖНО) сверстать все НЕ таблицами? )) [Only registered and activated users can see links. Click Here To Register...]