Généalogie des MaLiBeLe
Les ancêtres ont fait ce que nous sommes. Mieux les connaître, c'est donc mieux nous connaître.
La citation du jour
Confucius : Le silence est un ami qui ne trahit jamais.
Activités
geek - cycliste - généalogiste - Savoir - lecteur - collectionneur - Philosophe - citoyen - marcheur - scripteur - Photographe - instituteur - enseignant en sciences - enseignant formateur - journaliste local - bénévole
Les mots clés
villes et villages * challengeAZ * ARHFa * webtrees * ancêtre * vieux métiers * Histoire et histoires * ">1J1P * 1GM * geneatheme * PoilusVerdun * Gallica * généalogie * 1Ancetre * Sources * gedcom * état civil * archives
Lorand

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

Un arbre 4 générations en css

Mots clés : geek , généalogiste , 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.

Brèves
30 janvier – Webtrees 1.7.12

La version 1.7.12 est sortie le 08/12/2018. Téléchargement : webtrees-1.7.12.zip https://github.com/…/re…/downlo... (31.2 Mb). La prochaine version (...)

11 janvier – Une personne = au moins une source

Comme aucune personne n’est "inventée" en généalogie, la découverte de son existence provient toujours d’une information. Cette information est une (...)

10 janvier – Validité des sources

niveau 1 = très fiable : état civil, BMS, actes notariés niveau 2 = à recouper : 2-1 : informations reçues par courriel 2-2 : web-sites (les relevés (...)

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