CODEWITHSUNDEEP
css
John
John

Reputation: 4944

Styling Pagination Links

I am having a hard time applying CSS to some pagination links. I would like the links to show horizontally at the bottom of the page, centered:

                                        1 2 3 > >>

Right now with the CSS, they show vertically, centered, and near the top of the page:

                                           1
                                           2
                                           3
                                           >
                                           >>

What sort of CSS can I apply to the "pages" class in order to get these links displayed as I would like?

Thanks in advance,

John

if ($currentpage > 1) {   
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=1&find={$_SESSION['find']}' class='links'><<</a></div> ";   
   $prevpage = $currentpage - 1;  
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage&find={$_SESSION['find']}' class='links'><</a></div> ";  
} // end if   

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='{$_SERVER['PHP_SELF']}?currentpage=$x&find={$_SESSION['find']}' class='links'>$x</a></div> ";  
      } // end else  
   } // end if   
} // end for  

if ($currentpage != $totalpages) {    
   $nextpage = $currentpage + 1;     
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage&find={$_SESSION['find']}' class='links'>></a></div> ";  
   echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}' class='links'>>></a></div> ";  
} // end if

The CSS:

.pages
    {
    text-align: center;
    margin-top: 10px;
    margin-bottom:0px;
    padding:0px;
    font-family: Arial, Helvetica, sans-serif ;
    }   

a.links:link {
    color: #000000; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

Upvotes: 0

Views: 221

Answers (1)

cletus
cletus

Reputation: 625097

Two things:

  1. You need to put an entity reference in for the anchor text. That means &gt; instead of >; and
  2. You can put the links in a row in multiple ways, including making them display: inline or if you want more control over margins use float: left although this will have other affects on your layout.

For example, this is the sort of navigation you should be aiming for:

<div id="nav">
  <a href="page1">1</a>
  <a href="page2">2</a>
  <a href="page3">3</a>
  <a href="pagenext">&gt;</a>
  <a href="pagelast">&gt;&gt;</a>
</div>

with:

#nav { overflow: hidden; }
#nav a { display: block; float: left; margin: 4px 8px; }
#nav a:hover { background: #CCC; color: white; }

The HTML is minimal and to the point. Prefer making anchors (<a>) display: block instead of putting them in a <div> because this way they will be clickable anywhere within the box, not just on the number/symbol text. Larger target areas are better.

Upvotes: 2

Related Questions