Example 1
Some Content
Some Content
HTML Code
<![CDATA[<ul class="pagination buttons">
<li><span class="extreme disabled">«</span></li>
<li><span class="skip disabled">‹</span></li>
<li><span class="current">1</span></li>
<li><a href="./?offset=10">2</a></li>
<li><a href="./?offset=20">3</a></li>
<li><a href="./?offset=30">4</a></li>
<li><a href="./?offset=40">5</a></li>
<li><a href="./?offset=50">6</a></li>
<li><a href="./?offset=60">7</a></li>
<li><a href="./?offset=70">8</a></li>
<li><a href="./?offset=80">9</a></li>
<li><a href="./?offset=90">10</a></li>
<li><a href="./?offset=10" class="skip">›</a></li>
<li><a href="./?offset=90" class="extreme">»</a></li>
</ul>
]]>
CSS Definition
<![CDATA[/* -- PAGINATION -- */
ul.pagination {
font-size: 0.8em;
display: block;
width: auto;
}
ul.pagination li {
float:left;
list-style: none;
}
ul.pagination a,
ul.pagination span {
display: block;
float: left;
margin: 0em 0.3em 0.35em 0em;
padding: 0.15em 0.5em 0.1em 0.5em; /* Links */
background: #EEEEEE url(layout-button-menu-gradient.png) repeat-x scroll center top;
border-color: #CCCCCC #999999 #999999 #CCCCCC;
border-style: solid;
border-width: 1px;
color: #333333;
font-family: "Lucida Grande",Tahoma,Arial,Verdana,sans-serif;
font-size: 1em;
font-weight: normal;
line-height: 1.3em;
text-decoration: none;
outline: none;
}
ul.pagination a:hover {
border-color: #cdd7dd #9aa6aa #9aa6aa #cdd7dd;
background-color: #eff9ff;
background: url(layout-button-menu-hover-gradient.png) repeat-x bottom center #eff9ff;
}
ul.pagination a:focus {
border-color: #9aa6aa #cdd7dd #cdd7dd #9aa6aa;
color: #333;
background: url(layout-button-menu-hover-gradient.png) repeat-x bottom center #eff9ff;
}
ul.pagination span {
display: block;
float: left;
background-color: #DEE8EE !important;
border-color: #CDD7DD !important;
}
ul.pagination span.current {
background-color: #DEE8EE !important;
border-color: #CDD7DD !important;
font-weight: bold;
}
ul.pagination span.more {
background-color: #FFF !important;
border-color: #FFF !important;
padding-left: 0em;
padding-right: 0em;
}
ul.pagination a.skip {}
ul.pagination a.extreme {}
ul.pagination span.disabled {
color: gray;
}
]]>