28221 sujets

CSS et mise en forme, CSS3

Bonjour,

C'est mon premier post sur ce forum et je me permet de vous dire un petit bonjour avant de commencer. Bonjour !

Voila, je vous propose un petit amussement en la fabrication d'une tree list en html et css. Et à la fin, j'aurais 2 ou 3 trois petits questions Smiley cligne

Mes contraintes :
- je ne voulais pas d'image pour faire les lignes sur la gauche,
- je n'ai pas forcement besoin d'un bouton + et - pour développer ou fermer les sous-élements,
- lors de resize de la fenetre, les mots doivent se wrapper correctement et mes lignes d'arbre suivrent ...

Il y a sur le web beaucoup de systèmes pour faire cela, en javascript comme http://javascript.cooldev.com/scripts/cooltree/ ou encore HTML_TreeMenuXL, voir meme phplayersmenu

Seulement voila, ils gèrent très mal des élements uniques sur plusieurs lignes.

Ma solution qui marche presque ( sous ie6 et firefox en tout cas, mais pas sous netscape, ni mozilla, ni opera )


<html>
<head>
<style>
table { border:0; padding:0; margin:0; width:100%}
.hs {width:10px; margin:0; padding:0; font-size:5px; }
/* first item */
.dvTT { height:50%; margin-left:4px; border-bottom:1px solid black; }
.dvTD { height:50%; margin-left:4px; border-left:1px solid black; }
/* middle item */
.dvMT { height:50%; margin-left:4px; border-left:1px solid black; border-bottom:1px solid black; }
.dvMD { height:50%; margin-left:4px; border-left:1px solid black; }
/* last item */
.dvDT { height:50%; margin-left:4px; border-left:1px solid black; border-bottom:1px solid black; }
.dvDD { height:50%; margin-left:4px; }
/* middle */
.dvMM { height:100%; margin-left:4px; border-left:1px solid black; }
/* item */
.item a { padding-left: 5px; display:block; text-decoration: none;}
.item a:hover { background-color:#FF9900; color:white; }
</style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="hs" height="100%"><div class="dvTT"></div>
      <div class="dvTD"></div></td>
    <td class="item"><a href="">le texte qui peut etre super long et c'est problématique</a></td>
  </tr>
  <tr>
    <td class="hs" height="100%"><div class="dvMM"></div></td>
    <td><table cellpadding="0" cellspacing="0">
        <tr>
          <td class="hs" height="100%"><div class="dvMT"></div>
            <div class="dvMD"></div>
          <td class="item"><a href="">le texte qui peut etre super long et c'est problématique aussi</a></td>
        </tr>
        <tr>
          <td class="hs" height="100%"><div class="dvDT"></div>
            <div class="dvDD"></div></td>
          <td class="item"><a href="">un petit texte court, pourquoi pas ?</a></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td class="hs" height="100%"><div class="dvDT"></div>
      <div class="dvDD"></div></td>
    <td class="item"><a href="">le texte qui peut etre super super super super super super super long</a></td>
  </tr>
</table>

<h1>Test de l'astuce div demi-hauteur</h1>
<table style="width:50%">
<tr>
  <td style="font-size:5px;width:8px;height:100%"><div style="height:50%; min-height:8px; background-color:#666";></div><div style="height:50%; min-height:8px; background-color:#FF6";></div></td>
  <td>dfdssd sd kfsksk fsdk skdfsk dsk dsk sdfksdk fsdkfs dkf sdkfsdks d</td>
</tr>
</table>

</body>
</html>


L'astuce du système consiste à créer dans une case d'un tableau (je sais, je sais, j'ai dit tableau ...), 2 div qui chacuns prennent la moitié de la hauteur du tableau, height 50% et c'est d'ailleurs de là que vient aussi les problèmes.
Bref, ayant ces deux divs, il m'est facile de faire afficher des bordures ou pas à ceux ci pour dessiner les lignes, cf les 6 class dv** qui correspondent aux 6 possibilités d'un arbre.

Donc en lancant cette page web et en redimensionnant la fenetre, on constate que les lignes de l'arbre suivent parfaitement la taille des cases à côté et qu'une cesure d'une phrase entraine une augmentation de la taille des lignes sur la gauche.

Sauf que cette astuce marche pas sur netscape, opera, ni mozilla. Et c'est là que je demande de l'aide car j'ai beau chercher un peu partout, je ne trouve rien de vraiment pertinant sur le positionnement propre de 2 div en hauteur à 50% par rapport au parent (qui ici est un tableau, mais ca marche aussi avec d'autres div par dessus => même symptomes d'ailleurs).

Voila et encore merci.
Question sémantique je crois vraiment pas que ça soit très intelligent !!!
C'est clair, il faudrait utiliser une liste, avec des listes imbriquées à l'intérieur. Cela dit, ça pourrait en effet poser problème pour les retours à la ligne selon les moyens qu'on utilise. Je me suis longtemps posé la question quand j'ai voulu recréer une arborescence à partir d'un fichier XML. Ma réflexion n'a pas abouti à une réalisation concrète, mais j'ai eu quelques idées (faudrait que je relise ce que j'ai noté). L'histoire en question c'est mes marques pages, si ça intéresse quelqu'un. Le système fonctionne exclusivement sous Firefox je crois, et il est basé sur des images ... enfin bon c'est vraiment nul mais l'idée y est ! Smiley murf {génial ce smiley}
Bon, le débat est ouvert ...
Sémantiquement, je sais que c'est bancal. En fait, ca marche aussi avec des listes imbriquées ul, li bien formatées, j'ai déjà fait le test.
La plupart des solutions pour des trees utilisent une combinaison soit de tableaux, div et images, soit d'images, div, et ul.

Mais le problème reste entier : si on utilise des images, lorsque le texte de la cellule de titre 'wrap' et passe d'une à 2 lignes, l'image elle ne s'etire pas. On pourrait evidemment le faire avec un post-traitement javascript mais meme dans ce cas, l'etirement sera vraiment pas beau car à cote d'une ligne non étirée qui fait 1 pixel pourrait se trouver une ligne à 2 pixels car la cellule a été étirée ( Suis-je assez clair ? ).

J'ai aussi étudier la possibilité de faire un wrap du texte avant affichage (pour que cela ne fasse jamais plus qu'une ligne pour ma taille de cellule, taille connue ).
=> le texte en complet je le met dans l'attribut title. De nouveau, c'est vraiment pas evident à faire. Comment mesurer la longueur d'affichage d'un texte en fonction de son style ? Je n'ai pas trouvé de solution non plus de ce côté.

Derniere petite note sur mon exemple ci-dessous. Il marche parfaitement sous DOCTYPE html ou transitoire mais ne marche pas sous XHTML strict. L'astuce du height 50% ne fonctionne pas sous IE sous xhtml strict. A croire qu'ils ont codés en dur 2 modèles de rendu totalement différents dans IE et qu'ils switchent en fonction du DOCTYPE.

Voila. Bref, actuellement, j'utilise une solution moche mais qui marche partout, des images qui ne sétirent pas dans un tableau.
Merci Olivier pour le tips mais j'ai déjà utilisé la recherche sur ce forum des tree's et j'étais déjà tombé sur les libs indiquées (dTree et autres).

Mais comme dit précedemment, aucune de ces libs ne marche pas avec des textes trop long (=> qui wrap sur plusieurs lignes).

De plus l'utilisation de javascript pour la génération d'élements de pages ne fait soucis car 15% des gens le desactive. Je préfère génerer la page en php dynamiquement en dur ( sans partie côté client ).