|
50.3 emprunt bancaire bas du calculateur |
  copyleftSee You Why? |
| | Deux dernières cellules du calculateur (50.4) 
Comme signalé en fin de séquence précédente, il nous suffit de nous occuper du bas du calculateur et nous aurons fini :
 |
Calculez vos remboursements
|
|||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||
Comme tout cela semble bien compliqué ! Essayons de diviser notre travail en étapes.
Comme pour la partie supérieure développée dans la séquence précédente, n'y aurait-il pas un tableau dissimulé ? Peut-être un tableau de 2 lignes et 2 colonnes ?
Ceci est mis en évidence par l'image qui suit, en ajoutant dans la balise <table> l'argument border="2" cellpadding="2". On y découvre bien un tableau de 4 cellules.
Ici aussi, à 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).
|
Calculez vos remboursements
|
|||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||
Cela suppose au moins une balise <table> suivie de </table>.
Les deux lignes se noteront par un doublement des deux balises <tr>...</tr>.
Les deux données (=colonnes) dans chaque ligne devraient donner naissance à un doublement des doubles balises <td>...</td> à l'intérieur de chaque ligne marquée par <tr>...</tr>.
Elle semble bien facile. Un fond dégradé et un petit losange au milieu.
Pour le fond dégradé, facile, on emploiera le même que celui employé pour le haut du calculateur (rappel : head-under.jpg, un format .jpg n'admet pas la transparence, donc le fond couvrira l'éventuel fond d'écran de ma page (comme ici d'ailleurs).
 |
Pour le losange, facile à créer avec "Gimp", GNU Image Manipulation Program, logiciel gratuit et disponible dans différentes langues... inutile de pirater des PhotoShop ou autres. Deux solutions,
soit ne créer que le losange et rendre le reste de l'image transparente... à sauvegarder en GIF ou PNG (car JPG n'admet pas la tranparence),
soit (ce fut notre choix) créer une image rectangulaire point par point avec pourtour de la même couleur que le fond sur lequel ce losange devra figurer (quasi impossible à employer sur un autre fond), peu importe le format de l'image... sauf si la couleur #C00000 a été choisie comme couleur de transparence (c'est exactement ce qui a été fait ici, la preuve : ).
Voici d'ailleurs l'agrandissement de ce petit losange créé. Le lecteur observera les 16 pixels de largeur et les 21 pixels de hauteur.
Le lecteur observera le paramètre style="background-image:url(head-under.jpg);" de l'instruction <td width="221" height="39" align="center" style="background-image:url(head-under.jpg);"> <img src="diamond.gif" width="16" height="21"> qui permet une image de fond pour une seule cellule d'un tableau.
Le lecteur aura aussi remarqué que les paramètres width et height de l'image sont inutiles, puisque c'est le format d'origine de notre image 'diamond.gif'.
<table> <tr> <td width="221" height="39" align="center" style="background-image:url(head-under.jpg);"> <img src="diamond.gif" width="16" height="21"> </td> <td> <p>Le texte : Calculez vos remboursements
en gras</p> </td> </tr> <tr> <td> <p>liste de liens<br> et de remarques</p> </td> <td> <p>formulaire du<br>
calculateur</p> </td> </tr> </table>
Ce qui nous donnerait :
|
Le texte : Calculez vos remboursements en gras |
|
liste de liens |
formulaire du |
... juste avec une petite tricherie... personne n'a rien dit ; personne n'a rien vu...
j'ai pourtant bidouillé à votre insu : j'ai simplement transformé :
<table>
en
<table border="1">
sinon vous n'auriez même pas vu le tableau, puisque le paramètre par défaut est border="0"...
Par contre, je déplore la ligne brunâtre à doite de l'image. C'est normal : n'oublions pas que notre image fait 220 pixels sur 39... or le cadre prévu a 221 pixels de large, donc trop large pour l'image à y placer... l'image se reproduit (comme l'image de fond du site) et ce que vous voyez est la tranche gauche de l'image reproduite. Il suffit de diminuer comme nous l'avions fait dans le haut du calculateur : 219 est préférable à 221... sauf si l'on souhaite le trait brun à droite, ce qui faisait partie du modèle souhaité au départ.
Ou la seconde de la première ligne... encore plus facile ! Il suffit d'écrire le texte "Calculez vos remboursements" en gras et précédé de quelques espaces (donc insécables).
Dois-je m'occuper de l'espace qu'occupera cette cellule ? N'oublions pas que la largeur du tableau, partie supérieure du calculateur était 1051 pixels... mais ne l'utilisons pas pour l'instant.
La source de notre deuxième cellule deviendra donc (voir en vert) :
<table> <tr> <td width="221" height="39" align="center" style="background-image:url(head-under.jpg);"> <img src="diamond.gif" width="16" height="21"> </td> <td> <div align="left">
<font face="Verdana, Arial, Helvetica, sans-serif">
<b>Calculez vos remboursements</b>
</font>
</div>
</td> </tr> <tr> <td> <p>liste de liens<br> et de remarques</p> </td> <td> <p>formulaire du<br>
calculateur</p> </td> </tr> </table>
Ce qui générera un tableau de ce type :
|
Calculez vos remboursements
|
|
liste de liens |
formulaire du |
À ce stade-ci, vous êtes tout à fait en droit de vous poser des questions. En voici quelques unes que vous auriez pu (ou dû) vous poser :
Très bonne observation... Vous vous rappelez probablement que l'image dégradée (head-under.jpg) avait pour mesure 220 x 39. Nous avions cependant fixé la largeur de la colonne à 221 pour voir apparaître la répétition de l'image (et donc un trait vertical à droite).
Et comme la largeur totale du calculateur (voir partie supérieure) a été fixée à 1051 pixels, on aurait pu fixer la largeur de la colonne de droite ici à 830 px (différence entre 1051 et 221 pixels... mais on peut aussi le faire à la deuxième ligne. Ma préférence va cependant à la fixation le plus rapidement possible, donc ici.
Ce texte écrit en en noir sur une image de fond ne semble pas souffrir de la couleur gris clair de cette image.
Cependant, dans une étape finale, nous proposerons une solution pour échapper aux inconvénients de cette image de fond. Ne pas oublier d'y revenir en son temps.
Bien vu ! Cependant, on a pu observer que si la largeur de la colonne est supérieure à la largeur de l'image, l'image se reproduit en largeur pour occuper tout l'espace nécessaire... Juste comme le fait l'image du bébé au doigt interrogateur qui sert d'image de fond pour nos pages...
Une image de fond ne fixe ni la largeur d'une colonne, ni la largeur d'une page Web, contrairement à une image placée dans la colonne !
La largeur indiquée était donc indispensable.
Il ne nous restera plus qu'à nous occuper de la suite de la page, à savoir les deux dernières cellules du navigateur, problème qui ne nous semble pas des moindres :
La troisième cellule :
|
et enfin, cette dernière cellule :
|
|||||||||||||||||||||||||||
Ce sera l'objet de la séquence suivante.
voir suite >>>
voir suite >>>
| | Deux dernières cellules du calculateur (50.4)
