Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
94 lines (81 sloc) 1.34 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pagination Dots</title>
<!--
Pagination Dots
Andrew A. Lee - 2011
This approach is for modern browsers that support display table and table-cell property.
-->
<style>
body {
margin: 0;
padding: 0;
font: 11px/15px Arial, sans-serif;
}
ul,
ol,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
.pg-dot-panel {
padding: 17px;
background-color: #dedede;
border-style: solid;
border-width: 1px 0;
border-color: #fff transparent #999;
}
.pg-dots-row {
display: table;
margin: 0 auto;
}
.pg-dot {
display: table-cell;
padding: 0 7px;
}
.pg-dot a {
display: block;
height: 14px;
width: 14px;
background-color: #aaa;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.pg-dot a:hover {
background-color: #fff
}
.pg-active {
cursor: default;
}
a.pg-active,
a.pg-active:hover {
background-color: #000;
}
</style>
</head>
<body>
<div class="pg-dot-panel">
<ul class="pg-dots-row">
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a href="#" class="pg-active"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
</ul>
</div>
</body>
</html>