Discussion :

[omedo]

Bonjour,

J'aimerai savoir si il est possible de calculer le nombre d’ancêtre d'un element

j'essaye de faire un explorateur de fichier a base de <ul> et <li>

en gros j'ai:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="conteneur">
	<ul>
		<li>
			<div class="FolderElem">Mon Dossier et info</div>
		</li>
		<li>
			<div class="FolderElem">Mon Dossier2 et info</div>
			<ul>
				<li>
					<div class="FolderElem">Mon SousDossier et info</div>
				</li>
			</ul>
		</li>
	</ul>
</div>

en gros j'ai besoin que les div FolderElem fasse a chaque fois toute la largeur de ma div conteneur
mais que elles est un padding a gauche de plus en plus grand
en gros:
- si c'est un dossier padding: 20px
- si c'est un sous dossier padding: 40px
- ...

ainsi de suite

Sachant que je ne sais pas d'avance jusqu’à combien de sous dossier je peux descendre
J'aimerai savoir si il existe un moyen de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
ul li*N .FolderElem{
 padding: N*20 px;
}

Merci d'avance

[rodolphebrd]

Bonjour,

Voici le code html simplifié (attribuer la classe aux li)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="conteneur">
  <ul>
    <li class="FolderElem"> dossier 
      <ul>
        <li class="FolderElem"> sous-dossier niveau1 
          <ul>
            <li class="FolderElem"> sous-dossier niveau3 
              <ul>
                <li class="FolderElem"> sous-dossier niveau4 </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

et pour le css un padding de 20px affecté à la classe suffit puisque ce padding va s'ajouter au fur et à mesure des sous-dossiers.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
*{
padding:0;
margin:0;
}
#conteneur {
	width:800px;
	background-color:#CCC;
}
.FolderElem {
	display:inline-block;
	width:auto;
	padding:50px;
	border: 2px solid #F00;
}