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

4 réponses

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.
3
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 ^^)
0
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
0
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
0