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:
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?