CSS для нумерации страниц

Question

У меня проблемы с CSS для ссылок на номера страниц пагинации ниже. Какой CSS заставит ссылки иметь следующие свойства ниже?

1. Начните с абсолютной позиции 940 пикселей от верхней части экрана и 100 пикселей от правой.

2. На расстоянии 10 пикселей друг от друга.

Заранее спасибо,

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 ******/

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

Я не уверен, как именно ваша страница структурирована, поэтому я приведу свой собственный HTML в качестве примера. Вам необходимо абсолютно позиционировать элемент блока, который окружает вашу страницу навигации.

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

А потом CSS:

.pagination {
    position: absolute;
    left: 100px;
    top: 940px;
}
.pagination .page {
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

Вам нужен div.pagination, потому что вы не можете динамически абсолютно позиционировать каждый элемент на несколько пикселей больше.

Answer 2

div.pages > a
{
    position: absolute;
    left: 100px;
    top: 940px;
    margin-right: 10px;
}

Возможно, вам также понадобится добавить следующее, если вы этого еще не сделали:

div.pages
{
    float: left;
}