CSS for pagination links
I am having problems with the CSS for the pagination page number links below. What CSS would make the links have the following properties below?
Start at an absolute position of 940 px from the top of the screen and 100 px from the right.
Be 10 px apart from each other.
Thanks in advance,
John
/****** build the pagination links ******/
// range of num links to show
// if not on page 1, don't show back links
if ($currentpage > 1) {
// show << link to go back to page 1
echo " <div class='pages'><div class='pages'><a hr开发者_StackOverflowef='{$_SERVER['PHP_SELF']}?currentpage=1&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'><<</a></div> ";
// get previous page num
$prevpage = $currentpage - 1;
// show < link to go back to 1 page
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'><</a></div> ";
} // end if
// loop to show links to range of pages around current page
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
// if it's a valid page number...
if (($x > 0) && ($x <= $totalpages)) {
// if we're on current page...
if ($x == $currentpage) {
// 'highlight' it but don't make a link
echo " <div class='pages'>[<b>$x</b>] </div>";
// if not current page...
} else {
// make it a link
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$x&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'>$x</a></div> ";
} // end else
} // end if
} // end for
// if not on last page, show forward and last page links
if ($currentpage != $totalpages) {
// get next page
$nextpage = $currentpage + 1;
// echo forward link for next page
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'>></a></div> ";
// echo forward link for lastpage
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}&searching=yes&search=search' class='linksp'>>></a></div> ";
} // end if
/****** end build pagination links ******/
The CSS:
div.pages > a
{
position: absolute;
left: 100px;
top: 940px;
width:10px;
margin-right: 10px;
}
div.pages
{
float: left;
}
a.linksp:link {
color: #000000; text-decoration: none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.linksp:visited {
color: #000000; text-decoration: none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.linksp:active {
color: #000000; text-decoration: none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.linksp:hover {
color: #000000; text-decoration: none;
background-color: #FFFF00;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
div.pages > a
{
position: absolute;
left: 100px;
top: 940px;
margin-right: 10px;
}
You may need to add the following as well if you haven't already:
div.pages
{
float: left;
}
I'm not sure exactly how your page is structured, so I'll provide my own HTML as an example. You need to absolutely position a block element that surrounds your page navigation.
<div class="pagination">
<div class="page previous"><a href="?page=2">< Previous Page</a>></div>
<div class="page"><a href="?page=1">1</a></div>
<div class="page"><a href="?page=2">2</a></div>
<div class="page current"><a href="?page=3">3</a></div>
<div class="page"><a href="?page=4">4</a></div>
<div class="page next"><a href="?page=4">Next Page ></a></div>
</div><!-- .pagination -->
And then the CSS:
.pagination {
position: absolute;
left: 100px;
top: 940px;
}
.pagination .page {
float: left;
width: 15px;
height: 15px;
margin-right: 10px;
}
You need the div.pagination
because you cannot dynamically absolutely position each item a few more pixels over.
精彩评论