XHTML & CSS : + d'esthétique
Sommaire de la page
Ombrage
Coins arrondis
Nota : des balises comme embed pour le son ou propriétés (transparence sur des images, voir ici) sont bloquées par IE de part le niveau de sécurité. Ce bloquage ne serait qu'en travail en local, le code étant sur le poste, une fois déposé sur un serveur, IE ne pose plus la question. A vérifier...
Ombrage
Il s'agit de créer une ombre. Le principe est très simple.
On crée 2 boites identiques, mais de couleurs différentes. L'une des 2, au choix, servira d'ombre. Pour cela elle doit être cachée derrière la 1ère, en débordant un peu vers le bas et la droite.
Dans le code HTML, la boite d'ombrage doit encadrer la boite principale. (Ne marche pas dans Netscape 4).
Code css
.ombre { /* boite d'arrière plan dont le débordement crée l'ombrage */
width: 200px; /* largeur de la boite, en pixels */
height: 50px; /* hauteur de la boite, en pixels */
background-color: #cccccc;} /* couleur de la boite, donc de l'ombre */
.boite { /* boite principale */
width: 200px; /* largeur de la boite, en pixels */
height: 50px; /* hauteur de la boite, en pixels */
background-color: white; /* couleur de la boite */
border: solid 2px #cccccc; /* style de la bordure de la boite */
position: relative; /* indique un décalage par rapport à la position normale */
top: -5px; /* décalage de 7 pixels vers le haut */
left: -5px;} /* décalage de 7 pixels vers la gauche */
Code html
<div class="ombre"> <!-- début boite d'ombrage -->
<div class="boite"><strong>Exemple</strong></div> <!-- boite blanche vide -->
</div> <!-- fin boite d'ombrage -->
Coins arrondis