If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
The following article explains how to design a pagination to search results or to split a long list of records into more pages. The following tutorial includes HTML/CSS code which can include Digg-like, Clean pagination style that are ready to use in your development projects.
Pagination structure
You can have four main elements :
- Standard Page selector
- Current Active page
- Previous/Next
- Previous/Next button/disable
Your design can be made using HTML list/<ul> which have <li> elements for each pagination and give an ID for the <ul> list to assign a specific pagination style to the list.
Flickr-like
HTML code:
For the HTML code it is very simple and you can add the structure in each pagination-style. all that you have to do is changing the <ul> ID :
Flickr in CSS code:
Digg-like in HTML code:
Digg-like pagination style:
CSS code:
CSS code is very similar to the previous Flickr-like example.
Clean pagination.
HTML code:
For a minimal design.
CSS Code
For this pagination style is :
