KAS Lab

Design Paging section via HTML and CSS

HTML Code

<div style="clear:both; border-top:1px solid #e6e6e6; border-bottom:1px solid #fff"></div> <div class="paging"> <ul> <li><a href="#"> <img src="[img url 1]" /> </a></li> <li><a href="#"> 1 </a></li> <li class="selected"><a href="#"> 2 </a></li> <li><a href="#"> 3 </a></li> <li><a href="#"> 4 </a></li> <li><a href="#"> 5 </a></li> <li><a href="#"> 6 </a></li> <li><a href="#"> 7 </a></li> <li><a href="#"> 8 </a></li> <li><a href="#"> 9 </a></li> <li>  ............   </li> <li><a href="#"> 24 </a></li> <li><a href="#"> 25 </a></li> <li><a href="#"> 26 </a></li> <li><a href="#"> <img src="[img url 2]" /> </a></li> </ul> </div>

CSS Code

.paging{ width:600px; height:30px; margin:8px auto; padding: 0; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; -ms-border-radius:6px; } .paging ul{ margin:0; padding:0;} .paging ul li, .paging ul li a{ float:left;} .paging ul li a{ height:18px; padding:5px 8px; background:#FFF; color:#737373; border:1px solid; border-color: #e7e3e2 #ffffff #e7e3e2 #e7e3e2;} .paging ul li:first-child a{ padding:5px 8px; background:#FFF; color:#737373; border-right:1px solid #FFFFFF; border-radius: 6px 0px 0px 6px; -moz-border-radius:6px 0px 0px 6px; -webkit-border-radius:6px 0px 0px 6px; -o-border-radius:6px 0px 0px 6px; -ms-border-radius:6px 0px 0px 6px; overflow:hidden} .paging ul li:last-child a{ padding:5px 8px; background:#FFF; /*background: url(../images/dash2.png) center center no-repeat #FFF;*/ color:#737373; border-right:1px solid; border-color: #e7e3e2; border-radius:0 6px 6px 0; -moz-border-radius:0 6px 6px 0; -webkit-border-radius:0 6px 6px 0; -o-border-radius:0 6px 6px 0; -ms-border-radius:0 6px 6px 0; overflow:hidden} .paging ul .selected a{ clear:both; background:url(../images/gradient_bnw_border.png) bottom center repeat-x; border-right:1px solid #f5f5f5; } .paging li a:hover, .paging ul li:first-child a:hover, .paging ul li:last-child a:hover{ background:#737373; color:#ffffff; } .paging ul li img{ width:auto; height:17px;} .page_center{ background:#f5f5f5; width:auto; height:auto; padding:5px 0px; margin:0 auto; }

Snap Shot