Форматирование тега <li>

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем liga, 17.12.2008.

  1. liga
    Offline

    liga Пользователь

    Регистрация:
    21.10.2008
    Сообщения:
    495
    Симпатии:
    18
    Пол:
    Мужской
    Меню отображается как список ul - li
    Используя CSS, что нужно прописать, чтобы вместо точки (<li>) был например рисунок strelka.bmp ?
    Делал background:... На сайте отображалась и точка и рисунок.
     
  2.  
  3. Dead Krolik
    Offline

    Dead Krolik специалист

    Регистрация:
    13.04.2007
    Сообщения:
    3 688
    Симпатии:
    101
    Пол:
    Мужской
  4. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Ну в последнем шаблоне стили были примерно такие....
    Код (PHP):
    1. #left ul.menu{
    2. list-style-type: none;
    3. padding:10px;
    4. padding-top:0px;
    5. padding-bottom:0px;
    6. margin:0;
    7.  
    8. }
    9. #left ul.menu li{
    10. height:24px;
    11. max-height:24px;
    12. }
    13.  
    14. #left ul.menu li {
    15. text-indent:500px;
    16. }
    17.  
    18. #left ul.menu li a{
    19. display:block;
    20. height:24px;
    21. max-height:24px;
    22. overflow:hidden;
    23. background: url('../images/menu_rus.png') no-repeat;
    24. }
    25. #left ul.menu li.parent.active{
    26. height:60px !important;
    27. max-height:60px !important;
    28. }
    29. #left ul.menu li.parent.active ul{
    30. padding:0;
    31. padding-left:10px;
    32. margin:0;
    33. list-style-type: none;
    34. }
    35. #left ul.menu li.parent.active ul li{
    36. height:14px;
    37. max-height:14px;
    38. line-height:14px;
    39. overflow:hidden;
    40. margin-top:0px;
    41. margin-bottom:0px;
    42. padding-top:0px;
    43. padding-bottom:0px;
    44. }
    45. #left ul.menu li.parent.active ul li a{
    46. display:block;
    47. height:14px;
    48. max-height:14px;
    49. line-height:14px;
    50. overflow:hidden;
    51.  
    52. }
    53. #left ul.menu li.parent.active.item69 ul li a{
    54. background: url('../images/menu_sub1.png') no-repeat;
    55. }
    56. #left ul.menu li.parent.active.item70 ul li a{
    57. background: url('../images/menu_sub2.png') no-repeat;
    58. }
    59.  
    60. #left ul.menu li.item69 a{background-position: 0% 0%;}
    61. #left ul.menu li.item70 a{background-position: 0% 17%;}
    62. #left ul.menu li.item71 a{background-position: 0% 34%;}
    63. #left ul.menu li.item72 a{background-position: 0% 50%;}
    64. #left ul.menu li.item73 a{background-position: 0% 66%;}
    65. #left ul.menu li.item74 a{background-position: 0% 83%;}
    66. #left ul.menu li.item75 a{background-position: 0% 100%;}
    67.  
    68.  
    69. #left ul.menu li.parent.active ul li.item76 a{background-position: 0% 0%;}
    70. #left ul.menu li.parent.active ul li.item77 a{background-position: 0% 50%;}
    71. #left ul.menu li.parent.active ul li.item78 a{background-position: 0% 100%;}
    72.  
    73. #left ul.menu li.parent.active ul li.item79 a{background-position: 0% 0%;}
    74. #left ul.menu li.parent.active ul li.item80 a{background-position: 0% 50%;}
    75. #left ul.menu li.parent.active ul li.item81 a{background-position: 0% 100%;}


    плюс хаки - под IE7 -
    Код (PHP):
    1. ul.menu li.parent.active ul li {float:left;}
    2. ul.menu li.parent.active ul li a{height:1%;}

    а IE6 не понимает полупрозрачный png..
     

Поделиться этой страницей

Загрузка...