begin process at 2012 05 27 19:52:51
  Trouver un code source :
 
dans
 
Accueil > Forum > 

ASP / ASP3

 > 

Web 2.0

 > 

CSS

 > 

Convertir une liste en arboresence


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Convertir une liste en arboresence

jeudi 17 novembre 2011 à 16:36:25 | Convertir une liste en arboresence

Cpustack

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>
<body>
<div class="divtree">
<ul class="tree" >
<li class="first"><input type="checkbox" /><label>test1</label>
<ul>
<li>test2</li>
<li class='last'>test3</li>
</ul>
</li>
<li><input type="checkbox" /><label>test1</label>
<ul>
<li>test2</li>
<li class='last'>test3</li>
</ul>
</li>
<li class="last"><input type="checkbox" /><label>test1</label>
<ul>
<li>test2</li>
<li class='last'>test3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Merci pour l'aide
vendredi 18 novembre 2011 à 12:12:59 | Re : Convertir une liste en arboresence

jopop

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 ^^)
vendredi 18 novembre 2011 à 13:19:04 | Re : Convertir une liste en arboresence

Cpustack

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
vendredi 18 novembre 2011 à 16:18:51 | Re : Convertir une liste en arboresence

jopop

Réponse acceptée !
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.


lundi 21 novembre 2011 à 16:56:57 | Re : Convertir une liste en arboresence

Cpustack


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


Cette discussion est classée dans : url, background, tree, ul, margin


Répondre à ce message

Sujets en rapport avec ce message

Probleme d'affichage du fond (bg color) Urgent !! [ par asdik1 ] voila tt le monde j ai un bete de probleme je dois mettre mon site n lgne ds 5jours mais le fond en s affiche pas correctement en serveur sour easy ph Probleme avec css [ par dpeuwe79 ] bonjour à tous,je veux creer une page web avec asp.net pour le desingn de la page j´utilise  les   et les feuille de style ce qui me pose assez de pro la mise en page de mon site change à l'execution [ par mezcal ] Bonjour,Je commence un site (je debute dans le web!!).J'ai telechargé un petit kit graphique (un header, un footer et un menu) mais je galère à le met Probleme affichage IE / Mozzila [ par Groda ] Voici la page de code html faite pour un affichage sous mozilla.Cela fonctionne parfaitement avec cet explorateur.Seulement en passant sous IE , c'est Comment creer un menu en CSS [ par Frank_klein ] Bonjour, je suis debutant en CSS et j'ai un probleme pour cadrer une barre de menu dans une page HTML, j'aimerai que la barre occupe tout l'espage, Problème avec menu déroulant horizontal [ par joart ] Tout d'abord un grand merci a la communauté "codes-sources" J'ai un problème avec un menu déroulant dans lequel je souhaite intégré des images "type problème de background sous pc [ par lalach ] Bonjour, j'ai testé le site que je viens de créer sous flash et je me rend compte d'un petit souci au niveau du Background-image. Quand je le teste s [LAN] Game 13 [ par TheGamesbe ] Bonjour à tous, Nous sommes fiers de vous présenter notre prochaine [color=red][b]LAN party : Game 13[/b][/color], capable d'accueillir jusqu'à [b]20 Comment réaliser ce genre de diaporama ???? [ par mysterioooo ] bonjour, je dessine régulièrement et je voudrais pouvoir créer le même genre de diaporama que ce site : [url=http://www.pixelovely.com/tools/gesture.h


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,749 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales