Introduction à la mise en page II

Nous avons vu hier comment aligner du texte, mais certains auront remarqué que les lettres touchaient le bord du cadre. Ce n’est pas trop gênant mais pas joli non plus.
Nous allons éloigner le texte du cadre avec la propriété padding dans un ajout du type <p style="padding-right: 20px; padding-left: 20px; padding-bottom: 20px; padding-top: 20px">, pour définir des marges autour de notre paragraphe. Right, left, bottom et top pour, respectivement la droite, la gauche, en bas et en haut, et px pour pixel. Le paragraphe suivant, justifié, a des marges droite et gauche de 120px.

Considérant que les Etats Membres se sont engagés à assurer, en coopération avec l’Organisation des Nations Unies, le respect universel et effectif des droits de l’homme et des libertés fondamentales.
Considérant qu’une conception commune de ces droits et libertés est de la plus haute importance pour remplir pleinement cet engagement.

J’aimais bien ce cadre autour de mon texte, Régine nous avait appris à le mettre avec la fonction <table> dont je vous rappelle la syntaxe: <table><tbody><tr><td>.
J’ajoute juste trois instructions à ma fonction table, comme suit: <table bordercolor="blue" width="75%" bgcolor="#ddaadd" border="8">.

  • bordercolor pour donner une couleur à mon cadre
  • width pour donner à ma table une largeur, ici relative de 75% de la zone d’affichage
  • bgcolor pour un fond coloré
  • border pour définir l’épaisseur de mon cadre.

Je vais également mettre les instructions padding dans le td pour écarter le texte du bord… 20px sur les cotés et 10px en haut et en bas.

L’Assemblée Générale proclame la présente Déclaration universelle des droits de l’homme comme l’idéal commun à atteindre par tous les peuples et toutes les nations afin que tous les individus et tous les organes de la société, ayant cette Déclaration constamment à l’esprit, s’efforcent, par l’enseignement et l’éducation, de développer le respect de ces droits et libertés et d’en assurer, par des mesures progressives d’ordre national et international, la reconnaissance et l’application universelles et effectives, tant parmi les populations des Etats Membres eux-mêmes que parmi celles des territoires placés sous leur juridiction.

Le code de ce tableau commence donc par
<table bordercolor="blue" width="75%" bgcolor="#ddaadd" border="8">
<tbody>
<tr>
<td style="padding-right: 20px; padding-left: 20px; padding-bottom: 10px; padding-top: 10px">
<font face="Comic Sans MS" size="3">
<p align="justify">

Voilà… bon, mes couleurs sont discutables, mais vous saurez mettre les vôtres, je vous fais confiance.

Si vous avez des questions, n’hésitez pas… et.. même un petit commentaire, pour me dire si c’est bien utile, tout ça…

Publicités
Cet article a été publié dans Informatique. Ajoutez ce permalien à vos favoris.

5 commentaires pour Introduction à la mise en page II

  1. Sunsyharrey dit :

    Bonjour de samedi frederic….ben non vois tu on ne fait pas hebergement en chambre d’hotes….Mais si tu passes dans mon coin,je t’offres volontiers le café !!avec en prime faire la connaissance de mon mari et moi !!et puis j’habite au soleil (normalement car là il pleut)…donc voyage agreable….Merci pour ton code,hé bien oui il va me servir je l’ai enregistré dansmon bloc note pour plus tard…. su tu as d’autres suggestions je suis preneuse…..de codes !! hhihiihihia tres bientotGhislaine

  2. ♥.҈.҈.♥. Zéphyrine dit :

    Je viens d’essayer ton petit encadrement, modulable à souhait dans sa largeur et ses couleurs. C’est bien..merciBon WE à toi…ne mange pas trop…gras!Bisous

  3. Sunsyharrey dit :

    mais Régine !! si si si laisse manger gras !!il a offert son foie l’autre jour !!autant qu’il soit bon tu crois pas ?sans rancune hein mon fred mais tu sais moi quand on parle de bonnes choses !!!!gros bisousGhislaine

  4. Frederic dit :

    Non, mais, j’y crois pas…. elles vont se partager mes meilleurs morceaux !!!!Vade retro, les gourmandes… travaillez un peu vos instructions HTML pour faire une jolie table, d’abord :-)Ce sera une prochaine leçon… comment dresser la table, je vous embrasse fort, prenez soin de vous !

  5. sissou dit :

    est ce bien utile?????? c’est ta question……..alors avec la franchise qui me caractérise , voici ce que je répondrais…:…comme je comprends pas le chinois , il m’est trés difficile de mettre à execution tes conseils mais je vois que tu as des adeptes donc trés utiles surement …………….pour partager , tu sais que je suis toujours partante…………….faut juste voir les bons morceaux………..veux pas m’empoisonner……………..MDR……………….!!!!maintenant voilà mon tit com…:…vu le nom de ton blog……………….te dirai ——> j’ai du mal à délirer sur ce coup là……………PTDR…..bisou doux

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s