Chronique familiale




La chronique familiale pas à pas

Créer un conteneur avec <div>



Nous savons donc déjà que la balise <div> sert à créer des conteneurs. Nous allons voir ici comment les mettre en page et comment mettre en forme leur contenu.

Il me paraît utile de préciser que <div> fait partie des balises reconnues dès l'origine par GeneWeb et que donc vous n'aurez pas à vous soucier de la pérennité du code.

 

 Dimensions du conteneur


 Hauteur


Les cas où il faut spécifier la hauteur du conteneur sont assez rares.

En effet, nous avons déjà vu comment se servir de la balise <div> pour l'alignement d'une image, tant pour les Premium dans ce paragraphe Alignement par défaut ↗, que pour ceux qui ne sont pas Premium dans celui-ci Alignement de l'image ↗ et nous n'avons pas eu besoin de notifier une hauteur.

Si vous voulez absolument spécifier une hauteur, il faudra utiliser la balise height qui admet les valeurs en px, em, vh1, cette dernière ayant l'avantage d'adapter automatiquement la hauteur du conteneur à celle de la fenêtre. En revanche la valeur en % n'est pas interprétée par les navigateurs.

Voyons un exemple 2 :

<div style="height:40vh">

<img src="https://... /clocher.JPG" style="height:100%">
Je précise ici que l'image doit occuper toute la hauteur du conteneur

</div>


Et voici le résultat :


clocher.JPG



Vous pouvez faire varier la taille de votre fenêtre, vous verrez que la hauteur du conteneur s'adapte automatiquement.


 Largeur


Il est préférable notamment lorsqu'on souhaite y intégrer du texte de ne spécifier que la largeur, la hauteur s'adaptant automatiquement à la longueur de celui-ci. Nous utiliserons pour ce faire la propriété width qui admet entre-autres des valeurs en px, em, %, etc. Sauf usage bien précis, il est d'ailleurs préférable d'exprimer la largeur en % pour qu'elle s'adapte à toutes les résolutions d'écran, voire en em si on souhaite qu'elle s'adapte au texte quelle contient.

Créons une première boite avec ce code :

<div style="width:30%">
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.

<div>


Voici le résultat :

Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.


Bon ce n'est pas terrible ! Voyons si on peut améliorer cette présentation.

 

 Ajouter des bordures


Nous avions dit dans les Bordures de tableau ↗ qu'il convenait d'affecter à la bordure un des styles suivants pour que celle-ci soit définie, il en va de même ici :


solid (solide) dotted (pointillé)
dashed (tirets) double (double)
groove (rainurée) ridge (relief)
inset (relief intérieur) outset (relief extérieur)



Comme pour les tableaux, on peut affecter une couleur à la bordure (noire par défaut) et le pixel est l'unité la plus appropriée pour en définir l'épaisseur (sinon la valeur par défaut sera de 2 ou 3 pixels selon les navigateurs).


Voyons un exemple :

<div style="width:30%; border:solid 2px red;">
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si
lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare
permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur,
aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.

</div>

Résultat :


Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.



La "cerise sur le gâteau" c'est que l'on peut affecter un style, une épaisseur, une couleur différentes à chaque bordure. Il faudra pour cela utiliser les propriétés spécifiques que j'avais évoquées dans cette note ↗, à savoir border-style, border-width et border-color.

Les valeurs sont affectées à la bordure dans le sens horaire en commençant par en haut. Elles sont séparées par un espace et pour chaque propriété clôturées par un point-virgule. Si une seule valeur est précisée, elle sera affectée aux quatre côtés, si deux valeurs sont précisées, la première sera affectée aux côtés haut et bas, la seconde aux côtés droit et gauche.


Voyons quelques exemples :

<div style="width:25%; border-style:solid dashed dotted double;">
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si
lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare
permissi nec firmare nisu valido gressus.

</div>


<div style="width:25%; border-style:solid; border-width:3px 0px 5px 6px;"> (La valeur 0px correspond à l'absence de bordure)
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si
lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare
permissi nec firmare nisu valido gressus.

</div>


<div style="width:25%; border-style:solid; border-width:2px; border-color: red blue green brown;">
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si
lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare
permissi nec firmare nisu valido gressus.

</div>


Et les résultats :

Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
 
Et on peut bien sûr mixer le tout :


Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.


 

 Modifier la couleur de fond


A l'aide de la propriété background-color :

<div style="width:30%; border:solid 1px; background-color: lightgrey;">
Coactique aliquotiens... ...per prona discedunt.
</div>


Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.


 

 Agencer le contenu


 Alignement


Nous avons déjà vu comment mettre en page du texte ↗, les mêmes principes s'appliqueront ici. Il en ira de même si nous souhaitons aligner un autre contenu, des images entre-autres.

On va donc se servir de la propriété text-align et dans l'exemple qui suit de la valeur justify :

<div style="...; text-align:justify;">3
Coactique aliquotiens... ...per prona discedunt.
</div>


Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.



 Espacement


On va se servir de la propriété padding et dans le cas présent de valeurs en em4 pour créer un espace entre la bordure et le texte :

<div style="...padding:1.2em;">
Coactique aliquotiens... ...consternuntur, aut ex .
</div>


Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex.



 Mise en forme du texte


Si le conteneur héberge du texte, nous avons vu comment mettre en forme ↗ celui-ci.

Plutôt que de mettre ces consignes dans la balise <div>, il sera préférable de les passer à travers une balise <p> ou <span>, ce qui permettra d'ailleurs de présenter de façon différente d'autres textes ou images dans le même conteneur.

<div style="width:40%;border-width:1px;border-style:solid;padding:1.2em; text-align:justify;">
<span style="font-family:comic sans ms; color:#008080; font-size:0.9em; font-weight:bold; font-style:italic;">

Coactique aliquotiens... ...per prona discedunt.

</span>
<div>



Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.


 Récapitulatif



Maintenant qu'on a acquis toutes ces notions on peut créer une "boite" pour, par exemple, mettre un texte en évidence :

<div style="... border-width:0 0 0 2px; border-style:solid; border-color:red;">
Coactique aliquotiens... ...nisu valido gressus.
</div>

On définit une bordure uniquement à gauche en mettant l'épaisseur du trait à 0 pour les autres côtés. Cette bordure gauche sera rouge puisque c'est la couleur que nous avons spécifié.


Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.



Et s'il s'agit de ne spécifier qu'une seule bordure comme dans l'exemple ci-dessus, on peut encore simplifier la syntaxe avec les propriétés border-top, border-right, border-bottom ou border-left, qui définissent respectivement le côté haut, droite, bas ou gauche du conteneur. Pour l'exemple ci-dessus et un résultat identique, la syntaxe devient alors celle-ci :

<div style="... border-left:solid 2px red;">
Coactique aliquotiens... ...nisu valido gressus.
</div>

 

 Alignement du conteneur


 À gauche

Pour la gauche, comme pour la droite, cela se fait à l'aide de la balise float. À gauche avec la valeur left :

<div style="...float:left;">
Coactique aliquotiens... ... valido gressus.
</div>


Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.



Attention ! Si vous ne spécifiez pas d'autres alignements, il n'y aura pas de retour à la ligne et ce qui suit votre conteneur sera aligné à sa droite tant qu'il y aura de la place.

Il convient donc d'utiliser la propriété clear et la valeur left pour revenir à la ligne, en l'incluant de préférence dans une balise <div>, comme ceci :
<div style="clear:left"></div>


 À droite

À droite avec la valeur right :

<div style="...float:right;">
Coactique aliquotiens... ... valido gressus.
</div>

Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
 

 Centré

Nous avons appris à centrer une image ↗. Si nous utilisons la propriété margin et la valeur auto pour aligner notre conteneur, il faudra ici aussi impérativement spécifier une largeur pour le conteneur.

<div style="...width:30%; margin:auto;">
Coactique aliquotiens... ... valido gressus.
</div>

Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.


 
Si nous ne voulons pas (ou ne pouvons pas) spécifier de largeur, il existe une possibilité un peu plus complexe avec la propriété display et la valeur flex, puis la propriété justify-content et la valeur center. Il faudra affecter ces paramètres à une première balise <div> (une première "boite") contenant la seconde, comme ceci :

<div style="display:flex; justify-content:center;">
<div style="border:solid 1px; text-align:justify; padding:1.2em;">

Coactique aliquotiens nostri pedites ad eos persequendos scandere.
</div>
</div>


Coactique aliquotiens nostri pedites ad eos persequendos scandere.

 

 Mettre plusieurs conteneurs sur la même ligne

Nous utiliserons pour ce faire la balise float et la valeur left qui alignera chaque conteneur à gauche dans la place restante sur la ligne.

Il faut dans un premier temps fixer pour chaque conteneur une largeur telle que la somme de ces largeurs n'excède pas 100%. Dans le cas contraire, le dernier conteneur serait repoussé sur la ligne inférieure.
Alignons trois conteneurs côte à côte en laissant une marge de 1em entre chaque conteneur avec la propriété margin-right :

<div style="...float:left; width:30%; margin-right:1em">Coactique aliquotiens...</div>
<div style="...float:left; width:30%; margin-right:1em">Coactique aliquotiens...</div>
<div style="...float:left; width:30%;">Coactique aliquotiens...</div>

Voici le résultat :

Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.


Si nous voulions aligner horizontalement les trois conteneurs, il faudrait les englober dans un autre conteneur et utiliser les propriétés display et justify-content comme nous l'avons vu dans le paragraphe précédent.

 

 Insertion dans un texte


Nous allons reprendre notre boite du paragraphe "Récapitulatif" et essayer de l'insérer dans un texte :


Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii... ... lateret adfectans. quibus mox Caesar acrius efferatus.
<div style="... float:right;">
Coactique aliquotiens... ...nisu valido gressus.
</div>
Velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel... ... saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem.



Voici le résultat :


Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus.
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
Velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur. Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem.


On se rend compte que c'est loin d'être satisfaisant !


 Mise en page


On va dans un premier temps aligner le paragraphe dans lequel est inclus la boite et pour cela utiliser une autre balise <div> 5, "boite parent" qui contiendra notre "boite enfant". Et pour finir spécifier à l'aide de la propriété margin, une marge entre le texte du paragraphe et le conteneur :


<div style="width:100%; text-align:justify">
Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii... ... lateret adfectans. quibus mox Caesar acrius efferatus.
<div style="...margin:1em 0em 0.5em 1.5 em;">
Coactique aliquotiens... ...nisu valido gressus.
</div>
Velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel... ... saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem.

</div>


Vous pouvez voir que j'ai spécifié des marges différentes selon les côtés (notamment une marge à 0 à droite) pour obtenir un résultat plus élégant. Il vous appartiendra de les ajuster en fonction de ce que vous attendez.


Et le résultat :

Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus.
Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus.
Velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur. Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem.


Il faudra peut-être faire varier l'emplacement du conteneur dans le texte jusqu'à obtenir un résultat satisfaisant.

 

 Notes

 
1. vh pour viewport height (hauteur de fenêtre). Une unité vh est égale à 1/100 de la hauteur de la fenêtre, 100vh est égal à 100/100 de la hauteur de la fenêtre. Dans l'exemple en question 40vh représentent 40/100 de la hauteur de la fenêtre.
 
2. Je présenterai toujours les diverses balises, attributs, propriétés et valeurs avec la couleur que je leur avais affectée au début du tutoriel. Mais à partir d'ici, je suppose que vous avez assez bien assimilé les bases du HTML pour qu'il ne soit plus besoin de différencier les divers éléments par des couleurs dans l'écriture des lignes de code.

Cependant, j'écrirai les lignes de code en bleu et le contenu en vert pour une meilleure lisibilité.
 
3. Pour les mêmes raisons que j'ai évoquées ci-dessus, je ne ferai plus figurer dans le code que les éléments en cours de démonstration ; ici en l'occurrence, la propriété text-align.
 
4. Si le conteneur avait hébergé des images, nous aurions plutôt utilisé des valeurs en pixels pour créer cet espace.
 
5. Nous aurions pu utiliser pour ce faire une balise <p>. Mais outre le fait qu'elle génère automatiquement des sauts de ligne qu'on ne peut pas supprimer, elle ne conserve pas toutes les consignes de mise en forme du texte (taille, graisse), ce qui obligerait à les répéter.



───── oOo ─────


Index des pages