Manage your data from left to right-CodePudding

I'm working on a project that consists of retrieving commands and displaying them on a screen.

The problem is that when the commands appear they automatically go down one by one to the footer

I would like to have them start on the left and then continue on the right.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="5" />
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <title></title>
</head>
<body>
    <center>
        <div >
            <br><br>
                    <ul class='list-column'>
                        <li>
                        <div >
                            <?php
                            $dsn="";
                            $user="";
                            $password="";
                            $conn=odbc_connect($dsn,$user, $password);

                            //REQUETES
                            $sql = <<<EOF
                            SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= '20221229' AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC
                    EOF;
                            
                            $results = odbc_exec($conn,$sql);
       
                            while($resultrow = odbc_fetch_array($results)){ 
                            echo "<span class='cmdnum'>".$resultrow["enc_cmd_num"]."</span>" ; }
                            ?>

                        </li>

                        <?php
                        $sql = <<<EOF
                        SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= '20221229' AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC
                    EOF;

                        $results = odbc_exec($conn,$sql);
 
                        if( $results )
                        {
                            while($resultrow = odbc_fetch_array($results))
                            {
                                switch($resultrow['enc_prepared'])
                                {
                                    case 0:
                                        echo"<p class='ENCOURS'>EN PREPARATION<p/>\r \n";
                                        break;
                                    case 1:
                                        echo "<p class='PRETE'>COMMANDE PRÊTE<p/>\r\n";
                                        break;
                                }
                            }
                        }

                        ?>

NEW SCREEN

Thank you all for your help

CodePudding user response：

you can use

<ul class='list-column'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

and in css (or SCSS):

.list-column {
    column-count: 3;
    column-gap: 70px;
    padding-left: 0;
}

CodePudding user response：

Still not entirely clear what you want to achieve, but I've refactored your code a bit and this might be a better starting place:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="refresh" content="5" />
  <link rel="stylesheet" type="text/css" href="css/test.css">
  <title></title>
</head>
<body>
  <center>
    <?php
    $dsn="";
    $user="";
    $password="";
    $conn=odbc_connect($dsn,$user, $password);

    //REQUETES
    $sql = <<<EOF
    SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= '20221229' AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC
EOF;
    $results = odbc_exec($conn,$sql);

    if ($results) {
      while ($resultrow = odbc_fetch_array($results)) {
        echo "<div class='NUMCOMMANDE'>";
        echo "<span class='cmdnum'>".$resultrow["enc_cmd_num"]."</span>" ;
                                
        switch($resultrow['enc_prepared']) {
          case 0:
            echo"<span class='ENCOURS'>EN PREPARATION</span>\r\n";
            break;
          case 1:
            echo "<span class='PRETE'>COMMANDE PRÊTE</span>\r\n";
            break;
          }
          echo '</div>';
        }
      }
      ?>
  </center>
</body>
</html>

I note that your SQL statement joins to a Client table that is otherwise not used, so I assume you are doing something else with all this?

It may be appropriate to use a <table> if you are outputting tabular data. I'd personally avoid using and instead use semantic markup with some CSS to visually center the content... but again, it depends what you need this for I guess?!