|
|
|
|
Salut,
|
Bonjour,
|
Bonjour,
|
Re salut :)
|
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.
<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 ! ;) |