Lorand
Apprendre, comprendre et transmettre pour exister. (Descartes)
La citation du jour
Jonas Salk : Notre plus grande responsabilité est d'être de bons ancêtres.
ACTIVITE
-  ?
- geek
- cyclotourisme
- généalogie
- lectures
- Collection
- bricolage
- citoyen
- marche
- Ecriture
- Photographie
Rubriques
Catégories
- ACTIVITE
- LOCALISATION
- Départements
- THEME
- ORGANISME
- PERSONNE & FAMILLE
- DOCUMENTATION
- EX-METIERS
- affichage
- Agenda_couleur
- Cyclotourisme
Mots-clés
Lorand

Site personnel de Roland Bouat. Pour les curieux : Lorand est un anagramme de Roland.

https://www.lorand.org

Accueil > Généalogie > Généa-techniques > Un arbre 4 générations en css

Un arbre 4 générations en css

Mots clés : geek, généalogie, web & internet

vendredi 20 juillet 2018, par Roland


Dans le cadre d’un projet de modèle pour Spip   (à venir prochainement peut-être), j’ai été amené à écrire une feuille de style qui affiche une liste html au format arbre généalogique horizontal tout en css.

Pour des motifs pédgogiques (et de clarté), j’ai utilisé une "id" ou une "class" pour chaque élément de la liste mais il reste possible de regrouper des "class" (voir même des "ul") pour raccourcir le code.

<!DOCTYPE html>
<html>
 <head>
   <title>Liste HTML transformée en arbre par CSS</title>
   <link rel="stylesheet" href="arbrecss.css" type="text/css" media="screen, print"
 </head>
 <body id="arbre4gene">
   <ul id="gene1">
     <li class="indi"><span>1:de cujus</span>
       <ul id="gene2">
         <li class="pere"><span>2:père</span>
           <ul class="gene3">
             <li class="gpp"><span>4:grand-père paternel</span>
               <ul class="gene4">
                 <li class="pgpp"><span>8:pgpp</span></li>
                 <li class="mgpp"><span>9:mgpp</span></li>
               </ul>
            </li>
            <li class="gmp"><span>5:Grand-mère paternelle</span>
               <ul class="gene4">
                 <li class="pgmp"><span>10:pgmp</span></li>
                 <li class="mgmp"><span>11:mgmp</span></li>
               </ul>
             </li>
          </ul>
       </li>
       <li class="mere"><span>3:mère</span>
         <ul class="gene3">
           <li class="gpm"><span>6:grand-père maternel</span>
             <ul class="gene4">
               <li class="pgpm"><span>12:pgpm</span></li>
               <li class="mgpm"><span>13:mgpm</span></li>
            </ul>
         </li>
         <li class="gmm"><span>7:grand-mère maternelle</span>
           <ul class="gene4">
             <li class="pgmm"><span>14:pgmm</span></li>
             <li class="mgmm"><span>15:mgmm</span></li>
           </ul>
         </li>
      </ul>
    </li>
  </ul>
</li>
</ul>
</body>
</html>

La liste html obtenue sans le fichier css associé affiche la liste ci-dessous (copie d’écran) :

Voici le fichier css associé : il doit s’appeler arbrecss.css et être dans le même dossier pour fonctionner avec le fichier html ci-dessus.

#arbre4gene {
        padding: 0 0;
        margin: 2 2;
        border: 1px solid #000;
        height:30em;
        width:800px;
        }
ul, li {
        display: block;
        position: relative;
        padding: 0;
        margin: 0;
        }
li ul {
        left:190px;
        }

/* boite d'affichage */
li span {
        position: relative;
        top:-.7em;
        border:1px solid #000;
        padding:0 6px 0 3px;
        background-color:#fff;
        }

/* première génération = individu */
#gene1 {
        top: 15em;
        left: 0px;
        }
li.indi {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }

/* deuxième génération = parents */
#gene2 {
        top: -8em;
        left: 190px;
        }
li.pere {
        height: 12em;
        width: 190px;
        border-style: solid none none solid;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.mere {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }

/* troisième génératon */
ul.gene3 {
        top: -4em;
        left: 190px;
        }
li.gpp {
        height: 6em;
        width: 190px;
        border-style: solid none none solid;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.gmp {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.gpm {
        height: 6em;
        width: 190px;
        border-style: solid none none solid;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.gmm {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
/* quatrième génération */
ul.gene4 {
        top: -3em;
        left: 190px;
        }
li.pgpp {
        height: 3em;
        width: 190px;
        border-style: solid none none solid;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.mgpp {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.pgmp {
        height: 3em;
        width: 190px;
        border-style: solid none none solid;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.mgmp {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.pgpm {
        height: 3em;
        width: 190px;
        border-style: solid none none solid;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.mgpm {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.pgmm {
        height: 3em;
        width: 190px;
        border-style: solid none none solid;
        border:.8em 0 0 0;
        padding-left: 6px;
        }
li.mgmm {
        width: 190px;
        border-style: solid none none none;
        border:.8em 0 0 0;
        padding-left: 6px;
        }

Ce fichier n’est pas optimisé et sa structure permet de ne pas ajouter de commentaire. L’utilisation de css affiche la page suivante (copie d’écran) : c’est la même liste (non modifiée) que celle affichée ci-dessus.


Mis en ligne au format plutôt brut pour libre adaptation.

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Dernières brèves
14 août Quand deux généalogistes se rencontrent...

Bonjour , vieille branche.
Entre nous, pas de complexes, seulement quelques implexes.
Mais, quand même, faisons attention à nos actes.
Rencontré (...)

4 juillet Le libre est davantage sécuritaire !

Entendu aujourd’hui, sur France Info (radio) : "l’administration ... (?) choisit des logiciels libres parce qu’il y a davantage de sécurité et qu’on (...)

2 mars URL raccourcie

Pour simplifier la saisie des URL raccourcies avec tinyurl.com, lorsque la page est affiché dans le navigateur, copier le code ci-dessous dans la (...)

Généalogie
Site servant aussi de test à la mise en œuvre de certaines fonctionnalités (donc expérimental).