Search the Community

Здравствуйте! Вот макет: Делаю меню и есть вопрос по зеленой картинке там где Контакты, собственно нужна помощь как ее реализовать. В макете она разделена на две части: Оригинал: Теперь части: Первая Вторая Между элементами списка высота фиксирована. Вот как я попробовал решить задачу: <ul class="menu"> <li class="black-list"><a href="#">Главная страница</a></li> <li class="black-list active" ><a href="#">Контакты</a></li> <li class="black-list"><a href="#">Наш прейскурант</a></li> <li class="black-list"><a href="#">Стоматологический словарь</a></li>...../* Стиль ко всему списку */.menu{ margin-top: 26px; list-style: none; font-family: Arial; color: black;}/* Отступы между элементами */.menu li{margin-bottom: 17px;}/* Контакты */.active{ background: url("img/contacts.png") no-repeat; /* Поставил изображение как фон */ height: 50px; width: 300px; position: relative; left: -20px; padding-left: 19px; padding-top: 4px; margin-bottom: 4px !important;}/* цвет текста в Контакты */.active a{ color: white;}Вот что получается: То что нужно, но отступ между Контакты и следующим элементом слишком велик, а уменьшить не получится потому что высота картинки задана. Подскажите пожалуйста как правильно решить задачку.