How to move text from a pagination item

Question

At: http://nathansearles.com/loopedslider/example-4.html , the pagination actually has numbers in it (you can see this if you view source.) I looked at the css and I can't figure how they make the numbers disappear... Its obvoius how the images are shown and all that but... ya, thanks for helping with this, its something small, just can't figure it out.

thanks

Answer 1

They are using a background image for this. Take a look at the source using firebug or any live DOM inspector, and you can see

ul.pagination a
{
    background-image: url(http://nathansearles.com/loopedslider/pagination.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    display: block;
    height: 0px;
    overflow: hidden;
    padding-top: 12px;
    width: 12px;
}

If you change the height to a higher value then you can see the numbers also. All the following combined values will make the text to a portion below the image.

height: 0px; 
overflow: hidden;
padding-top: 12px;

Answer 2

the pagination actually has numbers in it (you can see this if you view source.) I looked at the css and I can't figure how they make the numbers disappear...

Here is its CSS:

ul.pagination a {
display:block;
width:12px;
padding-top:12px;
height:0;
overflow:hidden;
background-image:url(pagination.png);
background-position:0 0;
background-repeat:no-repeat;
}

It hides the number with height equalized to 0 and overflow set to hidden and shows the image instead using background-position while making padding-top to 12px

Answer 3

ul.pagination a { background-image: url(http://nathansearles.com/loopedslider/pagination.png); background-position: 0px 0px; background-repeat: no-repeat; display: block; height: 0px; overflow: hidden; padding-top: 12px; width: 12px; }

Height and overflow are hiding the text while padding-top is allowing for enough height for the background image to display.