Résultat d'une requete SQL en 2 colonnes

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Résultat d'une requete SQL en 2 colonnes

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Résultat d'une requete SQL en 2 colonnes (Lu 1460 fois)

Résultat d'une requete SQL en 2 colonnes
« sur: le 30-01-2007 a 22:01:35 »

apt
Membre récent

Hors-Ligne

Sexe: Male

Messages: 11

Bonsoir,

J'aimerais voir afficher en deux colonnes le resultat d'une requete; mais en utilisatant des DIV au lieu de tableau comme d'habitude.

J'ai ecris ce code, mais sans pas encore arriver :

Code:
<?php
   // categories en deux colonnes avec DIV

   //pour chaque categories meres trouvees on les affiche avec leurs X premieres sous-cat
   $i=0; $d1=0 ; $d2=0;
$r = mysql_nums_row($res_cat);
echo "resultat r = ".$r."<br />";

   //while ($i<= (mysql_fetch_nums_rows/2))
   while ($une_categorie = mysql_fetch_array($res_cat,MYSQL_ASSOC))
   {
      if ($i%2 == 0) //DIV de gauche et donc nouvelle ligne
      {
         if ($d1==0) // Voir si DIV gauche est deja   ouverte $d1=1 => DIV de gauche ouverte
         {
            //echo "ligne left";
            echo "<div class=\"left_side\">\n";
            $d1=1;
         }
         echo "<p><b><img src=\"images/arrow.gif\" alt=\">\" /><a class=\"title\" href=\"#\">Arts</a></b><br />\n";
         echo "<a href=\"#\">Music</a>, <a href=\"#\">Television</a>, <a href=\"#\">Movies</a>...</p>";

         if ($i == ($r/2))
         {
            echo "</div>\n"; // On ferme le Div gauche
         }
         $i++;
      }
      else // $i%2 est faut
         {
         if ($d2==0)
            {
            echo "<div class=\"right_side\">\n";
            $d2=1;
         }
         echo "<p><b><img src=\"images/arrow.gif\" alt=\">\" /><a class=\"title\" href=\"#\">Arts</a></b><br />\n";
         echo "<a href=\"#\">Music</a>, <a href=\"#\">Television</a>, <a href=\"#\">Movies</a>...</p>";

         if ($i > ($r/2))
            {
            echo "</div>\n"; // On ferme le Div droite
         }
         $i++;

      }
   } // Fin while
?>

Des propositions svp ?

Merci d'avance

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #1 sur: le 30-01-2007 a 23:52:27 »

TinMar
Habitué

Hors-Ligne

Sexe: Male

Messages: 268

Yo !

Hi!

Comme d'hab avant de passer en PHP il faut être sur d'y arriver en HTML. Est ce que tu as déjà fait ton code en HTML pour afficher en 2 colonnes?
A vu de nez le mieux est de passer avec des puces mais déjà fait ton code en HTML.

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #2 sur: le 31-01-2007 a 00:00:15 »

apt
Membre récent

Hors-Ligne

Sexe: Male

Messages: 11

Voila le code en HTML.

Code:
<h3>Web Directory</h3>
            <div class="left_side">
               <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Arts</a></b><br />
               <a href="#">Music</a>, <a href="#">Television</a>, <a href="#">Movies</a>...</p>
               <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Computers</a></b><br />
               <a href="#">Internet</a>, <a href="#">Software</a>, <a href="#">Hardware</a>...</p>
               <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Shopping</a></b><br />
               <a href="#">Autos</a>, <a href="#">Clothing</a>, <a href="#">Gifts</a>...</p>
            </div>
            <div class="right_side">
               <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Business</a></b><br />
               <a href="#">Jobs</a>, <a href="#">Real Estate</a>, <a href="#">Investing</a>...</p>
               <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Health</a></b><br />
               <a href="#">Fitness</a>, <a href="#">Medicine</a>, <a href="#">Alternative</a>...</p>
               <p><b><img src="images/arrow.gif" alt=">" /><a class="title" href="#">Sports</a></b><br />
               <a href="#">Baseball</a>, <a href="#">Basketball</a>, <a href="#">Soccer</a>...</p>
            </div>

Et voila l'exemple sur lequel je dois trouver du code php pour mon site ICI

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #3 sur: le 01-02-2007 a 21:29:53 »

TinMar
Habitué

Hors-Ligne

Sexe: Male

Messages: 268

Yo !

Ce que je te propose c'est de passer que par des puces dc pas 2 colonnes dans le code mais dans la mise en page CSS a l'aide d'un FLOAT:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Web Directory</title>
<style type="text/css">
body
{
font-family: arial;
}
ul, li
{
margin:0
}

#WebDir
{
border: 1px solid #eee;
padding: 10px 10px 10px 15px;
font-size: 11px;
width: 410px;
height: 120px;
margin: 15px
}

#WebDir:hover
{
border: 1px solid #ccc;
}

#WebDir li
{
list-style: none;
list-style-image:url( 'arrow.gif' );
list-style-position:ouside;
}

a
{
color: #185DA0;
}

a:hover
{
color: #9EC068;
}

a.title, a:hover.title
{
   color: #FE6700;
}
#WebDir li.block
{
float: left;
margin: 5px;
margin-left: 10px;
margin-right: 0;
}

#WebDir li ul li
{
list-style: none;
display: inline;
}

#WebDir li ul
{
padding: 0;
width: 180px
}
</style>
</head>
<body>
<h1>Web Directory</h1>
<ul id="WebDir">
   <li class="block"><a class="title" href="#">Arts</a>
   <ul>
      <li><a href="#">Music</a>, </li>
      <li><a href="#">Television</a>, </li>
      <li><a href="#">Movies</a>, </li>
      <li>...</li>
   </ul>
   </li>
   <li class="block"><a class="title" href="#">Computers</a>
   <ul>
<li><a href="#">Internet</a>, </li>
      <li><a href="#">Software</a>, </li>
      <li><a href="#">Hardware</a>, </li>
      <li>...</li>
   </ul>
   </li>
   <li class="block"><a class="title" href="#">Shopping</a>
   <ul>
<li><a href="#">Autos</a>, </li>
      <li><a href="#">Clothing</a>, </li>
      <li><a href="#">Gifts</a>, </li>
      <li>...</li>
   </ul>
   </li>
<li class="block"><a class="title" href="#">Business</a>
   <ul>
<li><a href="#">Jobs</a>, </li>
      <li><a href="#">Real Estate</a>, </li>
      <li><a href="#">Investing</a>, </li>
      <li>...</li>
   </ul>
   </li>
<li class="block"><a class="title" href="#">Health</a>
   <ul>
<li><a href="#">Fitness</a>, </li>
      <li><a href="#">Medicine</a>, </li>
      <li><a href="#">Alternative</a>, </li>
      <li>...</li>
   </ul>
   </li>
<li class="block"><a class="title" href="#">Sports</a>
   <ul>
      <li><a href="#">Baseball</a>, </li>
      <li><a href="#">Basketball</a>, </li>
      <li><a href="#">Soccer</a>, </li>
      <li>... </li>
   </ul>
   </li>
</ul>
<hr/>
</body>
</html>

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #4 sur: le 01-02-2007 a 22:17:14 »

apt
Membre récent

Hors-Ligne

Sexe: Male

Messages: 11

Je crois qu'à premiere vue, ça me facilite les choses pour pouvoir integerer du code PHP dans la page.

Mais ou est passé la ligne verticale en grisé qui separe les deux colonnes d'afficahge ?

Merci TinMar.

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #5 sur: le 01-02-2007 a 22:31:30 »

apt
Membre récent

Hors-Ligne

Sexe: Male

Messages: 11

J'aimeriais comprendre ces bouts de code :

Code:
#WebDir li
{
list-style: none;
list-style-image:url( 'arrow.gif' );
list-style-position:ouside;
}

et ceci :

Code:
#WebDir li.block
{
float: left;
margin: 5px;
margin-left: 10px;
margin-right: 0;
}

#WebDir li ul li
{
list-style: none;
display: inline;
}

#WebDir li ul
{
padding: 0;
width: 180px
}

- Pourquoi tant de definition pour l'element il et ul ?

- Qu'elle est la defernce entre li et li.block ?

Merci

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #6 sur: le 02-02-2007 a 08:56:13 »

TinMar
Habitué

Hors-Ligne

Sexe: Male

Messages: 268

Yo !

Citation de: apt le le 01-02-2007 a 22:17:14
Je crois qu'à premiere vue, ça me facilite les choses pour pouvoir integerer du code PHP dans la page.

Mais ou est passé la ligne verticale en grisé qui separe les deux colonnes d'afficahge ?

Merci TinMar.

Tu es dur avec moi!! Ca va être du a faire en CSS.

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #7 sur: le 02-02-2007 a 09:01:51 »

TinMar
Habitué

Hors-Ligne

Sexe: Male

Messages: 268

Yo !

Citation de: apt le le 01-02-2007 a 22:31:30
J'aimeriais comprendre ces bouts de code :

Code:
#WebDir li
{
list-style: none;
list-style-image:url( 'arrow.gif' );
list-style-position:ouside;
}

et ceci :

Code:
#WebDir li.block
{
float: left;
margin: 5px;
margin-left: 10px;
margin-right: 0;
}

#WebDir li ul li
{
list-style: none;
display: inline;
}

#WebDir li ul
{
padding: 0;
width: 180px
}

- Pourquoi tant de definition pour l'element il et ul ?

- Qu'elle est la defernce entre li et li.block ?

Merci

1. J'ai fait ca rapido dc j'ai pas obtilisé le code. CSS. Le "block" défini le PREMIER LI. Je pense que si tu ne fais pas ca, si tu indique le float: left sur le

Code:
#WebDir li
{
}

Ca merde. En gros il y a une arboresence de LI et UL dc du doit donne les définitions.

tu peux mettre en effet le code:
Code:
#WebDir li
{
list-style: none;
list-style-image:url( 'arrow.gif' );
list-style-position:ouside;
}

et ceci :

Code:

dans le LI.BLOCK

En gros comment je procède: je fais mon code en HTML PROPRE avec le puce par ex; ensuite je "bidouille" le CSS ensuite je corrige le CSS pour eviter avoir de doublon dans le code.

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #8 sur: le 04-02-2007 a 03:13:34 »

apt
Membre récent

Hors-Ligne

Sexe: Male

Messages: 11

Citation de: TinMar le le 02-02-2007 a 08:56:13
Tu es dur avec moi!! Ca va être du a faire en CSS.

Mais tu m'excuseras

Oui c'est du boulot que je te demande pour me rendre service.

Merci de ta comprehension

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #9 sur: le 04-02-2007 a 20:46:44 »

TinMar
Habitué

Hors-Ligne

Sexe: Male

Messages: 268

Yo !

Je suis tombé sur un site qui affiche des données en 2 colonnes via 2 div.
http://ezoulou.be/fr/brol

Le code CSS:
Code:
column_left, .column_right {

width:40%;

}

.column_left {

float:left;

margin-right:5% ;

}

.column_right {

float:left;

padding-left:5%;

border-left:#AF3E1C 2px solid;

}

Rapporter au modérateur

Re:Résultat d'une requete SQL en 2 colonnes
« Répondre #10 sur: le 04-02-2007 a 23:37:20 »

apt
Membre récent

Hors-Ligne

Sexe: Male

Messages: 11

C'est genial ce CSS

Une question se pose :

Comment, en PHP, se deplacer d'une div à l'autre ?

1 - Requete
2 - Tant qu'il y'a des resultats alors
{
Si condition = vrai
{
- ouvrir div gauche
- mettre un resultat
- fermer div gauche
}
sinon
{
- ouvrir div droite
- mettre le resultat
- fermer div droite
}
}

Le probleme qui se pose c'est comment doit-on ouvrir le div gauche puis le fermer, se deplacer vers la droite, ouvrir le div droite puis le fermer, et ensuite on refaira le meme parcour jusqu'ou on a terminer avec le resultat de la requete ....

Une idée (je m'excuse encore Tinmar si je m'abuse )