Chronique familiale




La chronique familiale pas à pas

Placer le sommaire





Nous avons appris à supprimer le sommaire et le faire réapparaître ↗ avec les balises __NOTOC__ et __TOC__

Je l'ai donc d'abord supprimé et avant de le replacer ci-dessous, j'ai matérialisé le bord de la page avec un trait rouge 1.







On s'aperçoit qu'il s'est créé une marge de 36 pixels à gauche du sommaire, générée par la feuille de style de Geneanet et une marge en haut de 12 pixels qui est l'écart normal entre un tableau et l'élément le précédent.

La propriété margin-left2 admet des valeurs négatives. Plaçons le sommaire dans un conteneur à l'aide d'une balise <div>3 (conteneur dont j'ai matérialisé la bordure en vert) et affectons à ce dernier une marge négative :

<div style="margin-left:-36px;">
__TOC__ 4
</div>


Voici le résultat, le bord du conteneur (vert) est positionné 36 pixels à gauche par rapport au bord de la page (rouge) et donc le sommaire est aligné sur celui-ci :






Utilisons maintenant la propriété margin-top avec une valeur négative pour aligner le sommaire sur le haut de la page :

<div style="margin-left:-36px; margin-top:-12px;">
__TOC__
</div>


Résultat, le sommaire est aligné sur le bord gauche et le haut de la page :






Bien entendu, aligner le sommaire sur les bords gauche et haut de la page ne présente aucun intérêt. En revanche il peut être intéressant de placer le sommaire dans un conteneur et de le positionner n'importe où dans la page en l'alignant sur d'autres éléments.

Positionnons un conteneur au milieu de la page et plaçons le sommaire dedans, de façon à ce qu'il soit centré horizontalement et aligné sur le haut du conteneur :

<div style="width:40%; margin:auto; display:flex; justify-content:center;"> 5
<div style="margin-left:-36px; margin-top:-12px;">
__TOC__
</div>
</div>




image d'un arpenteur
 



Le géomètre avec son théodolite est formel émoticône rieur : Le conteneur rouge est centré horizontalement dans la page, le sommaire est également centré horizontalement dans le conteneur et le haut aligné avec le bord de ce dernier.



À partir de ces éléments, il est par exemple possible de centrer le sommaire entre deux images comme ceci :

<div style="width:30%; float:left;"> 6
<img src="https://... ... /agriates.JPG" style="width:100%">
</div>

<div style="width:40%; float:left; display:flex; justify-content:center;">
<div style="margin-left:-36px; margin-top:-12px;">
__TOC__
</div>
</div>

<div style="width:30%; float:left;">
<img src="https://... ... /bonifacio.JPG" style="width:100%">
</div>

<div style="clear:left;"></div>




Désert des Agriates en Corse

Falaises de Bonifacio
Notes

 
1. Il est bien évident que les bordures rouges ou vertes ne sont là que pour rendre la démonstration plus visible.
 
2. Nous avions vu ici : Tabulation et texte en retrait ↗ que la propriété margin-left sert à définir la marge à gauche d'un élément.
 
3. Nous avons appris comment Créer un conteneur avec la balise <div> ↗
 
4. Pour être correctement interprétées, seules les balises __TOC__ ou __NOTOC__ doivent figurer sur la ligne de code, à l'exclusion de tout autre caractère.
 
5. Nous avions vu dans ce paragraphe ↗ comment aligner dans un conteneur un élément dont nous ne connaissons pas la largeur ; et le sommaire rentre dans ce cadre puisque sa largeur peut évoluer en fonction de la longueur des sous-titres de votre page.
 
6. Voir ici pour : Mettre plusieurs conteneurs sur la même ligne ↗. À la fin du code, la propriété clear créditée de la valeur left est indispensable pour signifier au navigateur qu'il doit stopper l'alignement par la gauche et aller à la ligne.



───── oOo ─────

 Jean petit qui danse

 L'empereur, sa femme et le petit prince

 Il était un petit navire

 Au clair de la lune

 Malbrough s'en va-t-en guerre

 Il court, il court, le furet

 À la claire fontaine

 Le bon roi Dagobert

 Il était un petit navire

 Ne pleure pas Jeannette

 En passant par la Lorraine

 La mère Michel

 Il pleut, il pleut, bergère

 Sur le pont d'Avignon


Index des pages