Вопрос по меню

[FitTech]

Здравствуйте! Вот макет:

Делаю меню и есть вопрос по зеленой картинке там где Контакты, собственно нужна помощь как ее реализовать.

 

В макете она разделена на две части:

 

Оригинал:

 

 

Теперь части:

 

Первая

 

 

Вторая

 

 

 

Между элементами списка высота фиксирована.

 

Вот как я попробовал решить задачу:

<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;}

Вот что получается:

То что нужно, но отступ между Контакты и следующим элементом слишком велик, а уменьшить не получится потому что высота картинки задана.

 

Подскажите пожалуйста как правильно решить задачку.

[sigma77]

Вставляй через :before и позиционируй абсолютно.

[Arthur]

Прочтите сообщение выше и попробуйте сами.

Если не получится:

http://jsfiddle.net/0jta2u58/1/

Разделите кнопку по частям и эти части поместите в соответствующие места(синий и зеленый прямоугольники(понятное дело у меня размеры на глаз).

Достаточно кроссбраузерный код, если вам конечно не нужны IE ниже 8ки.

Edited December 5, 2014 by Arthur

[FitTech]

Вставляй через :before и позиционируй абсолютно.

 

 

Прочтите сообщение выше и попробуйте сами.

Если не получится:

http://jsfiddle.net/0jta2u58/1/

Разделите кнопку по частям и эти части поместите в соответствующие места(синий и зеленый прямоугольники(понятное дело у меня размеры на глаз).

Достаточно кроссбраузерный код, если вам конечно не нужны IE ниже 8ки.

Всё отлично получилось, спасибо, а как решить вопрос такой:

Когда просто бегаю по меню(сверху  в низ), то вид не очень красивый, оно всё прыгает быстро, как можно решить?

[Arthur]

http://htmlbook.ru/css/transition

http://shpargalkablog.ru/2011/07/transformaciya-css.html

http://habrahabr.ru/post/111658/

Edited December 6, 2014 by Arthur

[FitTech]

http://htmlbook.ru/css/transition

http://shpargalkablog.ru/2011/07/transformaciya-css.html

http://habrahabr.ru/post/111658/

Cпасибо, + завтра поставлю

[Arthur]

<<сообщение удалено>>

Edited December 7, 2014 by Arthur