开发者

Styling Pagination Links

The pagination code below works just fine. However, I'm having an issue with the CSS. The location of the pagination links really only display where I want when the user is on page 1. This is 2800 pixels from the top of the browser.

For pages 2 through n, there is about 100 extra pixels of space between the bottom of the HTML table that I'm paginating and the pagination links. (I. E. the links are about 2900 pixels from the top of the browser.)

On page n (the last page), the pagination links appear about 5600 pixels from the top of the browser. This adds a lot of white space between the bottom of the HTML table that I'm paginating and the links themselves.

Any idea how I could make the links 2800 pixels from the top of the browser no matter what page the user is on?

Thanks in advance,

John

The pagination code:

if ($currentpage > 1) {   
   echo " <div class='pages'><a href='http://www...com/phoenix/index.php?currentpage=1' class='links'><<</a></div> ";  
   $prevpage = $currentpage - 1;  
   echo " <div class='pages'><a href='http://www...com/phoenix/index.php?currentpage=$prevpage' class='links'><</a></div> ";  
} 
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {  
   if (($x > 0) && ($x <= $totalpages)) {  
      if ($x == $currentpage) {  
         echo " <div class='pages'>[<b>$x</b>] </div>";  
      } else {  
     echo " <div class='pages'><a href='http://www...com/phoenix/index.php?currentpage=$x' class='links'>$x</a></div> ";  
      } 
   } 
}  
if ($currentpage != $totalpages) {   
   $nextpage = $currentpage + 1;  
   echo " <div class='pages'><a href='http://www...com/phoenix/index.php?currentpage=$nextpage' class='links'>></a></div> ";  
   echo " <div class='pages'><a href='http://www...com/phoenix/index.php?currentpage=$totalpages' class='links'>>></a></div> ";  
} 

The CSS:

.pages
    {
    color: #000000;
    overflow: hidden;
    display: block;
    float: left;
    margin: 4px;
    margin-top: 2800px;
    margin-bottom:0px;
    margin-left: 10px;
    padding-bottom: 0px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }       


 a.links:link {
    color: #004284; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:visited {
    color: #004284; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }

 a.links:active {
    color: #004284; text-decoration: none; 
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-si开发者_如何学Goze: 24px;
    }

 a.links:hover {
    color: #FFFFFF; text-decoration: none; 
    background-color: #004284;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }   


If I'm reading correctly, it sounds like you want to position: absolute, top: 2800px on .pages.

However, it sounds like a not great design decision to position them that low. If a page is shorter than 2800px, you may lose your links.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜