Не получается сверстать кнопки

[SEObomj]

Есть два варианта кнопки - активная и неактивная. У активной появляется стрелочка (высота кнопки увеличивается).

Margin не помог - стрелочка не выходит за рамки кнопки. С падингом или увеличением высоты кнопка увеличивается, а стрелочка опять не выходит за пределы синего фона((

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

Edited May 29, 2010 by SEObomj

[psywalker]

Изначально нужно заготовить для неё место.

[SEObomj]

Как? margin-top же должен увеличивать границы кнопки

[psywalker]

Как? margin-top же должен увеличивать границы кнопки

Посмотри, как тут сделано у главного меню http://www.psywalker.ru/Portfolio/Business.../main-page.html

[SEObomj]

У вас для бэкграунда используются картинки, а у меня заливка. С картинкой проще, так как у нее ограниченный размеры, а у меня заливка вылезает за границы вместе со стрелочкой. То есть я увеличиваю размеры кнопки для стрелочки и площадь заливки увеличивается.

На всякий случай привожу CSS

#sorts li a:hover,#sorts li.active a,#sorts li.current_page_item a{background:url(../images/down.gif) no-repeat #274d88 50%;color:#fff;cursor:pointer;display:block;
margin-bottom: 6px; text-decoration:none;overflow:hidden;}
#sorts li.active a span,#sorts li.current_page_item a span,#sorts li a:hover span{background:url(../images/down.gif) no-repeat #274d88 50%;display:block;margin-bottom: 6px;}

[psywalker]

а ты сделай картинкой.

[SEObomj]

Спасибо огромное! Почему-то не пришло в голову картинками реализовать Решение:

#sorts li a:hover,#sorts li.active a,{background:url(../images/blue.gif) repeat-x top;color:#fff;cursor:pointer;display:block;
text-decoration:none;overflow:hidden;}
#sorts li.active a span,#sorts li a:hover span {
background:url(../images/down.gif) no-repeat 40% 100%;display:block;padding-bottom: 6px;
}

blue.gif - синяя полоска 1px

down.gif - стрелка

Может кому-нибудь пригодится.

[psywalker]

Спасибо огромное! Почему-то не пришло в голову картинками реализовать Решение:

#sorts li a:hover,#sorts li.active a,{background:url(../images/blue.gif) repeat-x top;color:#fff;cursor:pointer;display:block;
text-decoration:none;overflow:hidden;}
#sorts li.active a span,#sorts li a:hover span {
background:url(../images/down.gif) no-repeat 40% 100%;display:block;padding-bottom: 6px;
}

blue.gif - синяя полоска 1px

down.gif - стрелка

Может кому-нибудь пригодится.

Молодец! Сразу бы так надо делать было.