|
50.2 emprunt bancaire - haut du calculateur |
  copyleftSee You Why? |
Avant de commencer,
observons le haut du calculateur :
|
|
Votre avenir : être formé au C.U.Y. |
Centre Universitaire de
Yourtown |
|
|
rue des forges 39 - 7350 Yourtown
Tél : +32 (0)65 43 00 53 |
|||
Ne ressemble-t-il pas étrangement à un tableau de 2 lignes et 3 colonnes,
bien que la première colonne ne semble pas divisée en deux lignes ?
Ceci est mis en évidence par l'image qui suit, en ajoutant dans la balise <table> l'argument border="2".
À ceux qui ont oublié (ou qui ne connaissent pas), nous suggérons d'aller (re)lire nos pages relatives au langage HTML et concernant les tableaux (http://cuy.be/html/html02fr.htm#TA).
|
|
Votre avenir : être formé au C.U.Y. |
Centre Universitaire de
Yourtown |
|
|
rue des forges 39 - 7350 Yourtown
Tél : +32 (0)65 43 00 53 |
|||
Cela suppose au moins une balise <table> suivie de </table>.
Les deux lignes se noteront par un doublement des deux balises <tr>...</tr>.
Les trois données (=colonnes) dans chaque ligne devraient donner naissance à un triplement des doubles balises <td>...</td> à l'intérieur de chaque ligne marquée par <tr>...</tr>.
<table> <tr> <td> <img src="../../images/logocuy1t.gif"> </td> <td> <p>Votre avenir : être formé au C.U.Y.<br> Centre Universitaire de Yourtown</p> </td> <td> Centre Universitaire de<br> Yourtown</td> </tr> <tr> <td> </td> <td bgcolor="#FFFFFF" width="342"> rue des forges 39 - 7350 Yourtown<br> Tél : +32 (0)65 43 00 53</td> </tr> </table>
Ce qui nous donnerait :
|
Votre avenir : être formé au C.U.Y. |
Centre Universitaire de Yourtown |
| rue des forges 39 - 7350 Yourtown Tél : +32 (0)65 43 00 53 |
Heureusement, je sais que :
Tiens ! N'y a-t-il pas une erreur ? Je ne vois qu'un doublement (au lieu d'un triplement) des doubles balises <td>...</td> à l'intérieur de la deuxième ligne marquée par le deuxième <tr>...</tr>, d'ailleurs, l'adresse n'est pas à sa place et il y a une cellule non visible...
Cela ne nous rappelle-t-il pas qu'il existe une instruction propre à une cellule d'un tableau qui détermine qu'à partir de cette cellule les cellules contiguës seront divisées en deux : rowspan="2" ? En d'autres mots, que cette cellule-ci occupera deux lignes ? Et nous nous rappelons tous que cette précision ne peut apparaître que dans une balise de type <td>.
Choix de la couleur :
De plus, une couleur de fond de type brunâtre ou rougeâtre (un rouge pas trop poussé peut-être : essayons #F00000, #E00000, #C00000, #A00000, #900000... #C00000 semble être le meilleur).
Aisance du logo :
Et si mon logo de CUY était moins "serré" dans sa cellule ? Rien ne m'empêche de lui donner de l'aisance en précisant la taille de la cellule dans laquelle il se situera (480 sur 180 pour une image de 450 sur 150, c'est bien, non ?) ; voir modifications en rouge ci-dessous.
Et si de plus, dans cette cellule (voir vert ci-dessous), tout cela était centré ?
Quant à la seconde cellule (la deuxième de la même ligne), j'aimerais faire autrement pour que (voir bleu ci-dessous) :
Quant à la troisième cellule de la même ligne... même genre de critère, sauf encore plus grand et justification à droite (question d'esthétique).
Et si nous passions à la deuxième ligne ?
Deux <td> pour trois colonnes ?
Plus que deux cellules à définir, puisque le rowspan="2" de la première cellule indique que la première cellule de la première ligne occuperait 2 lignes.
Un dégradé de couleurs ?
La deuxième (qui est la première à définir) semble contenir un dégradé de couleurs, de brun à blanc, ou de C00000 à FFFFFF. Comment faire ? Avoir le logiciel libre "The Gimp" (téléchargeable ici) et suivre les explications ici. Une image du type :
fera l'affaire. Elle s'appelle "head-under.jpg" et se situe dans le même répertoire ; de plus, elle fait 220 pixels de large sur 39 pixels de haut. Curieux, la manière de l'appeler, non ? De quoi revoir un peu la balise "style"... non, je n'avais pas tout dit ;-))
Dernière cellule...
Et enfin, la dernière cellule : un texte quasi noir, à peine bleuté (#000033) sur fond blanc (#FFFFFF) pour écrire l'adresse et le numéro de téléphone... en gras, avec retour à la ligne et justification à droite.
Notre source du tableau supérieur est donc devenue :
<table> <tr> <td width="480" height="180" rowspan="2" bgcolor="#C00000"> <div align="center"> <img src="../../images/logocuy1t.gif" width="450" height="150" alt="C.U.Y. est un centre d'études à distance, pour mieux vous servir."> </div> </td> <td align="center" title="Régent en sciences économiques, une formation qui vous ouvre les portes, tant dans l'enseignement que dans le domaine bancaire, des assurances... notre Centre vous aidera dans toutes vos démarches." style="background-color:#C00000;font-family:serif;font-size:16px;color:white;font-weight:bold;" width="219"> <p>Votre avenir : être formé au C.U.Y.<br> Centre Universitaire de Yourtown</p> </td> <td height="54" colspan="2" bgcolor="#C00000" width="342"> <div align="right" style="font-family:serif;color:#FFFFFF;font-size:30px;font-weight:bold;padding-right:10px;"> Centre Universitaire de<br> Yourtown</div> </td> </tr> <tr> <td width="219" height="40" align="center" style="background-image:url(head-under.jpg);"> </td> <td bgcolor="#FFFFFF" width="342"> <div align="right" style="color:#000033;font-weight:bold;padding-right:10px;padding-left:10px;"> rue des forges 39 - 7350 Yourtown<br> Tél : +32 (0)65 43 00 53</div> </td> </tr> </table>
Quelques questions que vous auriez pu (ou dû) vous poser :
Très bonne observation... aviez-vous remarqué que l'image dégradée (head-under.jpg) avait pour mesure 220 x 39 ?
Fixer la largeur de la colonne à 219 empêche de voir apparaître la limite (cadre) de l'image.
Ce texte écrit en blanc sur fond brunâtre est justifié à droite.
En l'absence de ce paramètre, le texte blanc aurait "collé" au bord blanc, à gauche de cette cellule du tableau... peu esthétique, non ?
J'aurais pu vous répondre "sérieusement" comme à la question précédente...
Bravo pour votre question !
Observons la gauche de la cellule :
- pas de justification à gauche ;
- texte noir sur fond blanc ;
- fond blanc contre fond blanc ;
- largeur de cette colonne fixée à 342 pixels...
Rien ne justifie ce "padding-left:10px;"
Ce paramètre signifierait que la/les cellule(s) située(s) en dessous serai(en)t divisée(s) en deux colonnes (ou que cette cellule est à cheval sur deux colonnes)...
Conséquence : la ligne suivante aurait dû compter un couple <td>...</td> de plus que la précédente.
Autre conséquence attendue : voir apparaître deux colonnes sous le texte "Centre Universitaire de Yourtown"... peu visible, non ?
D'où, RIEN ne justifie la présence de ce paramètre ' colspan="2" ' dans la cellule de droite du tableau qui reprend le texte "Centre Universitaire de Yourtown"
À vous de relire la source...
cependant, rappelez-vous que
- le sigle CUY occupe 450 pixels de large et que nous l'avons placé dans une cellule de 480 pixels pour le laisser à l'aise ;
- le dégradé de couleurs est une image de 230 pixels de large que nous avons coincée dans une cellule de 229 pixels de large ;
- les cellules de droite ont chaque fois été dimensionnées à 342 pixels.
Je n'avais vraiment pas envie de vous aider, mais je pense que, sauf erreur, la somme doit faire 1051 pixels.
Il ne nous restera plus qu'à nous occuper de la suite de la page, à savoir :
 |
Calculez vos remboursements
|
|||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||
qui suivra ce tableau supérieur que nous venons de créer :
|
|
Votre avenir : être formé au C.U.Y. |
Centre Universitaire de
Yourtown |
|
|
rue des forges 39 - 7350 Yourtown
Tél : +32 (0)65 43 00 53 |
|||
voir suite >>>
voir suite >>>
voir suite >>>
