Clause ORDER BY

Bon en fait c'est assez simple. On va utiliser une feuille de style CSS, car c'est important de séparer le contenu de la présentation (voir balisage sémantique). Et ça évite de se triturer la tête avec le PHP.

Je vois que tu connais les éléments ol et dl, mais tu ne les utilises pas très bien. Je t'invite à te renseigner dessus. Le dernier code que tu m'as donné donne quelque chose du genre :

<div id="repertoire">
	<ol>instrument</ol>
		<li>numero<span class='titre'>titre</span></li>
		<li>numero<span class='titre'>titre</span></li>
		<li>numero<span class='titre'>titre</span></li>
	<ol>instrument</ol>
		<li>numero<span class='titre'>titre</span></li>
		<li>numero<span class='titre'>titre</span></li>
		<li>numero<span class='titre'>titre</span></li>
</div>

Pour résumer, ol signifie ordered list et s'utilise pour lister des éléments dont l'ordre est important (par exemple, des étapes de recette de cuisine). Ici, une ul me semble plus adaptée. Attention également, tu fermes ta liste trop tôt, et les li qui suivent sont orphelins ; les navigateurs peuvent interpréter ça de manière tout à fait inattendue, donc il faut éviter.


Ce que je te propose (ce n'est qu'une solution parmi beaucoup d'autres), c'est de lister les catégories d'instruments dans une ul, et de les associer à une autre ul, de cette manière :

<ul id="repertoire">
<li>
	COR & CLAIRON
	<ul>
	<li>24 Bouton d'or</li>
	<li>11 Cerf de la fôret</li>
	<li>15 Essarts</li>
	<li>13 Grand'rue</li>
	<li>12 Morosière</li>
	</ul>
</li>
<li>
	TURLUPINETTE
	<ul>
	<li>27 Bidule</li>
	<li>44 Chose</li>
	<li>25 Machin</li>
	<li>67 Truc</li>
</li>
</ul>

Jusqu'ici, sans CSS, les li vont s'afficher en une colonne les uns au-dessous des autres. Voyons à présent le CSS. L'astuce va consister à rendre les li flottants, et leur donner une largeur entre 33% et 50% de leur parent. De cette manière, ils s'afficheront 2 par 2. (Pour bien comprendre le mécanisme, je te conseille de lire ce tuto d'Alsacréations, il est très bien expliqué.)

/* on commence par supprimer les styles par défaut */
ul#repertoire, ul#repertoire ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

Pour le reste, il faut cibler seulement les li de premier niveau, et pas les autres. Il existe un sélecteur CSS pour cela : « > » (voir child selector). Le problème est qu'il ne marche pas sous Internet Explorer versions inférieures à 7. Il faut donc tricher pour que ça marche, hack CSS ou commentaire conditionnel, enfin je te passe les détails, tu peux toujours demander à Google si ça t'intéresse. On va plutôt utiliser une méthode « à l'ancienne » : appliquer le style qu'on veut sur tous les li, puis le « désappliquer » aux li de second niveau. C'est assez simple :

/* style qui nous intéresse */
ul#repertoire li {
	float: left;
	width: 45%;
}

/* style pour « désappliquer » */
ul#repertoire li li {
	float: none;
	width: inherit;
}

Libre à toi de chiner par la suite avec marges, bodures, etc.
À propos de list-style : c'est une propriété raccourcie, en réalité composée de list-style-type, list-style-position et list-style-image. Voici une petite doc : http://www.w3schools.com/CSS/pr_list-style.asp

Pour le code PHP, je te laisse chercher sinon c'est pas drôle :P
Ça devrait pas être compliqué. Bon courage !

;)

Salut,
Peut-on avoir quelques précisions ? Tu construis ta liste avec PHP ou directement avec JavaScript ? À quel moment tu fais ta requête, avant ou après le chargement de ta page ? Autrement dit, est-ce que tu utilises Ajax  ? Quelle balise HTML tu utilises pour ta liste, et quelle version de HTML ?

Bonjour,

Merci de votre réponse, ma liste déroulante est faites avec javasrcript mais ma requète en php.

function modif()
{
document.getElementById('listepupitre').innerHTML="<select name=user_nb><option></option><option value=3>3</option><option value=20>20</option><option value=33>33</option><option value=333>333</option><option value=14>14</option><option value=2>2</option><option value=16>16</option><option value=20>20</option><option value=25>25</option></select>";
}

Et dans ma requète je souhaite que les chiffres apparaissent dans la même ordre que dans ma fonction.

ORDER BY nb

avec ceci évidemment ça fonctionne pas.
Merci beaucoup de votre aide

Bonjour,
J'ai réussi à mettre mes données sur 2 colonnes mais ça affiche de gauche à droide et je voudrais que ça affiche par exemple 1,2,3,etc... à la vertical.
Aidez moi s'il vous plait
Merci beaucoup

[code]
<table width="100%" id="user_print" cellpadding="2" cellspacing="0">


<?php
$resultats = $connexion->query ('SELECT *
FROM table_repertoire
WHERE `table_repertoire`.`id` <> 0
GROUP BY instrument
ORDER BY instrument, titre, numero');
$nb = $resultats->setFetchMode(PDO::FETCH_OBJ);

$i = 1;
while ($user = $resultats->fetch())
{
// Si c'est le nombre n'est pas pair, on ouvre la ligne du tableau
if ((($i-1)%2) == 0) echo "<tr>";
?>

<td>
<table width="100%"id="user_print" border="0" cellspacing="0" bordercolor="#FFFFFF">
<?php echo "<dl> " .$user->instrument . "</dl> " ;?>
<?php

$resultats2 = $connexion->query ('SELECT *
FROM table_repertoire
WHERE `table_repertoire`.`id` <> 0 and instrument="' .$user->instrument . '"
ORDER BY instrument, titre, numero');
$nb = $resultats2->setFetchMode(PDO::FETCH_OBJ);
while ($user2 = $resultats2->fetch())
{
echo "<dt>" .$user2->numero . " " .$user2->titre . "</dt>";
}
?>
</table>

</td>

<?php
// Si c'est un nombre pair, on ferme la ligne du tableau
if ((($i-1)%2) == 1) echo "</tr>";
$i++;
}
?>

</table>
/code

Re salut :)

Alors euh, je comprends pas bien ta question, tu veux une <table> à une seule colonne, ou bien un <select> ?

Et est-ce que tu as des fonctions Ajax (ou mécanisme similaire), c'est-à-dire qui te permettent de mettre à jour une partie de ta page (en l'occurence ta liste) sans recharger la page entière ? Sinon, il vaut mieux envoyer le résultat de la requête en HTML pur, c'est plus propre. Par exemple, ceux qui n'ont pas JavaScript (les malvoyants et les robots de Google) verront correctement la liste, et tu auras la garantie que tous les navigateurs construisent correctement le DOM de ta page (si tu ne sais pas ce que c'est, t'inquiète, fais comme si j'avais rien dit ^^).

À propos du tableau, je vois un système de paires dans ton script PHP : ouvrir la ligne (<tr>) un coup et la refermer (</tr>) le coup suivant. Si tu veux une nouvelle ligne de tableau à chaque résultat, il supprimer les tests, ce qui te permet de te passer de la variable $i.

Je réponds à ta question ?

;)

Ok donc si j'ai bien compris ta question, tu voudrais que ça fasse :

COR & CLAIRON        | TURLUPINETTE
                     |
24 Bouton d'or       | 27 Bidule
11 Cerf de la fôret  | 44 Chose
15 Essarts           | 25 Machin
13 Grand'rue         | 67 Truc
12 Morosière         |

?