Pagination Round white Menu


« 1 2 3 4 5 6 7 8 9 10 50 80 »

HTML

  • <div class=“onlycssmenu-paging clearfix”>
  • <span>« </span>
  • <span class=“active”>1</span>
  • <a href=“#” title=“Go to page 2″>2</a>
  • <a href=“#” title=“Go to page 3″>3</a>
  • <a href=“#” title=“Go to page 4″>4</a>
  • <a href=“#” title=“Go to page 5″>5</a>
  • <a href=“#” title=“Go to page 6″>6</a>
  • <a href=“#” title=“Go to page 7″>7</a>
  • <a href=“#” title=“Go to page 8″>8</a>
  • <a href=“#” title=“Go to page 9″>9</a>
  • <a href=“#” title=“Go to page 10″>10</a>
  • <span></span><a href=“#” title=“Go to page 50″>230</a>
  • <a href=“#” title=“Go to page 231″>80</a>
  • <a href=“#” title=“Go to Next Page”>»</a>
  • </div>

CSS

  • .onlycssmenu-paging, .onlycssmenu-paging a, .onlycssmenu-paging span {
  • font-family:Arial, Helvetica, sans-serif;
  • font-size:12px;
  • }
  • .onlycssmenu-paging {
  • height:20px;
  • line-height:20px;
  • margin:0;
  • padding:0;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • background:url(images/paging_menu_bg.gif) no-repeat left top;
  • }
  • .onlycssmenu-paging a, .onlycssmenu-paging span {
  • float:left;
  • padding:0;
  • margin:0 2px;
  • color:#51626f;
  • width:24px;
  • height:25px;
  • text-align:center;
  • vertical-align:middle;
  • line-height:25px;
  • text-decoration:none;
  • }
  • .onlycssmenu-paging a{
  • background-position:0 0px;
  • }
  • .onlycssmenu-paging span {
  • background-position:0 -30px;
  • color:#51626f;
  • }
  • .onlycssmenu-paging a:hover, .onlycssmenu-paging .active {
  • background-position:0 -30px;
  • color:#626262;
  • }

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera