Problem with printing HTML elements on the screen

Question

Problem with printing HTML elements on the screen

Navigation

#1 by (7 votes)

8

I'm doing 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, I print on the screen inside a ul tag with multiple li tags. I tested it on Firefox, Safari, Chrome and Opera, and there is a problem.

Look at the image of how the content is printed on the screen:

Thecardsweresupposedtocomeoutalllikethefirstblockofcards,butIdonotknowwhat'shappening,becausethereareemptyspaceswheretheyweretobefilledwithcards.Allthecardsarebeingreturnedproperlybythequery,onlytheyaregettinginthewrongplaces.

IhavetheHTML/PHPcodebelow.Imakeaquery,whichreturnsmethecorrectvalues,butoutofplaceasintheimageabove.

<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 seems normal. See:

.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}

Has anyone ever had anything like this?

html css

asked by anonymous 09.01.2014 / 04:28

1 answer

How to smooth a curve in the R Disable Auto Redirect after login in CakePHP 2.4

score 7 · Accepted Answer

Personal apologies for tormenting you with this question. But then it takes more than an hour and a half trying to see the cause of this problem. I discovered that the reason this is happening is because of the graphic design that made the deck the images are of different sizes so it was disorganized in blanks because one was larger than the other. I was able to solve this by setting the image height and everything rotated normal. : D

Changed Code:

.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}

Look how beautiful it was ... Hehehe

Now all side by side queued. Perfect. : D