8

Estou fazendo um software (minigame) que trabalha com um baralho. No painel administrativo do mesmo eu preciso visualizar e consultar o baralho do jogo. Eu realizo uma consulta na base de dados e, com os resultados retornados, imprimo na tela dentro de uma tag ul com várias tags li. Testei no Firefox, Safari, Chrome e Opera e acontece um problema.

Vejam a imagem de como o conteúdo é impresso na tela: Erro no front

As cartas eram para sair todas como no primeiro bloco de cartas, mas não sei o que está acontecendo, pois ficam espaços vazios onde os mesmo eram pra ser preenchidos com cartas. Todas as cartas estão sendo devidamente retornadas pela consulta, só que estão ficando em lugares errados.

Tenho os código HTML/PHP abaixo. Faço uma consulta, que me retorna os valores corretos, mas fora do lugar como na imagem acima.

<ul>
        <?php 
                $sql_Card = "select * from sv_cartas limit 0, 30";

                try{
                    $querySelectCard = $conecta->prepare($sql_Card);
                    $querySelectCard->execute();

                    $resultSelectCard = $querySelectCard->fetchAll(PDO::FETCH_ASSOC);
                }catch(PDOException $erroSelectCard){
                    echo "Ocorreu um erro ao consultar as cartas";
                }

                foreach ($resultSelectCard as $resultCampos) {
                    $descricao = $resultCampos['cartaDesc'];
                    $cor = $resultCampos['cartaCor'];
                    $simbolo = $resultCampos['cartaSimbolo'];
                    $numero = $resultCampos['cartaNumero'];
                    $diretorio = $resultCampos['cartaDirectory'];

                    echo "<li>";
                        echo "<img src='../cartas/".$diretorio."' alt='".$descricao."' title='Número:".$numero.", Cor:".$cor.", Símbolo: ".$simbolo." '/>";
                        echo "<strong>Carta: </strong><span>".$descricao."</span>";
                    echo "</li>";
            }
        ?>
    </ul>

E meu CSS parece normal. Vejam:

.pagcartas ul{list-style: none;
          display: block;
          font: 12px Arial, Helvetica, sans-serif;
          float: left;
          padding: 5px 0 10px 8px;
          margin: 10px 0 0 12px;                 
          border: 1px solid #93AAB5;
          border-radius: 10px;
          background: #E7ECEF;
          width: 842px;
          }                        

.pagcartas ul li{background: #70909D;  
             padding: 2px 2px 5px 2px;
             float: left;
             border: 1px solid #ccc;
             margin: 5px 8px;
             border-radius: 10px;
             text-align: center;
             display: inline;
             } 

.pagcartas ul li img{border: 1px solid #ccc;
                 display: block;
                 border-top-left-radius: 5px;
                 border-top-right-radius: 5px;
                 width: 95px;
                 margin-bottom: 3px;
                 }                              

.pagcartas ul li strong{color: #fff}    

.pagcartas ul li span{color: #333}

Alguém já passou por algo parecido?

10
  • O que você quis dizer com fora do lugar qual era o resultado esperado? E por favor, edite o seu código incluído marcação de código para ficar mais fácil a leitura.
    – Cleiton
    9/01/2014 às 3:40
  • @Cleiton Como faço para marcar o codigo segundo a sua linguagem aqui no Stackoverflow?
    – Luitame
    9/01/2014 às 3:46
  • @Luitame a marcação estava correta (para CSS), o que faltou foram 4 espaços em branco antes de cada código. Coloquei, e marquei também a parte de PHP, dá uma olhada no histórico de edição pra ver como é.
    – mgibsonbr
    9/01/2014 às 3:48
  • Obrigado @mgibsonbr! Eu falo gora do lugar por que são varios elementos 'li' impressos. Então todas as linhas abaixo eram pra ser impressas assim como o primeiro bloco de cartas. Mas só que não acontece assim. Ele simplesmente coloca deixa espaço vazios...
    – Luitame
    9/01/2014 às 3:50
  • 1
    Caro, tente postar o código HTML resultante do processamento da consulta. 9/01/2014 às 4:14

1 Resposta 1

7

Desculpas pessoal por atormentar vocês com essa pergunta. Mas depois demorar mais de 1 hora e meia tentando ver o causador desse problema. Descobri que o motivo de estar acontecendo isso é culpa do design gráfico que fez o baralho as imagens são de tamanhos diferentes por isso estava desorganizado em espaços em branco pois uma era maior do que a outra. Consegui resolver isto, definindo o height para imagem e tudo rodou normal. :D

Código Alterado:

.pagcartas ul{list-style: none;
          display: block;
          font: 12px Arial, Helvetica, sans-serif;
          float: left;
          padding: 5px 0 10px 8px;
          margin: 10px 0 0 12px;                 
          border: 1px solid #93AAB5;
          border-radius: 10px;
          background: #E7ECEF;
          width: 842px;
          }                        

.pagcartas ul li{background: #70909D;  
             padding: 2px 2px 5px 2px;
             float: left;
             border: 1px solid #ccc;
             margin: 5px 8px;
             border-radius: 10px;
             text-align: center;
             display: inline;
             } 

.pagcartas ul li img{border: 1px solid #ccc;
                 display: block;
                 border-top-left-radius: 5px;
                 border-top-right-radius: 5px;
                 width: 95px;
                 height: 127px; /*Foi isso aqui que solucionou :P aff*/
                 margin-bottom: 3px;
                 }                              

.pagcartas ul li strong{color: #fff}    

.pagcartas ul li span{color: #333}

Olhem como ficou uma belezura... Hehehe inserir a descrição da imagem aqui

Agora todas uma do lado da outra enfileiradas. Perfeito. :D

4
  • 1
    Hehe de fato, é sutil... Na sua imagem parecia que estava tudo da mesma altura, então nem me incomodei em testar. Se o tivesse feito, teria visto o problema imediatamente...
    – mgibsonbr
    9/01/2014 às 5:39
  • 2
    mas valeu pela força. Essas coisas acontecem principalmente com os juniors hehe! Abraços...
    – Luitame
    9/01/2014 às 5:55
  • 1
    Ah ja tava animado pra responder logo que vi a pergunta, tinha ctz que era isso...hsuahsaush mais que bom que deu certo... xD 9/01/2014 às 11:56
  • Hehe vlw @KennyRafael !!!
    – Luitame
    9/01/2014 às 18:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .