За последние 24 часа нас посетили 56754 программиста и 1750 роботов. Сейчас ищут 845 программистов ...

как список оформить средствами css

Тема в разделе "HTML и CSS", создана пользователем kotjara2, 25 май 2011.

  1. kotjara2

    kotjara2 Активный пользователь

    С нами с:
    2 ноя 2010
    Сообщения:
    23
    Симпатии:
    0
    Код (Text):
    1.  
    2. <head>
    3. <link rel="stylesheet" type="text/css"  href="style3.css">
    4. </head>
    5. <div class="spisok" >
    6. <ul class="Container">
    7.     <li class="Node IsRoot">
    8.        <div class="Content"><a href='#'>Одежда</a></div>
    9.     <ul class="Container">
    10.         <li class="Node">
    11.             <div class="Content"><a href="#">Женская</a></div>
    12.         </li>
    13.         <li class="Node">
    14.             <div class="Content"><a href="#">Мужская</a></div>          
    15.             <ul class="Container">
    16.                 <li class="Node">
    17.                     <div class="Content"><a href="#">Мужское пальто</a></div>         
    18.                 </li>
    19.                 <li class="Node">
    20.                     <div class="Content"><a href="#">Мужской пиджак</a></div>         
    21.                 </li>
    22.             </ul>
    23.         </li>
    24.     </ul>
    25.     </li>
    26. </ul>
    27. </div>
    style3.css
    Код (Text):
    1.  
    2. .spisok {
    3.     background:orange;
    4.     width:250px;
    5. }
    6. /* контейнер просто содержит узлы.  
    7.  Узел сам будет отвечать за свой отступ */
    8. .Container {  
    9.     padding: 0;  
    10.     margin: 0;  
    11.  }  
    12. .Container li {  
    13.     list-style-type: none; /* убрать кружочки/точечки */
    14.  }
    15. .Container ul li {
    16.     border-top:1px solid #fff inherit;
    17. }
    18. .Container li a{
    19.     color:#fff;
    20.     font-family:verdana,arial,sans-serif;
    21.     text-decoration:none ; /*уничтожает подчеркивания у ссылок*/
    22. }
    23. /* узел отодвинут от левой стенки контейнера на 18px  
    24.    благодаря этим отступам вложенные узлы формируют иерархию  
    25. */
    26. .Node {  
    27.     margin-left: 18px;  
    28.     zoom: 1;
    29.     border-bottom:none;
    30.     /* спецсвойство против багов IE6,7. Ставит hasLayout */
    31. }  
    32. /*Корневой узел от родительского контейнера не отодвинут.  
    33. Ему же не надо демонстрировать отступом, чей он сын.  
    34. Это правило идет после .Node, поэтому имеет более высокий приоритет  
    35. Так что class="Node IsRoot" дает margin-left:0  
    36. */  
    37. .IsRoot {  
    38.     margin-left: 0;  
    39.     border-bottom:1px solid #fff;
    40.    
    41. }
    42. /* содержание (заголовок) узла */
    43.  .Content {  
    44.     margin-left:18px;  
    45.     /* высота заголовка - как минимум равна Expand  
    46.         Т.е правая колонка всегда выше или равна левой.  
    47.         Иначе нижний float будет пытаться разместиться на получившейся ступеньке  */    
    48.     min-height: 18px;  
    49. }  
    50. /* все правила после * html выполняет только IE6 */
    51.  * html .Content {  
    52.      height: 18px; /* аналог min-height для IE6 */
    53. }
    мне нужно получить такой список, что были у каждого li была проведена граница, типа столбца в excel
    Код (Text):
    1. .Container ul li {
    2.     border-top:1px solid #fff inherit;
    3. margin:0; padding:0
    4. }
    Получается, что все потомки узла сравниваются с узлом, то есть вложенность уж не видна.

    Мне бы хотелось, что бы список(оступы потомка от родителя сохранялись) оставался на месте, а границы были типа столбца в excel


    3 дня уж бьюсь, не пойму....-((( Помогите, пожалуйста.В чем ошибка?