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
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 )
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.
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

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.