I have to say that I really like the usability of page numbers (or alpha lists) in clickable boxes. They are much easier to use/select than just the one-character links, which are often teeny tiny and too close together. So here is an example of how to clickable boxes with CSS - you just have to define the style, then wrap all the links in a div with the "pagination" class. 

Example CSS: 

view plain print about
1/* ------------------------------------------------------- */
2div.pagination {padding:3px; margin:3px; text-align:left; font-size:11px; font-family: Arial, Verdana, Helvetica, sans-serif;}
3
4div.pagination a, div.pagination a:visited {padding: 2px 5px 2px 5px; margin-right: 2px; background: transparent; border: 1px solid #cccccc; text-decoration: none; color: #004499;}
5
6div.pagination a:hover, div.pagination a:active { border: 1px solid #cccccc; color: #000000; background-color: #dddddd;}
7
8div.pagination span.current a:link, div.pagination span.current a:visted { color: #004499; padding: 2px 5px 2px 5px; margin-right: 4px; font-weight: bold; border: 1px solid #e0d9b8; background-color: #edeadb;}
9
10div.pagination span.disabled {padding: 2px 5px 2px 5px; margin-right: 2px; border: 1px solid #e0d9b8; color: #004499; background-color: transparent;}
11/* ------------------------------------------------------- */

Example HTML/ColdFusion code:

view plain print about
1<cfoutput>
2 <div class="pagination">
3 Port Index:&nbsp;&nbsp;
4 <cfloop list="#alphaList#" index="thisAlpha">
5 <cfif alpha neq thisAlpha>
6 <a href="#cgi.SCRIPT_NAME#?#cgi.QUERY_STRING#&alpha=#thisAlpha#">#thisAlpha#</a>
7 <cfelse>
8 <span class="current"><a href="#cgi.SCRIPT_NAME#?#cgi.QUERY_STRING#&alpha=#thisAlpha#">#thisAlpha#</a></span>
9 </cfif>
10 </cfloop>
11 </div>
12</cfoutput>

This entry was posted on February 24, 2009 at 1:42 PM and has received 519 views. There are currently 0 comments. Print this entry.