CSS: Navigation Bullet, Previous, Next Image

In the to show bulleted image navigation:

HTML Page:

<div class="nivo-controlNav">

            start

            <a >1</a>

            <a >2</a>

            <a >3</a>

            <a class="active">4</a>

            <a >5</a>

            end

</div>

 CSS class:

.nivo-controlNav {

       text-align: center;

       padding: 20px 0;

}

.nivo-controlNav a

{

    display: inline-block;

    width: 22px;

    height: 40px; //it should be 22px in practical world.

    background: url('../../Images/Website/bullets.png') no-repeat;

    text-indent: -9999px;

    border: 0;

    margin: 0 2px;

}

.nivo-controlNav a.active {

       background-position:0 -22px;

}

Actual image:

Output:

How it works?

The bullets image width: 22px and height: 40px. When the class .nivo-controlNav a is called it set bullets.png as background image. Then according to class it set its width:22px and height: 22px. As a result it will only show the top black-bulleted part of the image.

If we call the class active then it sets the background position of the image in the x-axis: 0px, and y-axis: -22px. As a result it will not show the 22px of the image from the top and we will only see the white bulleted part of the image.

Text-indent: -9999px will stop visitor from watching the 1,2,3,4,5 link text in html. Text-indent will put the text into -9999px x-axis which is far away from visiable area.

In order to show the arrow sign vertically in the middle on the left and right side:

CSS class:

#slideshow .arrow{

       height:86px;

       width:60px;

       position:absolute;

       background:url('img/arrows.png') no-repeat;

       top:50%;

       margin-top:-43px;

       cursor:pointer;

       z-index:5000;

}

#slideshow .previous{ background-position:left top;left:0;}

#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}

#slideshow .next:hover{ background-position:right bottom;}

Actual image:

How it works?

Actual image width: 120px and height :172 px. So just calling the class .arrow will show only the width: 60px and height: 86px part of the image.

If we call class .previous then it will show the image size of width: 60px and height: 86px but from left top side. If we call class .next then it will show the image size of width: 60px and height: 86px but from right top.