Passons au texte !
D'abord, si le texte est trop long pour la boîte et qu'on ne veut pas qu'il sorte, il faut lui permettre de glisser. On va donc ajouter une "scroll" de l'anglais "faire défiler". Pour ça le code est "overflow:auto" à mettre après avoir défini la taille. Ce qui donne :
Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
- Code:
-
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div>
J'ai enlevé l'ombre et agrandi la boîte, pour que ça soit plus visible.
Ensuite, si on veut que le texte soit moins contre les bords de la boîte, on peut lui donner de l'air, avec la balise "padding". On définit alors la taille qu'on lui laisse, toujours en px:
Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
- Code:
-
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;padding: 25px">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div>
Comme on donne de l'air, on dilate la boîte. Elle s'agrandit. Il faut donc penser à baisser sa taille (width et height) si ses nouvelles dimensions vous gênent.
Là encore, on peut définir où on donne de l'air (haut, bas, droite, gauche). On peut soit faire "padding-top: xpx; padding-bottom, etc" ou tout d'un coup: "padding:8px 10px 1px 3px".
8px : haut (top)
10px : droite (right)
1px : bas (bottom)
3px : gauche (left)
Exemple :
Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
- Code:
-
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;padding:8px 10px 1px 3px">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div>
Pour la mise en forme du texte, en listing:
Pour l'espacement : unité : pt, comme on est en anglais, les virgules sont des points, donc si on veut mettre des virgules, comme 1,5, on met 1.5.
-Alignement : text-align:center/right/left/justify
-Barré : text-decoration: line-through
-Couleur : color:#code couleur ou le nom en anglais
-Espacement entre les lettres : letter-spacing: xpt (si vous mettez un chiffre positif, l'espacement sera grand et un chiffre négatif, l'espacement faible)
-Espacement entre les lignes : line-height: xpt
-Espacement entre les mots : word-spacing: xpt
-Gras : font-weight: bold
-Italique : font-style: italic
-Majuscule (tout le texte en majuscule) : text-transform: uppercase
-Minuscule (tout le texte en minuscule) : text-transform: lowercase
-Ombre : text-shadow: xpx xpx xpx #code couleur/nom en anglais
-Police : font-family: titre de la police
Si vous mettez une police dont vous n'êtes pas sûrs qu'elle existe sur d'autres ordinateurs, mettez-en une de secours. Séparez-les par une virgule. Exemple : font-family: Georgia, Verdana
-Souligné : text-decoration: underline
-Taille : font-size: xpx
Comme je disais que le codage c'est des boîtes dans des boîtes, nous allons en faire. On aurait pu tout faire dans une. C'est juste à titre d'exemple. Des fois, on a pas le choix de faire plusieurs boîtes.
Une boîte rangement et une boîte texte :
La boite rangement
- Code:
-
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;"></div>
La boîte texte
- Code:
-
<div style="padding:10px; text-align:justify;color:#0000ff;letter-spacing: 1.4pt;word-spacing: 1.6pt;line-height: 1.2;text-transform: uppercase; text-shadow: 0px 0px 5px #66ccff; font-family: verdana; font-size: 12px"></div>
Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
- Code:
-
<div style="width:400px; height:250px; overflow:auto; background-color:#fff; color:black; border-top: double 2px #D1B48C; border-bottom: ridge 5px #D1B48C; border-right: inset 5px #D1B48C; border-left: outset 5px #D1B48C;"><div style="padding:10px; text-align:justify;color:#0000ff;letter-spacing: 1.4pt;word-spacing: 1.6pt;line-height: 1.2;text-transform: uppercase; text-shadow: 0px 0px 5px #66ccff; font-family: verdana; font-size: 12px">Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</div></div>
On a donc la boîte texte dans la boîte rangement.