Les feuilles de style permettent de contrôler la présentation
d'une page HTML, y compris, donc, les éventuels champs de formulaire qui
y figurent. Pour illustrer cette possibilité, nous nous proposons de détailler
la réalisation d'une boite de dialogue demandant l'e-mail de l'utilisateur
et ressemblant à ceci:
(cliquer dans la zone suivant "e-mail:" et observer le résultat)
(ATTENTION: l'affichage correct n'est garanti que sous Internet Explorer
5+ et Mozilla 0.9.5)
Il s'agit d'un tableau HTML de largeur 360, et ne comportant qu'une cellule
de hauteur 30. Cette cellule admet comme attribut "background" une
image de fond, de taille 360x30 pixels, réalisée avec un outil
de dessin comme Fireworks de Macromedia par exemple (cette image se compose d'un
rectangle au bords arrondis, d'un texte, et d'une petite image "père
noël"). La voici au format gif:
On écrit donc, si notre image (effetformulaire.gif) est stockée
dans le répertoire "images" sous la racine de notre site:
<table width="360"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="/images/effetformulaire.gif"
height="30">
On peut bien sûr choisir une autre image à condition d'adapter
la largeur du tableau HTML à la largeur de l'image choisie, et de ne pas
attribuer une hauteur trop faible à l'image (nous verrons pourquoi plus
loin).
Dans la cellule que nous venons de définir, nous allons insérer
un champ de formulaire (champ texte mono-ligne). Il nous faut le placer correctement
pour qu'il ne recouvre pas le texte "e-mail:", nous choisissons pour
cela la facilité, en nous bornant à insérer des espaces
insécables ( ) en nombre suffisant (par ailleurs, l'insertion
d'un espace insécable dispense d'utiliser un "gif invisible"
de remplissage pour s'assurer que la cellule s'affichera avec la hauteur - 30
pixels - voulue).
En toute rigueur, il aurait mieux valu découper l'image gif en deux, la
première découpe incluant le texte "e-mail", l'autre
découpe le reste de l'image, et bâtir un tableau HTML à deux
colonnes donc deux cellules, où chaque cellule aurait pour image de fond
la partie adéquate de l'image découpée.
Nous allons ensuite définir le style de notre champ texte: nous choisissons
les caractéristiques suivantes:
- police "Verdana" d'une hauteur de 12px par caractère;
- caractères gras;
- pas de bordure au champ texte;
- couleur de fond du champ texte identique à celle de l'image (#eeeeee).
Nous écrivons donc:
<input type="text" style="font-size : 12px; font-weight: bold;
font-family : Verdana, Helvetica, Sans-Serif; border : none; background-color
: #eeeeee" size="32" maxlength="255" name="email">
Nous choisissons une taille au champ (ici 32 caractères) qui correspond
à la taille de la police choisie au sein du champ et à la
taille de l'image gif choisie. Par ailleurs, la taille de la police choisie est
également adaptée à la hauteur de l'image.
Et voilà!
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|