Convertir une liste en arboresence [Résolu]

Signaler
Messages postés
27
Date d'inscription
vendredi 1 octobre 2004
Statut
Membre
Dernière intervention
23 avril 2012
-
Messages postés
27
Date d'inscription
vendredi 1 octobre 2004
Statut
Membre
Dernière intervention
23 avril 2012
-
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

Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
11
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.
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
11
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 ^^)
Messages postés
27
Date d'inscription
vendredi 1 octobre 2004
Statut
Membre
Dernière intervention
23 avril 2012

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
Messages postés
27
Date d'inscription
vendredi 1 octobre 2004
Statut
Membre
Dernière intervention
23 avril 2012

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