Titre: Résultat d'une requete SQL en 2 colonnes
Posté par: apt le le 30-01-2007 a 22:01:35
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 :P |
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: TinMar le le 30-01-2007 a 23:52:27
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. |
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: apt le le 31-01-2007 a 00:00:15
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 (http://www.solucija.com/templates/demo/Internet_Center/)
:D |
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: TinMar le le 01-02-2007 a 21:29:53
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>
|
|
|
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: 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. |
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: 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 ;D
|
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: TinMar le le 02-02-2007 a 08:56:13
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. :o |
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: TinMar le le 02-02-2007 a 09:01:51
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 ;D
|
|
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:
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.
|
|
|
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: apt le le 04-02-2007 a 03:13:34
Tu es dur avec moi!! Ca va être du a faire en CSS. :o
|
|
Mais tu m'excuseras ;)
Oui c'est du boulot que je te demande pour me rendre service.
Merci de ta comprehension 8) |
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: TinMar le le 04-02-2007 a 20:46:44
Je suis tombé sur un site qui affiche des données en 2 colonnes via 2 div.
http://ezoulou.be/fr/brol (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;
}
|
|
|
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: apt le le 04-02-2007 a 23:37:20
C'est genial ce CSS ;D
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 :P )
|
Titre: Re:Résultat d'une requete SQL en 2 colonnes
Posté par: TinMar le le 05-02-2007 a 21:04:13
Perso je ferrais une requete avec une limite pour le coté gauche et le reste pour le coté droit.
Si d'autres ont une idée? |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|