CSS for pagination links

Question

Hello,

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?

1. Start at an absolute position of 940 px from the top of the screen and 100 px from the right.

2. 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 href='{$_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;
    }

Answer 1

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;
}

Answer 2

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">&lt; 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 &gt;</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.