[resolu] Faire comme un annuaire : liste dl sur deux colonnes ?

Bonsoir,

Je suis en train de faire la sémantique XHTML d'un nouveaux site. j'ai envie que l'on puisse changer de "skin" trés aisement grace à CSS + Js, seulement j'ai un problème, je ne sais pas comment organiser le HTML

C'est une sorte d'annuaire, je dois pour l'instant refaire le XHTML et un fichier de style qui correspond à ce qui a été fait avant (on travaille à deux, lui fait le moteur du site, moi la partie cliente, et c'est lui le "patron" )

Ce qui a été fait, c'est comme sur http://www.free.fr/ dans la section repertoire du site.

Je pensais faire une liste dl mais je ne vois pas comment faire ca sur 2 colonnes ???

Le nombre de catégorie est dynamique, je ne peux donc pas prévoir une solution en utilisant deux listes dl cotes à côtes, et puis SURTOUT je veux que ce soit le plus simple possible pour les skins (donc une seule liste)

Je suis dans une sorte de boucle for (un repeater en asp.net) et je peux modifier le HTML toutes les deux lignes.

en gros je peux faire trés facilement

<dl>
    <dt>Texte</dt>
    <dd>Def</dd>

    <dt class="alt">Texte2</dt<
    <dd class="alt">Degf</dd>
</dl> 

Mais si il faut que je fasse autrement, je peux quand meme.

Alors quelles sont vos idées ? sachant que mon objectif premier est que ce soit skinable aprés.


Merci
Modifié par CyrilCS (07 Jun 2005 - 02:05)

Je me suis peut etre mal exprimé, je vais donc reformuler ma question

J'ai donc une liste comme ceci



et je voudrais mettre cette liste sous deux colonnes, comme ceci :



Pour l'instant je peux changer le HTML, mais plus tard, il faudra que je puisse changer le rendu de cette liste (avec css + js), c'est pour cette raison que je ne suis pas sur que faire 2 listes soient la meilleure solution

le code HTML de cette liste est

<dl>
    <dt>Cat1</dt>
    <dd>
         <ul>
             <li>sousCat1</li>
             <li>SousCat2</li>
             <li>etc...</li>
         </ul>
     </dd>
</dl>

j'espere avoir été plus clair

Pour info :

j'ai resolu le problème, en utilisant la meme liste et une bonne dose de javascript

    var elmt = document.getElementById('catHome').getElementsByTagName('div')[0];
    var tmpDL1 = '';
    var tmpDL2 = '';

    for (i=0; i < elmt.getElementsByTagName('dl')[0].getElementsByTagName('dd').length; i++)
    {  
        if (i % 2 == 0)
        {
            tmpDL1 += '<dt>' + elmt.getElementsByTagName('dl')[0].getElementsByTagName('dt')[i].innerHTML + '</dt><dd>' + elmt.getElementsByTagName('dl')[0].getElementsByTagName('dd')[i].innerHTML + '</dd>'
        }
        else
        {
            tmpDL2 += '<dt>' + elmt.getElementsByTagName('dl')[0].getElementsByTagName('dt')[i].innerHTML + '</dt><dd>' + elmt.getElementsByTagName('dl')[0].getElementsByTagName('dd')[i].innerHTML + '</dd>'
        }
    }
     elmt.innerHTML = '<dl style="width:49%;float:left;border-right:solid 1px #FF9600;">' + tmpDL1 + '</dl><dl style="width:49%;float:right;">' + tmpDL2 + '</dl><div style="clear:both;"></div>';

[/i][/i][/i][/i]