Surimposition avec stack

Le conteneur stack est un conteneur dont les éléments s'affichent l'un sur l'autre et non l'un à coté de l'autre comme avec la balise box.
L'application la plus simple est de faire du texte avec effet de gravure, mais il en est d'autres comme on va le voir avec les exemples.

La balise stack

stack

Conteneur dont le contenu se superpose. La taille par défaut est celle du plus grand élément contenu.

style

L'attribut style est spécialement utile pour cette balise et surtout pour disposer les éléments contenus. La taille du conteneur peut être ainsi définie par les descripteurs width et height de CSS.

Exemple d'ombrage

On réalise un effet d'ombre, ou de gravure, en surimposant deux textes, décalés et de couleurs différentes.

<description value="Soumettre" style="color:white; margin-left:1px; margin-top:1px" />
<description value="Soumettre" style="color:gray" />

L'essentiel est fait par l'attribut style et les descripteurs CSS: color pour la couleur, margin-left pour le décalage à gauche, margin-top pour le décalage en haut.
Les textes sont inclus dans un conteneur stack, que l'on place par exemple dans un bouton pour lui donner un libellé ombré.

Exemple de progressmeter

Si vous avez lu le tutoriel dans l'ordre recommandé, les chapitres de premier niveau d'abord, vous connaissez l'objet progressmeter, et peut-être avez-vous déploré que la valeur numérique soit placée à coté de la barre de progression et non dedans comme on le voit dans les applications réelles.

Nous reprenons le même exemple, mais cette fois nous plaçons dans le conteneur hbox qui aligne le progressmeter et le texte horizontalement un stack qui va les superposer.
Le texte sera placé à gauche par défaut aussi faudra-t'il utiliser l'attribut style de nouveau, pour le positionner au centre.

<stack>
    <progressmeter id="MonPM" width="400" value="0" />	
    <description id="desc" value="0%" style="width:400px; text-align:center; font-weight:bold; margin-top:1px" />
</stack>

Les descripteurs CSS suivants ont été utilisés:
- width: on donne au texte la même largeur que le progressmeter, 400px.
- text-align: valeur center pour le centrer.
- font-weight: bold, donc gras, pour que le nombre se voie mieux.
- margin-top: un pixel pour recentrer verticalement.

• Démo: code.zip