Раздвижные двери прозрачная накладка - PullRequest
Новая
       16

Раздвижные двери прозрачная накладка

2 голосов
/ 10 декабря 2011 
.menu li {
    list-style:none;
    float:left;
    padding-right:20px;
    padding-top:25px;
}

.menu li a, .menu li a:visited {
    color:#ffffff;
    font-size:12px;
    text-decoration:none;
    background:url(images/menu_hover_right.png) top right no-repeat;
    padding-right:10px;
}

.menu span {
    background:url(images/menu_hover.png) top left no-repeat;
    padding-left:10px;
    padding-top:2px;
}

Кто-нибудь знает, как расположить их рядом друг с другом, оба изображения прозрачны на круглых сторонах.

bug image.

1 Ответ

0 голосов
/ 13 декабря 2011

Проблема в том, что вы на самом деле сохраняете изображения в обратном направлении. Левое изображение должно быть коротким, а правое - расширенным. После того, как вы изменили это, ваш CSS должен сразу встать на свои места: 

.menu { list-style: none; }
.menu li {
    float: left;
    font-size: 12px;
    margin: 25px 10px 0; }
.menu li a {
    background: none 0 0 no-repeat;
    text-decoration: none;
    padding: 0 0 0 10px;
    display: inline-block; }
.menu li a:hover { 
    background-image: url(images/menu_hover.png);
    color: #ffffff; }
.menu li a span {
    background: none 100% 0 no-repeat;
    float: left;
    padding: 2px 10px 0 0;
    display: block; }
.menu li a:hover span { background-image: url(images/menu_hover_right.png); }

Обычно хорошей идеей является установка высоты внутри как в .menu li a, так и в .menu li a span. Из-за несоответствий в браузере, заполнение является невероятно ненадежным способом установки фиксированной высоты.

...