Convertir une liste en arboresence

Résolu

Cpustack Messages postés 27 Date d'inscription vendredi 1 octobre 2004 Statut Membre Dernière intervention 23 avril 2012 - 17 nov. 2011 à 16:36
Cpustack Messages postés 27 Date d'inscription vendredi 1 octobre 2004 Statut Membre Dernière intervention 23 avril 2012 - 21 nov. 2011 à 16:56

Bonjour,
J'ai repris ce code http://odyniec.net/articles/turning-lists-into-trees/
C'est propre. Je tente de mettre, à la place du 'node' sur le premier élément de la liste, un 'first' à la manière du 'lastnode' pour faire encore plus propre. Mais je n'y arrive pas.
Ci dessous mon code
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.divtree {
background: #fff;
border: 1px solid #DFDFDF;
height: 200px;
margin: 4px 1px;
overflow: auto;
padding: 3px 6px;
width: 346px;
}

ul.tree, ul.tree ul {
list-style-type: none;
background: url(../img/vline.png) repeat-y;
margin: 0;
padding: 0;
}

ul.tree ul {
margin-left: 10px;

}
ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(../img/node.png) no-repeat;
color: #369;
font-weight: bold;
}
ul.tree li.last {
background: #fff url(../img/lastnode.png) no-repeat;
}
ul.tree li.first {
background: #fff url(../img/first.png) no-repeat;
}

</style>
</head>

<li class="first"><label>test1</label>

<li>test2</li>
<li class='last'>test3</li>

</li>
<li><label>test1</label>

<li>test2</li>
<li class='last'>test3</li>

</li>
<li class="last"><label>test1</label>

<li>test2</li>
<li class='last'>test3</li>

</li>

</html>

Merci pour l'aide

A voir également:

Convertir une liste en arboresence
Convertir une liste en string python ✓ - Forum Python
Convertir string en int c# ✓ - Forum C# / .NET
Convertir python en c - Conseils pratiques -Python
Liste deroulante php ✓ - Forum PHP
Convertir jours en années mois jours ✓ - Forum VB.NET

4 réponses

Réponse 1 / 4

cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
18 nov. 2011 à 16:18

oki,

j'ai compris le souci. En fait la seule solution que je vois c'est de modifier l'image first.png pour qu'elle ait le reste de la barre en couleur de fond (blanc en l'occurrence), et passe devant ta vline.png qui est repeatée.

Réponse 2 / 4

cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
18 nov. 2011 à 12:12

Salut,

y'a moyen d'avoir une précision sur ce qui ne va pas ?
perso j'ai testé ton code et j'ai bien les bonnes images au bon endroit (même si c'est très moche avec les images que j'ai mises ^^)

Réponse 3 / 4

Cpustack Messages postés 27 Date d'inscription vendredi 1 octobre 2004 Statut Membre Dernière intervention 23 avril 2012
18 nov. 2011 à 13:19

Merci de ton intérêt.
Voici la copie d'écran du résultat que j'obtient
http://cjoint.com/?AKsnpntTpZM
et les images pour faire plus joli

http://cjoint.com/?AKsnsCMU3ct
Cordialement

Réponse 4 / 4

Cpustack Messages postés 27 Date d'inscription vendredi 1 octobre 2004 Statut Membre Dernière intervention 23 avril 2012
21 nov. 2011 à 16:56

J'ai mis la partie supérieur de mon image first.png en blanc, le reste en transparent.
et complété la classe comme suit

ul.tree li.first {
background: #fff url(../img/first.png) no-repeat;
background-color: transparent;

}
et c'est nickel !
Merci de tes conseils

Votre réponse