How to adjust navigation arrows

Navigation
6

I need to adjust navigation arrows of a page that I have, but all the changes I make can not get it right, I need to initially make them larger and set the size to 36px by < in> 34px , the size was correct, but I can not seem to keep the arrows centered and spaced out to make navigation on mobile devices easier.

What I have is this:

 
.jcarousel-prev, .jcarousel-next {
    position: absolute;
    top: -35px;
    width: 19px;
    height: 19px;
    cursor: pointer;
    background-color: #bfbfbf;
    background-image: url(images/carousel-arrows.png);
    background-repeat: no-repeat;
}

.jcarousel-prev {
    right: 20px;
    background-position: 7px 5px;
}

.jcarousel-next {
    right: 0;
    background-position: -18px 5px; 
}

And what I tried to do was this: 

.jcarousel-prev, .jcarousel-next {
    position: absolute;
    top: -35px;
    width: 36px;
    height: 34px;
    cursor: pointer;
    background-color: #bfbfbf;
    background-image: url(images/carousel-arrows.png);
    background-repeat: no-repeat;
}

.jcarousel-prev {
    right: 35px;
    background-position: 7px 13px;
}

.jcarousel-next {
    right: 0;
    background-position: -18px 13px;    
}

This is the first project that focuses on CSS, my area is programming, so the great difficulty.

Example viewing page: Page with items change More Photos from this product and More pictures beds

    
asked by anonymous 29.01.2015 / 11:31

1 answer

3

Following the suggestion I have made the necessary changes and I have put the changed code as a reply commented in the points where the changes were made. 

/* Setas laterais dos thumbs */
.jcarousel-prev, .jcarousel-next {
    position: absolute;
    top: -35px;
    /* Aqui defini a nova altura e largura */
    width: 36px;
    height: 34px;
    cursor: pointer;
    background-color: #bfbfbf;
    background-image: url(images/carousel-arrows.png);
    background-repeat: no-repeat;
}

.jcarousel-prev {
    /* Aqui defini o novoe espaçamento entre as setas */
    right: 45px;
    /* Posição da seta "Anterior" */
    background-position: 15px 13px;
}

.jcarousel-next {
    right: 0;
    /* Posição da seta "Próxima" */
    background-position: -10px 13px 
}

I thank those who helped me.

    
29.01.2015 / 16:35
How to retrieve values from fields loaded with jQuery Conflict between Simple_HTML_Dom and non-object-oriented functions