Liste stylée en arbre par CSS

Explications - // - Voyez les étapes successives en changeant la feuille de style (JS) :
Etat de base - pseudo-tableau_1 - pseudo-tableau_2 - arbre_1 - arbre_final - plus.

• X Famille
  • A Tribu
    • I
      • a
      • b
      • c
    • II Genre
      • d
      • espèce
      • f
  • B Ce cladogramme peut servir pour un organigramme.
    • III
      • g
      • h
      • i
      • j
    • IV
      • k
      • l
      • m
    • V
      • n
      • o
      • p

/* 1ere etape - état de base */
#principal {
		padding: 0 1em;
		border: 1px solid #99d;
		}
li {border:1px #ddd dashed}


/* 2e etape - pseudo-tableau_1 - positionnement horizontal */
ul, li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		}
li ul { left: 150px;}
li {
		width: 150px;
		padding-left: 6px;
		}


/* 3e etape - pseudo-tableau_2 - positionnement vertical */
#principal li.origine {top:12em;}
ul.terminal {top:-3em;}
#A {top:-7em}
#I {top:-4.5em}
#III {top:-7.5em}
#g {top:-3.7em}


/* 4e etape - arbre_1 - bordures */
li {border:0px #fff none} /* annuler le "pointillé didactique" */
li {
		border-color: #9a9;
		border-width: 3px; /* l'epaisseur */
		}
ul.vide {padding-left:3px;} /* pour compenser l'epaisseur */
li.origine { border-style: solid none none none;}
li.oba, li.haut { border-style: solid none solid solid;}
li.bas { border-style: none none solid solid;}
.terminal li { border-style: none none none solid;}


/* 5e etape - arbre_final */
li span {
	position: relative;
	top:-.7em;
	border:1px solid #9a9;
	padding:0 5px 2px;
	background-color:#fff;
	-moz-border-radius:.8em;
	}
li span.cartouche {
	display:block;
	left:.8em;
	top:-3.5em;
		width:120px; /* pour iE */
	voice-family: "\"}\"";
	voice-family: inherit;
	width:110px;
	}
html>body #menufix {width:110px;}
#III {top:-9em}
li.haut{ -moz-border-radius:.8em 0 0 0; }
li.oba { -moz-border-radius:.8em 0 0 .8em;}
li.bas { -moz-border-radius: 0 0 0 .8em;}
/* pour iE : pour faire disparaitre des traits trop long */
li {_background-color:#fff;}

/* 6e etape - adaptation de longueur */
#I li {left:-60px; width:210px; background-color:#fff;}
#I li ul li {left:60px; width:150px;}

(dernière modification le 26 mars 2004)