Publicado em 10 de abr.

Problema na paginação

Olá Galera Imaster, estou quebrando a cabeça com um problema, então resolvi corre pra o ultimo caso, consultar os Mestre da programação que são vocês.

Meu problema é que tenho uma pagina de noticias ao qual a mesma tem um consulta com paginação criada por mim, só que a mesma esta com um problema aparece até a paginação e funciona normalmente, mais fica com uns pontinhos em cima da caixa de numero de paginação. para melhor explicação abaixo vai uma imagem e o código da pagina.

Lembrando que estes pontos só aparecem no Firefox e no IE, no Chrome ele esta normal não aparece.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.uniaoperfeita.com/uniteste/paginacao_ponto.jpg&key=74881d2477087e3b68ec4baf15ca94a0f7a8390ed06abf0fa3379c6050758478" alt="paginacao_ponto.jpg" />

Código

____________________________________________________________________________________

noticia.php

<!DOCTYPE php >

<?php

@session_start();

if (isset($_SESSION['dados'])) {
$dados = isset($_SESSION['dados']) ? $_SESSION['dados'] : '';

// usuário logado }

Informa qual o conjunto de caracteres será usado.

header('Content-Type: text/html; charset=utf-8');

Conecta ao banco de dados

$conexao = mysql_connect('localhost','root','');
$banco = mysql_select_db('test');

Aqui está o segredo

mysql_query("SET NAMES 'utf8'");
mysql_query('SET character_set_connection=utf8');
mysql_query('SET character_set_client=utf8');
mysql_query('SET character_set_results=utf8');
?>
<script type="text/javascript" language="javascript" src="js/abrejanela.js"></script>
</head>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<LINK rel="stylesheet" type="text/css" href="admin/noticias/noticias/paginacao.css">
<div id="topo-container">
<div id="topo">
<div id="topo1" title="UP!">

<!--[if IE]>

 <div id="ie" align="center">
 Melhor Visualizado no <a href="[http://www.google.com/intl/pt-BR/chrome/browser/](http://www.google.com/intl/pt-BR/chrome/browser/)" style="color:#F00;">Chrome</a> ou <a href="[http://www.mozilla.org/pt-BR/firefox/new/](http://www.mozilla.org/pt-BR/firefox/new/)" style="color:#F00;">Firefox</a>.
 </div>

<![endif]--> </div>

 </div>
 <!-- FIM DA DIV #TOPO -->
</div>

<div id="menu-container">
 <div id="menu">
 <div class="menu-menu-header-container">
 <ul id="menu-menu-header" class="menu">
 <li id="menu-item-1433" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1433">
 <a href="index.php"> PÁGINA PRINCIPAL </a>
 </li>
 <li id="menu-item-1433" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1433">
 <a href="noticia.php"> NOTICIAS </a>
 </li>
 </ul>
 </div>
 </div>
 <!-- FIM DA DIV #MENU -->
</div>
<div id="div_conteiner">
<div id="div_corpo">
 <table border="0" width="0" cellpadding="0" cellspacing="0">
 <tr>
 <td align="center" valign="top">
 <div align="center"> <img src="tamplate/gl_up.png" alt="Públicidade" width="1008" height="35" border="0" /> </div></td>
 </tr>
 <tr>
 <td align="center" valign="top">
 <div align="left" id="div_noticias">
 <?php

// Selecionar servidor $conectar = mysql_connect("localhost", "root", "") or die ("Erro ao logar no BD"); // Selecionar BD mysql_select_db("test", $conectar); // Pegar a página atual por GET $p = @$_GET["pagina"]; // Verifica se a variável tá declarada, senão deixa na primeira página como padrão if(isset($p)) { $p = $p; } else {

$p = 1;
}

// Defina aqui a quantidade máxima de registros por página. $qnt = 14; // O sistema calcula o início da seleção calculando: // (página atual * quantidade por página) - quantidade por página $inicio = ($p*$qnt) - $qnt; // Seleciona no banco de dados com o LIMIT indicado pelos números acima $sql_select = "SELECT * FROM noticias ORDER BY id_noticia DESC LIMIT $inicio, $qnt"; // Executa o Query

$sql_query = mysql_query($sql_select);
?>
 <table border="0">
 <tr>
 <td><FIELDSET>
 <?php

 // Cria um while para pegar as informações do BD
 while($array = mysql_fetch_array($sql_query)) {
 // Variável para capturar o campo "nome" no banco de dados
 $id = $array["id_noticia"];
 $titulo = $array["titulo"];
 $data = $array["data"];
 $descricao = $array["descricao"];
 $categoria = $array["categoria"];

 // Exibe o nome que está no BD e pula uma linha
 echo "<div class='not1' >".$data. ' | ' .$descricao. ' - '.$categoria."</div>";
 echo "<div class='not2' ><a onClick='abreJanela(this.href,700,700);return false;' href='admin/noticias/noticias/noticia_completa.php?id_noticia=".$id."' target='_self'>".$titulo. "</a></div>";
 }
 // Depois que selecionou todos os nome, pula uma linha para exibir os links(próxima, última...)
 ?>
 </FIELDSET>
 </td>
 </tr>
 </table>
 <?php

// Faz uma nova seleção no banco de dados, desta vez sem LIMIT, // para pegarmos o número total de registros $sql_select_all = "SELECT * FROM noticias"; // Executa o query da seleção acimas $sql_query_all = mysql_query($sql_select_all); // Gera uma variável com o número total de registros no banco de dados $total_registros = mysql_num_rows($sql_query_all); // Gera outra variável, desta vez com o número de páginas que será precisa. // O comando ceil() arredonda "para cima" o valor $pags = ceil($total_registros/$qnt); // Número máximos de botões de paginação $max_links = 6; // Exibe o primeiro link "primeira página", que não entra na contagem acima(3)

echo "<ul id='pagination'>";

echo "<li><a href='noticia.php?pagina=1' target='_self'>primeira pagina</a></li> ";

// Cria um for() para exibir os 3 links antes da página atual for($i = $p-$max_links; $i <= $p-1; $i++) { // Se o número da página for menor ou igual a zero, não faz nada // (afinal, não existe página 0, -1, -2..) if($i <=0) { //faz nada // Se estiver tudo OK, cria o link para outra página } else {

echo "<li><a href='noticia.php?pagina=".$i."'target='_self'>".$i."</a></li>";
}
}

// Exibe a página atual, sem link, apenas o número

echo "<li class='current'><a href='noticia.php?pagina=".$p."'target='_self'>".$p."</a><li>";

// Cria outro for(), desta vez para exibir 3 links após a página atual for($i = $p+1; $i <= $p+$max_links; $i++) { // Verifica se a página atual é maior do que a última página. Se for, não faz nada. if($i > $pags) { //faz nada } // Se tiver tudo Ok gera os links. else {

echo "<li><a href='noticia.php?pagina=".$i."'target='_self'>".$i."</a></li>";
}
}

// Exibe o link "última página"

echo "<li><a href='noticia.php?pagina=".$pags."'target='_self'>ultima pagina</a></li>";

echo "</ul'>";
?>
 </div>
 </td>
 </tr>
 </table>

paginacao.css

body {

	background: rgb(237, 237, 237); font-family: Arial, Helvetica, sans-serif;
}

a {

	color: rgb(0, 137, 204);
}

a:hover {

	color: rgb(51, 51, 51);
}
#pagination {
	margin: 0px auto; padding: 10px 0px 0px; font-size: 12px; display: table;
}

#pagination li {

	margin: 3px; float: left;
}

#pagination li a {

	background: rgb(253, 253, 253); padding: 8px 12px; border-radius: 2px; border: 1px solid rgb(198, 198, 198); color: rgb(75, 75, 75); font-size: 14px; text-decoration: none; float: left; display: block; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#dfdfdf',GradientType=0 );
}

#pagination li a span {

}
#pagination li a:hover {

	box-shadow: 0px 0px 2px #898989;
}

#pagination li a:active {

	background: rgb(223, 223, 223); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#fdfdfd',GradientType=0 ); box-shadow: none;
}

#pagination li.current a {

	background: rgb(21, 158, 217); border-color: rgb(0, 103, 163); color: rgb(255, 255, 255); text-decoration: none; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed9', endColorstr='#0183ce',GradientType=0 ); cursor: default; box-shadow: none;
}

#pagination li.current a:hover {

	background: rgb(21, 158, 217); border-color: rgb(0, 103, 163); color: rgb(255, 255, 255); text-decoration: none; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed9', endColorstr='#0183ce',GradientType=0 ); cursor: default; box-shadow: none;
}
 

 

 style.css

/ ############ RESET GLOBAL ################ /
html, body, span, applet, object, iframe,
blockquote, pre, abbr, acronym, address,
big, cite, code, del, dfn,
em, font, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, fieldset, form, label, legend,
caption, tbody, tfoot, thead, th, hr, input{

 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 padding-top:2px;
 vertical-align: baseline;
 background: transparent;
 list-style: none;
 border-collapse: collapse;
 border-spacing: 0;
 text-decoration: none;
}

#ie {
position: absolute;
background-color: #09F;
padding: 10px;
color: black;
width: 280px;
opacity: 0.50;
filter: Alpha(Opacity=50);
}

img a, a img{border: none;}
blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {

content: ""; content: none;
}

body {

 font: 82.5% Verdana, Geneva, sans-serif;
 line-height: 127%;
 color: #666;
}

/ ############ CLASSES COMUNS ############ /
.clear{clear: both;}

:focus {

 outline: 0px;
}

/ --------------------------------------------------------------------------------------------- /
/ Configuração básica padrão para os elementos HTML entre os navegadores web. /
/ --------------------------------------------------------------------------------------------- /

fieldset {

	width:985px;
 margin-bottom: 0;
 border: 1px solid #09F;
 -moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

.not1

{

 font-weight: normal;
	font-size:10px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:4px;
	padding-right:4px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-opacity: 0.99;
}

.not2

{

	font-weight: normal;
	font-size:14px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:4px;
	padding-right:4px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-opacity: 0.99;
}

#banner-container {
	width:100%;
	height:380px;
 background:#FF0;
	padding-top:10px;
}

#banner {
	width:1010px;
	height:350px;
	margin-left:auto;
	margin-right:auto;
	border:solid #FFF 10px;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#div_pre1 {
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	margin:0;
	margin-bottom:10px;
	width:220px;
	height:150px;
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#div_pre2 {
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	margin:0;
	margin-bottom:10px;
	width:220px;
	height:150px;
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#div_pre3 {
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	margin:0;
	margin-bottom:10px;
	width:360px;
	height:150px;
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#div_galeria {
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	margin:0;
	margin-bottom:10px;
	width:1008px;
	min-height:150px;
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#div_agenda {
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	margin:0;
	margin-bottom:10px;
	width:1008px;
	min-height:200px;
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#div_noticias {
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	margin:0;
	margin-bottom:10px;
	width:1008px;
	height:auto;
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
	-moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

#div_banner {
	padding:0;
	margin:0;
	width:650px;
	height:130px;
	background-color:#09C;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#copyright {
	padding:10;
	margin:0;
	width:1010px;
	height:20px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#div_conteiner {
	background-image:url('../tamplate/bg_yellow.jpg');
	padding:0;
	margin:0;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

#div_corpo {
	width:1010px;
	margin-left:auto;
	margin-right:auto;
	margin:0,0,0,0;
}

img {

	border:0;
}

#menu {
	width:1010px;
	height:70px;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 10px; /* Para Firefox */
	-webkit-border-radius: 10px; /*Para Safari e Chrome */
	-o-border-radius: 10px; /*Para Safari e Chrome */
	-ms-border-radius: 10px; /*Para Safari e Chrome */
	border-radius: 10px; /* Para Opera 10.5+*/
}

#menu ul {

	height:40px;
	font-family:Arial negrito;
	margin:auto;
	margin-left:0;
	padding-left:0;
	list-style-type:none;
	font-size:15px;
}

#menu ul li {

	position:relative;
	float: left;
	z-index:4;
}

#menu ul li a {

	text-decoration: none;
	float:left;
	color: #FFF;
	display: block;
	width:auto;
	height:40px;
	line-height:40px;
	text-align: center;
	text-decoration:none;
	padding-right:6px;
	padding-left:6px;
	margin-top:15px;
	z-index:4;
}

#menu ul li a:hover {

	background:#FFF;
	color:#000;
	-moz-border-radius: 8px; /* Para Firefox */
	-webkit-border-radius: 8px; /*Para Safari e Chrome */
	border-radius: 8px; /* Para Opera 10.5+*/
	z-index:4;
}

#menu ul li ul {

	display:none;
	position:absolute;
	top:60px;
	left:0;
	line-height:40px;
	height:40px;
	z-index:4;
}

#menu ul li:hover ul {

	display:block;
	line-height:40px;
	height:40px;
	float:left;
	width:120px;
	z-index:4;
}

#menu ul li ul a {

	width:140px;
	background:#FFF;
	color:#000;
	line-height:40px;
	height:40px;
	margin:0;
	border-bottom:1px solid #0A3A4A;
	-moz-border-radius: 8px; /* Para Firefox */
	-webkit-border-radius: 8px; /*Para Safari e Chrome */
	border-radius: 8px; /* Para Opera 10.5+*/
	z-index:4;
}

#menu ul li ul a:hover {

	width:140px;
	background:#000;
	color:#FFF;
	z-index:4;
}

#menu-container {
	width:100%;
	height:80px;
	background:url('../images/fundo-menu.jpg');
	background-repeat:repeat-x;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	z-index:auto;
}

#pagenavi {
	width:100%;
	height:60px;
	margin-top:3%;
	margin-bottom:2%;
	float:left;
}

#rodape {
	width:100%;
	height:220px;
	background:#333333;
	border-top:solid #999;
	float:left;
}

#rodape-container {
	width:1010px;
	height:220px;
	margin-left:auto;
	margin-right:auto;
}

#rodape-content1 {
	width:300px;
	height:190px;
	float:left;
	padding-right:40px;
}

#rodape-content1 h1 {

	color:#FFF;
	font-size:20px;
}

#rodape-content1 h2 {

	color:#FFF;
	font-size:14px;
}

#rodape-content1 h2 a {

	color:#FFF;
	text-decoration:none;
}

#rodape-content1 h2 a:hover {

	color:#C53E09;
	text-decoration:none;
	background:#FFF;
}

#rodape-content2 {
	width:300px;
	height:190px;
	float:left;
	padding-right:40px;
}

#rodape-content2 h1 {

	color:#FFF;
	font-size:20px;
}

#rodape-content2 h2 {

	color:#FFF;
	font-size:14px;
}

#rodape-content2 h2 a {

	color:#FFF;
	text-decoration:none;
}

#rodape-content3 {
	width:300px;
	height:190px;
	float:left;
}

#rodape-content3 h1 {

	color:#FFF;
	font-size:20px;
}

#rodape-content3 h2 {

	color:#FFF;
	font-size:14px;
}

#topo-container {
	width:100%;
	height:160px;
	margin-top:6px;
}

#topo {
	width:1010px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

#topo img {

	float:left;
}

#topo img a {

	border:none;
}

#topo1 {
	width:295px;
	height:160px;
	float:left;
	background:url(../tamplate/logouptop.png) no-repeat center;

}

#topo2 {
	width:410px;
	height:120px;
	float:left;
	margin-top:10px;
	margin-left:30px;
}

#topo2 input[type="text"] {

	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-ms-border-radius:6px;
	-o-border-radius:6px;
	border-radius:6px;
	background:#CCC;
	height:25px;
	width:160px;
	font-size:18px;
	margin-top:4px;
	padding-top:3px;
	float:left;
}

#topo2 input[type="text"]:focus {

	background:#C53E09;
	color:#FFF;
}

#topo2 h2 {

	width:205px;
	height:34px;
	line-height:34px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-ms-border-radius:6px;
	-o-border-radius:6px;
	border-radius:6px;
	background:#C53E09;
	color:#FFF;
	font-size:16px;
	text-decoration:none;
	margin-top:14px;
}

#topo2 h2 a {

	width:205px;
	height:34px;
	line-height:34px;
	text-align:center;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-ms-border-radius:6px;
	-o-border-radius:6px;
	border-radius:6px;
	background:#C53E09;
	color:#FFF;
	font-size:16px;
	text-decoration:none;
	display:block;
}

#topo2 h2 a:hover {

	background:#8C2C06;
	font-size:17px;
}

#topo2 p {

	background:#C53E09;
	color:#FFFFFF;
	font-size:16px;
	line-height:30px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-ms-border-radius:6px;
	-o-border-radius:6px;
	width:290px;
	padding-left:10px;
}

#topo3 {
	width:220px;
	height:120px;
	float:left;
	margin-top:15px;
	margin-left:30px;
}

#topo3 h2 {

	color:#C53E09;
	font-size:15px;
	text-decoration:none;
	margin:5px;
	line-height:30px;
}

#topo3 img {

	float:left;
	padding-right:7px;
}

.borda_redonda {
	font-size: 2px;
	color: #920091;
}

#publicidade {
	float:right;
}

.style1 {
	color: #FF0033;
	font-size: 16px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style2 {
	color: #FFFF66;
	font-size: 16px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style3 {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
 

 

 E isto ta sendo minha dor de cabeça se alguém por der me ajudar.

Agradeço infinitamente.

Obrigado

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

fernandotholl· 10 de abr.

Seu problema não está no PHP, e sim no CSS:

Tente tirar o formato lista da <ul>:

 

#pagination{
 list-style:none;
}

Icaro_Metall· 10 de abr.

Quando o cara entende, entende e pronto.

Obrigado fernandotholl resolvido cara...