Perfect pagination style using CSS

Gönderen ceoxi 21 Ağustos 2008 Perşembe Etiketler:

Perfect pagination style using css

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.



This tutorial also includes HTML/CSS code to implement a Flickr-like, Digg-like, Clean pagination style ready to use in your web projects.

Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and IE7.

Download this tutorial (original)

Download this tutorial (Simone Saveri version)



Typical pagination structure
The following image represents an example of a typical pagination structure:



In general you can identify four main elements:
- Previous/Next button (disabled)
- Current Active page
- Standard Page selector
- Previous/Next button (enabled)
You can design this structure using an HTML list (
    ) which contains some
  • elements (one for each pagination element) and apply an ID to the
      list to assign a specific pagination style to the current list. Take a look at these tutorials for an explanation.


      Flickr-like pagination: HTML Code
      Image you want to design a Flickr-like pagination style which looks like this:



      HTML code is very simple and you can reuse this structure in all pagination-style you want only changing the
        ID (in this case I added "pagination-flickr", in bold in the code below):


        Now, you have only to redefine CSS element properties (ul, li, a).


        Flickr-like pagination: CSS Code
        Is very simple:

        ul{border:0; margin:0; padding:0;}

        #pagination-flickr li{
        border:0; margin:0; padding:0;
        font-size:11px;
        list-style:none;
        }
        #pagination-flickr a{
        border:solid 1px #DDDDDD;
        margin-right:2px;
        }
        #pagination-flickr .previous-off,
        #pagination-flickr .next-off {
        color:#666666;
        display:block;
        float:left;
        font-weight:bold;
        padding:3px 4px;
        }
        #pagination-flickr .next a,
        #pagination-flickr .previous a {
        font-weight:bold;
        border:solid 1px #FFFFFF;
        }
        #pagination-flickr .active{
        color:#ff0084;
        font-weight:bold;
        display:block;
        float:left;
        padding:4px 6px;
        }
        #pagination-flickr a:link,
        #pagination-flickr a:visited {
        color:#0063e3;
        display:block;
        float:left;
        padding:3px 6px;
        text-decoration:none;
        }
        #pagination-flickr a:hover{
        border:solid 1px #666666;
        }



        Digg-like pagination: HTML Code
        Ok, now you want to design a Digg-like pagination style which looks like this:



        From the previous tutorial copy and paste the HTML structure. You have only to change the
          ID ("pagination-digg" instead of "pagination-flickr"):



          Digg-like pagination: CSS Code
          CSS code is very similar to the previous Flickr-like example.You have only to change some attributes, and modify #pagination-flikr ID with #pagination-digg, but CSS pagination elements don't change:

          ul{border:0; margin:0; padding:0;}

          #pagination-digg li{
          border:0; margin:0; padding:0;
          font-size:11px;
          list-style:none;
          margin-right:2px;
          }
          #pagination-digg a{
          border:solid 1px #9aafe5
          margin-right:2px;
          }
          #pagination-digg .previous-off,
          #pagination-digg .next-off {
          border:solid 1px #DEDEDE
          color:#888888
          display:block;
          float:left;
          font-weight:bold;
          margin-right:2px;
          padding:3px 4px;
          }
          #pagination-digg .next a,
          #pagination-digg .previous a {
          font-weight:bold;
          }
          #pagination-digg .active{
          background:#2e6ab1;
          color:#FFFFFF;
          font-weight:bold;
          display:block;
          float:left;
          padding:4px 6px;
          }
          #pagination-digg a:link,
          #pagination-digg a:visited {
          color:#0e509e
          display:block;
          float:left;
          padding:3px 6px;
          text-decoration:none;
          }
          #pagination-digg a:hover{
          border:solid 1px #0e509e
          }



          Clean pagination style: HTML Code
          If you like minimal, clean design this example shows how to design a very clean pagination style which looks like this:



          HTML structure is the same of two previous examples. The only thing you have to change is the
            ID with "pagination-clean":


            Clean pagination style: CSS Code
            CSS code for this kind of pagination style is:

            ul{border:0; margin:0; padding:0;}

            #pagination-clean li{
            border:0; margin:0; padding:0;
            font-size:11px;
            list-style:none;
            }
            #pagination-clean li, #pagination-clean a{
            border:solid 1px #DEDEDE
            margin-right:2px;
            }
            #pagination-clean .previous-off,
            #pagination-clean .next-off {
            color:#888888
            display:block;
            float:left;
            font-weight:bold;
            padding:3px 4px;
            }
            #pagination-clean .next a,
            #pagination-clean .previous a {
            font-weight:bold;
            border:solid 1px #FFFFFF;
            }
            #pagination-clean .active{
            color:#00000
            font-weight:bold;
            display:block;
            float:left;
            padding:4px 6px;
            }
            #pagination-clean a:link,
            #pagination-clean a:visited {
            color:#0033CC
            display:block;
            float:left;
            padding:3px 6px;
            text-decoration:none;
            }
            #pagination-clean a:hover{
            text-decoration:none;
            }


            Download this tutorial

Share this post!

Bookmark and Share

0 yorum:

Yorum Gönder

Yorum Yazarken Türkçemizi Doğru Kullanalım!