Древовидный список

Atmos · June 27, 2012

Здравствуйте, я, конечно, новичок, но сложный сайт мне делать не надо, поэтому чтобы сформулировать вопрос большого ума не требуется, и я счел, что вопрос больше подойдет к верстке. Опишу ситуацию.

Начал изучать законодательную базу нашего любимого государства, но понял, что одномерное представление текста слишком громоздко и неудобно для просмотра и поиска информации. Решил сделать древовидный список, типа как для файлов в Проводнике или как до недавнего времени (почему-то убрали) было на сайте Гаранта для КоАП или УК. То есть, чтобы имелся список законов, в нем список глав --> статей --> пунктов. В первом приближении Ворд мне ничем помочь не смог (а в егоном программировании я не силен), поэтому решил попытать счастья в HTML. Самым простым вариантом для меня оказался предложенный товарищем из одной студии.

Я решил это дело переработать под себя, в чем-то упростив, в чем-то изменив, но из-за своей неопытности в HTMl и CSS я слегка запаниковал. В примере куча каких-то неочевидных, ничего не дающих (протестировано путем попеременного удаления) свойств, поставленных из эфемерного опыта или знания каких-то сакральных "высоких стандартов", до которых мне как до Китая... В общем, почитал я справочников, примеров, вымучал свое творение как мог, но некоторые вопрос остались, которые я и хочу задать.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Кодекс Российской Федерации об административных правонарушениях от 30.12.2001 № 195-ФЗ</title>
<style type="text/css">
<!--

body { font-family: Arial, sans-serif; background: #C0C0C0; margin: 0; padding: 0; }

.content { width: 80%; max-width: 1260px; min-width: 780px;	background: #FFF;	margin: 0 auto; padding: 10mm; clear: both; }
* { font-size: 100.1%; }

    /* СПИСКИ */

ul, ol, dl, li { padding: 0; margin: 0; }
li.cl ul { display: none; }  /* Скрывают содержимое списков класса .cl Глав */
ul { overflow: hidden; width: 100%; margin: 0; padding: 0 0 1.5em 0; list-style-type: none; }
ul ul { overflow: visible;  /* перекрытие слева и снизу подпунктов */
        padding: 0 0 0 0.5em;  /* чтобы подпункты списка сдвигались вправо */ }  /* класс, для ul после которых нет li в родительских ветках */
li li { margin: 0 0 0 0.5em; border-left: 1px dotted; padding: 0; }   /* ствол */
li li li { margin: 0 0 0 1.5em; border-left: 1px dotted; padding: 0; }   /* ствол */
li div { position: relative; height: 1.5em; min-height: 16px; }  
li li div { border-bottom: 1px dotted; }   /* ветки */
li p { position: absolute; z-index: auto; top: 0.8em; left: 1.75em; width: 100%; }
li li p { left: 2.75em; margin-left: -0.5em; }

    /* ССЫЛКИ */

a {background-color: #FFF; color:#000; text-decoration: none; padding: 0px; }
a:hover { color: #C0C0C0; }
a.sc { margin-left: -2.05em; position: absolute; top: 0.3em; color: #808080; line-height: 60%; vertical-align: middle; border: 1px solid #C0C0C0; text-indent: 0; } /* +/- */
li li a.sc { margin-left: -1.55em; }

    /* ЗАГОЛОВКИ */

h1, .h2, .h3, .h4, p { background-color: #FFF; margin-top: 0; }
    /* font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit */
h1, .h2, .h3 { font-family: Times New Roman, serif; font-size: 16pt; font-weight: bold; text-align: center; }  /* Титул */
.h2, .h3 { text-transform: uppercase; }  /* .h2 - Закон / Раздел КоАП */
.h3, .h4, .num { color: #808080; text-align: left; font-weight: bold; }  /* <span class="num">1.</span> Законодательство об... */
.h3 { font-size: 1em; font-weight: normal; }  /* .h3 - Глава / Глава КоАП */
.h3, .h4, p { text-indent: 1em; }  /* .h4 - Статья */
p { text-align: justify; }  /* Часть / пункт статьи */
.h2, .chapt, .art { color: #C0C0C0; }/*  <span class="chapt">Глава 1.</span> */  /* <span class="art">Статья 1.1.</span> */

-->
</style>
<script type="text/javascript">
    function UnHide( eThis ){
        if( eThis.innerHTML.charCodeAt(0) == 43 ){
            eThis.innerHTML = '?'
            eThis.parentNode.parentNode.parentNode.className = '';
        }else{
            eThis.innerHTML = '+'
            eThis.parentNode.parentNode.parentNode.className = 'cl';
        }
        return false;
    }

</script></head>

<body>
<div class="content">
  <h1>Кодекс Российской Федерации об административных правонарушениях от 30.12.2001 № 195-ФЗ</h1>
  <ul>  <!-- КоАП: список Разделов -->
    <li><div><p><a href="#" class="sc" onclick="return UnHide(this)">?</a>
                <a class="h2" href="#">Раздел I. Общие положения</a></p></div>
      <ul>  <!-- РАЗДЕЛ I: список Глав -->
        <li class="cl"><div><p><a href="#" class="sc" onclick="return UnHide(this)">+</a>
                               <a class="h3" href="#"><span class="chapt">Глава 1. </span>Задачи и принципы законодательства об административных правонарушениях</a></p></div>
          <ul>  <!-- Глава 1: список статей -->
            <li class="cl"><div><p><a href="#" class="sc" onclick="return UnHide(this)">+</a><a class="h4" href="#"><span class="art">Статья 1.1. </span>Законодательство об административных правонарушениях</a></p></div>
              <ul>
                <li><div><p><span class="num">1. </span>Законодательство об административных правонарушениях состоит из настоящего Кодекса и принимаемых в соответствии с ним законов субъектов Российской Федерации об административных правонарушениях.</p></div></li>
                <li><div><p><span class="num">2. </span>Настоящий Кодекс основывается на Конституции Российской Федерации, общепризнанных принципах и нормах международного права и международных договорах Российской Федерации. Если международным договором Российской Федерации установлены иные правила, чем предусмотренные законодательством об административных правонарушениях, то применяются правила международного договора.</p></div></li>
              </ul>
            </li>
            <li class="cl"><div><p><a href="#" class="sc" onclick="return UnHide(this)">+</a><a class="h4" href="#"><span class="art">Статья 1.2. </span>Задачи законодательства об административных правонарушениях</a></p></div>
              <ul>
                <li><div><p>Задачами законодательства об административных правонарушениях являются защита личности, охрана прав и свобод человека и гражданина, охрана здоровья граждан, санитарно-эпидемиологического благополучия населения, защита общественной нравственности, охрана окружающей среды, установленного порядка осуществления государственной власти, общественного порядка и общественной безопасности, собственности, защита законных экономических интересов физических и юридических лиц, общества и государства от административных правонарушений, а также предупреждение административных правонарушений.</p></div></li>
              </ul>
            </li>
            <li class="cl"><div><p><a href="#" class="sc" onclick="return UnHide(this)">+</a><a class="h4" href="#"><span class="art">Статья 1.3. </span>Предметы ведения Российской Федерации в области законодательства об административных правонарушениях</a></p></div>
              <ul>
                <li><div><p><span class="num">1. </span>К ведению Российской Федерации в области законодательства об административных правонарушениях относится установление:<br />
                1) общих положений и принципов законодательства об административных правонарушениях;<br />
                2) перечня видов административных наказаний и правил их применения;<br />
                3) административной ответственности по вопросам, имеющим федеральное значение, в том числе административной ответственности за нарушение правил и норм, предусмотренных федеральными законами и иными нормативными правовыми актами Российской Федерации;<br />
                4) порядка производства по делам об административных правонарушениях, в том числе установление мер обеспечения производства по делам об административных правонарушениях;<br />
                5) порядка исполнения постановлений о назначении административных наказаний.</p></div></li>
                <li><div><p><span class="num">2. </span>В соответствии с законодательством о судебной системе настоящий Кодекс определяет подсудность дел об административных правонарушениях судам.</p></div></li>
                <li><div><p><span class="num">3. </span>В соответствии с законодательством о защите прав несовершеннолетних настоящий Кодекс определяет подведомственность дел об административных правонарушениях комиссиям по делам несовершеннолетних и защите их прав.</p></div></li>
                <li><div><p><span class="num">4. </span>В соответствии с установленной структурой федеральных органов исполнительной власти настоящий Кодекс определяет подведомственность дел об административных правонарушениях, предусмотренных настоящим Кодексом, федеральным органам исполнительной власти.</p></div></li>
                <li><div><p><span class="num">5. </span>В соответствии с задачами и функциями, возложенными на органы государственной власти субъектов Российской Федерации федеральными законами, настоящий Кодекс определяет подведомственность дел об административных правонарушениях, предусмотренных настоящим Кодексом, органам исполнительной власти субъектов Российской Федерации.</p></div></li>
              </ul>
            </li>
          </ul> <!--end Глава 1: список статей -->
        </li>
        <li class="cl"><div><p><a href="#" class="sc" onclick="return UnHide(this)">+</a>
                               <a class="h3" href="#"><span class="chapt">Глава 2. </span>Адмиинстративное правонарушение и административная ответственность</a></p></div>
          <ul>  <!-- Глава 2: список статей -->
            <li class="cl"><div><p><a href="#" class="sc" onclick="return UnHide(this)">+</a><a class="h4" href="#"><span class="art">Статья 2.1. </span>Административное правонарушение</a></p></div>
              <ul>
                <li><div><p><span class="num">1. </span>Административным правонарушением признается противоправное, виновное действие (бездействие) физического или юридического лица, за которое настоящим Кодексом или законами субъектов Российской Федерации об административных правонарушениях установлена административная ответственность.</p></div></li>
                <li><div><p><span class="num">2. </span>Юридическое лицо признается виновным в совершении административного правонарушения, если будет установлено, что у него имелась возможность для соблюдения правил и норм, за нарушение которых настоящим Кодексом или законами субъекта Российской Федерации предусмотрена административная ответственность, но данным лицом не были приняты все зависящие от него меры по их соблюдению.</p></div></li>
                <li><div><p><span class="num">3. </span>Назначение административного наказания юридическому лицу не освобождает от административной ответственности за данное правонарушение виновное физическое лицо, равно как и привлечение к административной или уголовной ответственности физического лица не освобождает от административной ответственности за данное правонарушение юридическое лицо.</p></div></li>
              </ul>
            </li>
            <li class="cl"><div><p><a href="#" class="sc" onclick="return UnHide(this)">+</a><a class="h4" href="#"><span class="art">Статья 2.2. </span>Формы вины</a></p></div>
              <ul>
                <li><div><p><span class="num">1. </span>Административное правонарушение признается совершенным умышленно, если лицо, его совершившее, сознавало противоправный характер своего действия (бездействия), предвидело его вредные последствия и желало наступления таких последствий или сознательно их допускало либо относилось к ним безразлично.</p></div></li>
                <li><div><p><span class="num">2. </span>Административное правонарушение признается совершенным по неосторожности, если лицо, его совершившее, предвидело возможность наступления вредных последствий своего действия (бездействия), но без достаточных к тому оснований самонадеянно рассчитывало на предотвращение таких последствий либо не предвидело возможности наступления таких последствий, хотя должно было и могло их предвидеть.</p></div></li>
              </ul>
            </li>
          </ul> <!-- end Глава 2: список статей -->
        </li>
      </ul>  <!-- end РАЗДЕЛ I: список Глав -->
    </li>
  </ul> <!-- end КоАП: список Разделов -->
<!-- end .content --></div>
</body>
</html>

Для примера я взял Раздел I КоАП РФ, в котором 2 Главы по паре-тройке статей с несколькими пунктами. За основу брал документ DreamWeaver'a, так как начинал в нем, но дальше его бросил и работал в RJ TexEd'e. Код слегка сумбурный, не судите строго, но валидацию прошел. Да, про то, почему используется position там absolute вместо relative или наоборот, можете не спрашивать, я сам в этом запутался =)

Итак, основной вопрос: почему все абзацы последнего уровня высотой в 1 строку? (Т.е. Что сделать, чтобы это убрать?)

Также хотелось бы знать, как сделать, чтобы абзацы последнего уровня (пункты статей) левым краем упирались в левое поле content'a, перегораживая своим белым фоном ветки дерева, и при этом на первой строке ничего не нарушалось бы. Я имею ввиду, что если я вставлю абзацу отрицательный margin-left до упора и использую text-indent, чтобы вернуть начало пункта на нужную позицию, то область, которую займет отодвинутое text-indent'ом пространство, загородит ветки последнего уровня и лишней строкой перекроет ствол дерева. Как-то так.

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

Да, кстати: местные теги

 и [code] почему-то изменили в моем примере − на -, а + на +.

Atmos · July 15, 2012

В итоге получилось так: http://learn.javascript.ru/play/MyNhu

Sign In

Древовидный список

Question

Atmos

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Atmos

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information