Member Avatar for Member #321605

Evening

I've managed to get a pagination code, but I'm at a loss at how to style the links produced. I've tried placing the pagination code inside a div and then styling the links for this div, but there's no change to the output. Can anyone suggest a solution?

<div id="pagination">
	<?php

	// mysql
	
		$per_page = 10;

		if (!isset($_GET['page']) || !is_numeric($_GET['page'])) {
		$page = 1;
		}
		else {
		$page = (int)$_GET['page'];
		}
		$from = (($page * $per_page) - $per_page);
		
		$data = mysql_query ("SELECT * FROM gallery LIMIT $from, $per_page");
?>

<?php
		$total_results = 
		mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM gallery"));

		$total_pages = 
		ceil($total_results['num'] / $per_page);
		if ($page > 1) {
		$prev = ($page - 1);
		echo "<a href=\"?page=$prev\">&lt;&lt;  Previous</a> ";}
		for($i = 1; $i <= $total_pages; $i++) {
		if ($page == $i) {
        echo "$i ";}
		
		else {
        echo "<a href=\"?page=$i\">$i</a> ";}}
		if ($page < $total_pages) {
		$next = ($page + 1);
		echo "<a href=\"?page=$next\">Next &gt;&gt;</a>";}
?></div>

CSS:

#pagination{
	padding-bottom: 10px;}

		#pagination a{
		background-color: red;
		color: white;
		border: 1px;
		border-color: black;
		padding: 2px;}
  • 3 Contributors
  • 5 Replies
  • 106 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Quick checklist and focused next steps. , since you already tried selector variants and suggested checking view-source, the issue narrows to one of these: the pagination anchors are not present in the generated HTML, your stylesheet rule is being overridden, or the CSS rule itself is malformed. was right to try a more specific selector — but the fastest way to confirm which of these is happening is to inspect the live DOM and computed styles.

Use the browser inspector (right‑click → Inspect Element) on the area where pagination should appear. Confirm that:

  • The anchor tags actually exist inside the element with id "pagination".
  • The CSS file you expect is loaded and your rule is listed in the Styles pane (it will show the file and line number).
  • The Computed pane shows which rule wins and whether your rule is crossed out or replaced.

Common fixes that are easy to miss: a CSS declaration can be ignored if it is syntactically invalid, or overridden by a later, more specific rule. Make a simple test by temporarily adding one static anchor inside the #pagination div (no PHP) to see whether your CSS applies. Also hard‑refresh/clear cache or append a query string to the CSS link while testing.

If you want a compact, reliable style for button-like links, use a rule that sets display, padding, text decoration and a proper border shorthand. For example:

#pagination a {
  display: inline-block;
  padding: 4px 8px;
  text-decoration: none;
  border: 1px solid #000;
  background: #c00;
  color: #fff;
}
#pagination a:hover { background: #a00; }

If a global rule is still overriding it, add a specific class to the pagination anchors (as suggested) and target that class, or place your stylesheet/selector after any general link rules. Use the inspector to find the exact selector that overrides yours and modify specificity rather than relying on !important for a long‑term fix. For reference on border syntax and valid values, see the MDN documentation on the border property.

Recommended Answers

All 5 Replies

Member Avatar for macneato

Try this little trick (not sure if it will help)

div#pagination a {
		background-color: red;
		color: white;
		border: 1px;
		border-color: black;
		padding: 2px;}
Member Avatar for Member #321605

Thanks, appreciate the response. Sadly, no change to the result. However, has just dawned on me that at this moment, there isn't enough content to go onto two pages - could this be the cause of the problem?

Member Avatar for ko ko

It may be overwrite by another css statement. Test with this:

#pagination a{
background-color: red ! important;
color: white ! important;
border: 1px ! important;
border-color: black ! important;
padding: 2px ! important;}

Make sure your css path is right.

Member Avatar for Member #321605

Thanks again for the input: your changes have been added but still no luck.

CSS path correct as layout is created with CSS.

Member Avatar for ko ko

Check on browser view source. Are the pagination links within DIV. If it right, there is only one solution, for using class with the pagination links. In PHP:

<?php
$total_results =
mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM gallery"));

$total_pages =
ceil($total_results['num'] / $per_page);
if ($page > 1) {
$prev = ($page - 1);
echo "<a href=\"?page=$prev\" class=\"pglink\">&lt;&lt; Previous</a> ";}
for($i = 1; $i <= $total_pages; $i++) {
if ($page == $i) {
echo "$i ";}
 
else {
echo "<a href=\"?page=$i\" class=\"pglink\"> $i</a> ";}}
if ($page < $total_pages) {
$next = ($page + 1);
echo "<a href=\"?page=$next\" class=\"pglink\">Next &gt;&gt;</a>";
?>

In CSS:

#pagination a.pglink {
    background-color: red;
    color: white;
    border: 1px;
    border-color: black;
    padding: 2px;}

It should be work. Good luck..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.