8
I’m making a software (minigame) that works with a deck. In the administrative panel of the same I need to view and consult the game deck. I perform a query in the database and, with the results returned, print on the screen within a tag ul multi-tagged li. I tested in Firefox, Safari, Chrome and Opera and a problem happens.
See the image of how the content is printed on the screen:
The cards were supposed to come out as in the first block of cards, but I don’t know what’s going on, because there are empty spaces where the same ones were to be filled with letters. All letters are being properly returned by the query, only they are getting in the wrong places.
I have the HTML/PHP code below. I make a query, which returns me the correct values, but out of place as in the image above.
<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>
And my CSS looks normal. Look:
.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}
Someone’s been through something like this?
What did you mean by out of place what was the expected result? And please edit your code included code marking to make it easier to read.
– Cleiton
@Cleiton How do I mark the code according to your language here at Stackoverflow?
– Luitame
@Luitame the markup was correct (for CSS), what was missing were 4 blank spaces before each code. I put, and also marked the PHP part, take a look at the editing history to see how it is.
– mgibsonbr
Thanks @mgibsonbr! I speak From the place why are several elements 'li' printed. So all the lines below were to be printed just like the first block of cards. But it just doesn’t happen that way. It simply puts it leaves empty space...
– Luitame
Your question is unclear. Could you post the expected HTML code, and what’s coming out by highlighting your intention? (if that’s the problem)
– Calebe Oliveira
I couldn’t get reproduce your problem in Chrome or Firefox... Which browser are you using? And, if you have anything different between your case and the linked jsfiddle, please update with the relevant details.
– mgibsonbr
I gave another update on the question look if now you understand me
– Luitame
Dear, try to post the HTML code resulting from the query processing.
– Calebe Oliveira
HTML is as expected... It comes the way it is meant to be
– Luitame
@Luitame I still can’t reproduce the problem. Until modified the example to change the description sizes, but everything remains normal (i.e. no blank spaces on the left). There is something wrong, either in the rest of the page’s HTML, or in the rest of the CSS. Try creating a jsfiddle with the exact content of your page, so we can see the problem (the generated HTML, as suggested by @Calebe).
– mgibsonbr