Ir para conteúdo
Fórum Script Brasil
  • 0

Paginação responsiva em css


Clayton

Pergunta

Olá amigos como podem ver na foto abaixo não consigo fazer a paginação ficar no fim da tela e quando movo a tela fica tudo embolado, alguém pode ajudar?eis o código de exibir os produtos:

<div class ="container">
<div class ="content">
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<table width="100%" height="0" cellspacing="60" cellpadding="60">

    <?php
        if (isset($_GET['idCat'])) {
        $idCat = $_GET['idCat'];
        require_once ('./funcao/conecta.php');
        $conn = conecta();
        $i = 1;
        $limite = 10;
        $pg = isset($_GET['pg']) ? (int) $_GET['pg'] : 1;
        $inicio = ($pg * $limite) - $limite;
        $busca = $conn->prepare("SELECT * FROM `produtos` WHERE `id_categoria` = " . $idCat . " ORDER BY `id` LIMIT $inicio,$limite"); //Aqui eu filtro os produtos de determinada categoria
        $busca->execute();
          while ($linha = $busca->fetch(PDO::FETCH_ASSOC)) {
          echo'<div class ="item">';
          echo '<div align ="left"><img src= "'.$linha['foto'].'"><br></div>';
          echo'<br>';
          echo'</div>';


            if ($i % 5 == 0) {
                echo "<tr>";
            }
            $i++;
        }
        echo'<div class="clear"> </div>';

//calcula o total de paginas a serem exibidas
        $query = $conn->prepare("SELECT * FROM produtos WHERE id_categoria = $idCat");
        $query->execute();
        $result = $query->fetchAll(PDO::FETCH_ASSOC);
        $total = count($result);
        $qtdPag = ceil($total / $limite);
//Cria os links para navegação das paginas
        $categoriaAtual = 'idCat=' . $idCat;
        echo ' <div class = "paginacao"><div align = "center" ><a href="?' . $categoriaAtual . '&pg=1">Primeira Página</a>  ';
        for ($i = 1; $i <= $qtdPag; $i++) {

            if ($i == $pg) {
                echo $i;
            } else {
                echo "<a href='index.php?$categoriaAtual&pg=$i'>" . $i . "</a>";
            }
        }

        echo "   <a href=\"?$categoriaAtual&pg=$qtdPag\">Última Página</a> ";
    }
    ?>
  </div>

e o código da paginação:

.paginacao {
  position:relative;
  display:block;
  font: bold 15px Arial, times, Serif;
  padding: 30px;
}

.paginacao a {
display: inline;
text-align: center;
border:3px solid #0b40eb;
color: #0b40eb;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding:10px 15px;
transition: all 0.3s linear;
text-decoration: none;
}
.paginacao a:hover, div.digg a:active {
color: #638425;
background: #f1ffd6;
border: 1px solid #85bd1e;
}
.paginacao span.atual {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
font-weight: bold;
background-color: #000099;
color: #FFF;
}
.paginacao span.desabilitado {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
color: #DDD;
}

muito obrigado.

Screenshot at 2016-07-23 12:11:48.png

Screenshot at 2016-07-23 12:05:08.png

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...