How to adjust navigation arrows

Asked

Viewed 315 times

6

I need to adjust navigation arrows of a page I have, but all the changes I make I can’t get it right, I need to initially make them bigger and set the size as 36px for 34px, the size was correct, but I’m not able to leave the arrows centralized and with a spacing between them that facilitates navigation on mobile devices.

What I got 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.

Page to view the example: Page with change in items More photos of this product and More photos beds

css

  • I used background-position: 15px 13px; in the .jcarousel-prev and background-position: -10px 13px in the .jcarousel-next and it became centered. It may be interesting to look for an icon font that makes it easier to use and contains several icons available, such as font-awesome.

  • Hello @Oeslei, thank you so much for the help, the size and the centralization were cool, but how can I leave them with a spacing between them?

  • You changed the property right of .jcarousel-prev. Leave it as it was before, with 35px that gets right =)

  • If you want to leave a space, increase the value of the property right, do not diminish =).

  • I did just that, thank you very much @Oeslei your help was of great value.

  • @adventistapr if the problem has been solved post your solution as a response. It may be that the way you solved it is the same for future questions concerning the same subject.

Show 1 more comment

1 answer

3


Following the suggestion I made the necessary changes and I put the modified code as a response duly commented on 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.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.