2009-11-27 72 views
1

我在下面的分页页码链接的CSS有问题。什么CSS会使链接具有以下属性?分页链接的CSS

  1. 从屏幕顶部940 px和右边100 px的绝对位置开始。

  2. 彼此相距10 px。

由于提前,

约翰

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

回答

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

您可能需要添加以下,以及如果你有没有已经:

div.pages 
{ 
    float: left; 
} 
+0

我试过了,它使所有的分页链接堆叠在一起。我希望他们彼此分开。 – John 2009-11-27 05:39:11

+0

请务必在div.pages中设置宽度。这应该防止他们堆积在一起。 另外你可能会想在最后一个div后面添加一个
,然后在你的CSS中添加:br.clear {clear:both; } – 2009-11-27 05:40:51

+0

我增加了宽度:10px;而且他们还在堆叠在一起。 – John 2009-11-27 05:47:02

0

我不确定你的页面结构如何,所以我会提供自己的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,因为你不能动态绝对几个像素位置上的每个项目。