Lorand
Apprendre, comprendre et transmettre pour exister. (Descartes)
La citation du jour
Henry James : Les idées sont de véritables forces. Le pouvoir de la personnalité est également infini. L'union des deux fait toujours l'histoire.
ACTIVITES
- geek
- cyclotourisme
- généalogie
- lectures
- Collection
- citoyen
- marche
- Ecriture
- Photographie
Rubriques
Catégories
- Remue-méninges
- THEME
- PERSONNES
- VILLES ET VILLAGES
- Départements
- Généalogie
- STRUCTURES
- Cyclotourisme
- ACTIVITES
- DOCUMENTATION
- METIERS
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 > Technologie de la généalogie > 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
9 novembre Qu’utiliser pour un site web (ou un blog) ?

Voici ceux que j’ai essayé... DokuWiki (wiki) Dotclear (blog) Drupal (portail) Joomla ! (portail) MediaWiki (wiki) PhpBB [en] (forum) Spip CMS avec (...)

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 (...)

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