Фоновая позиция Nivo игнорируется - PullRequest
Новая
       7

Фоновая позиция Nivo игнорируется

0 голосов
/ 14 февраля 2012

Хотелось бы, чтобы кто-нибудь помог мне устранить неполадки моего css для фонового позиционирования на слайдере nivo, который я внедряю в новый дизайн.

Положение фона игнорируется для .nivo-nextNav, и я не могу понять, почему.

Вот мой css: 

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
display:block;
width:43px;
height:45px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
background-position: -43px 0;
right: 22px;
}

Ссылка на страницу: http://www.plumeriawebdesign.com/Headstand%20Software/

У меня сейчас работает. Я изменил CSS для .nivo-directionNav a на следующее: 

.nivo-directionNav a {
position:absolute;
top:40%;
z-index:9;
cursor:pointer;
width: 43px;
height: 45px;
text-indent:-9999px;
background-image:url(../images/arrows.png);
background-repeat: no-repeat;
}

Теперь фон расположен правильно. Любопытно, почему он работает на их слайдере по умолчанию на их сайте, а не на моем. Странно для меня.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2012

background-position позиционирует только фоновое изображение. Но в вашем элементе .nivo-nextNav нет фонового изображения.

Из того, что я вижу, NivoSlider использует такие стрелки: 

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrow.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

Попробуйте использовать тег привязки в начале ваших элементов.

0 голосов
/ 14 февраля 2012

Ваша фоновая позиция установлена ​​в .nivo-nextNav, но .nivo-nextNav не имеет фона, ссылка имеет; 'a' в .nivo-nextNav a <- </p>

самое простое решение: поставить позицию на заднем плане; 

 .nivo-directionNav a {
 .......
 background:url(../images/arrows.png) -43px 0 no-repeat;
...