Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Boîte à outils

Boîte de texte ombrée

Les boîtes de texte ombrées permettent de mettre en valeur un élément important du document de présentation. Grâce aux fonctions CSS, il est également possible de créer de tels encadrés dans une page web.

La boîte ombragée ci-dessous a été obtenue grâce à ces quelques lignes de code :

<DIV style="position: relative;
top: 20px;
left: 20px;
width: 360px;
height: 400px;
background:#9999CC;
</DIV>

<DIV style="position: relative;
top: -390px;
left: 12px;
width: 360px;
height: 400px;
border: solid 2pt #666699;
padding: 8 px;
font-size: 10pt;
font-family:Verdana;
background:#FFFFCC;
color:#000000">Placer ici le contenu de la boîte
</DIV>

Cette mise en forme résulte d'une astuce qui consiste à créer séparément les deux éléments (ombre et avant-plan) et à les superposer par l'ajustement précis des paramètres top et left.

Voici la signification de chacune des lignes du code :

 
<DIV style="position: relative;
Début de la boîte ombrée; le paramètre "position: relative" indique qu'elle s'insère juste à la suite du texte précédent. Cette première balise <DIV> comporte les mises en forme de la zone d'ombre.
top: 20px;
Décalage de l'ombre d'une valeur de 20 pixels vers le bas par rapport à la ligne normale.
left: 20px;
Décalage de l'ombre d'une valeur de 20 pixels vers la droite par rapport à la marge de gauche.
width: 360px;
Largeur de la zone d'ombre (en mauve dans l'exemple).
height: 400px;
Hauteur de la même zone d'ombre.
background:#9999CC;
Couleur du fond de la zone d'ombre (mauve).
</DIV>

Fin de la zone d'ombre.
<DIV style="position: relative;
Début de la seconde section de la boîte ombrée. Cette deuxième balise <DIV> comporte les mises en forme de la zone qui contiendra le texte.
top: -390px;
Décalage vertical négatif par rapport à la section précédente. Dans la mesure où, normalement, les deux zones devraient s'insérer l'une après l'autre sur la page, il faut que le décalage de cette section couvre la hauteur de la zone précédente, et un peu plus pour obtenir l'effet de décalage.
left: 12px;
Là aussi, le décalage est calculé afin d'obtenir une distance de décalage gauche identique à celle du décalage haut. L'ajustement de ce paramètre (ainsi que le précédent) constituent la difficulté principale de cet agencement; il peut être nécessaire de modifier plusieurs fois les valeurs avant de trouver la bonne combinaison.
width: 360px;
Largeur de la zone. Identique à la zone d'ombre.
height: 400px;
Hauteur de la zone. Également identique à la zone d'ombre.
border: solid 2px #666699;
Paramètres de bordure de la zone qui contient le texte : solid pour une ligne pleine, 2px pour une ligne épaisse de deux points et #666699 pour la couleur de la ligne.
padding: 8 px;
Distance intérieure entre les bords de l'encadré et le texte.
font-size: 10pt;
Taille de la police du texte.
font-family:Verdana;
Type de police de caractères.
background:#FFFFCC;
Couleur du fond.
color:#000000">Placer ici le contenu de la boîte
Emplacement où vient prendre place le contenu.
</DIV>
Fin de la deuxième zone, et fin de l'ensemble de la boîte ombrée.

 

Voilà ! Si ce n'est pas clair ou si vous avez besoin de précisions, n'hésitez pas à m'écrire.

 
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011