Comment modifier l'aspect de l'ascenseur ?

Afin de ponctuer la fantaisie d'une page (il n'y a pas que des sites sérieux, heureusement !), ce gadget peut être intéressant pour certains "webmestres". D'autres peuvent ne pas apprécier ... chacun ses goûts ... et ses couleurs.

Vous voyez l'effet produit dans cette page : un ascenseur inhabituel.

Cela vous plaît ? Bien : nous allons donc voir comment réaliser cet effet. Afin de vous familiariser à l'écriture d'une feuille de style complète, je vous livre la totalité des règles utilisées pour l'affichage de cette page. Passons à celles-ci :

<style type="text/css"><!--

body {
background-image:url(../valimage/astufond.jpg);
scrollbar-face-color: red;
scrollbar-shadow-color: white;
scrollbar-highlight-color: yellow;
scrollbar-3dlight-color: lime;
scrollbar-darkshadow-color: gray;
scrollbar-track-color: black;
}

h2 {color:blue}

p {color:black;
font-family:Arial,Verdana;
font-size:14px}

b {color:red}

div.encadre{
width:760px;
height:800px;
background-color:lightyellow;
margin-left:auto;
margin-right:auto;}

div.gauche {background-color:lightyellow;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:left;
width:330px;
height:auto;
float:left;
border:10px solid lightyellow}

div.droite {background-color:lightyellow;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:left;
width:390px;
height:auto;
float:right;
border:10px solid lightyellow}

//--></style>
- balise d'ouverture de la feuille de style

- sélecteur du corps de la page
- propriété/valeur du fond de page
- propriété/valeur de couleur d'ascenseur
- propriété/valeur biseau inférieur/droit
- propriété/valeur de bord gauche ascenseur
- propriété/valeur biseau supérieur/gauche
- propriété/valeur ombre droite/inférieure
- propriété/valeur du fond de l'ascenseur
- fermeture de la règle

- sélecteur/propriété/valeur du titre de la page

- sélecteur/propriété/valeur du texte balisé en <P>
- idem
- idem

- sélecteur/propriété/valeur du texte balisé en <B>

- déclaration de sélecteur/classe du calque principal
- valeur de largeur
- valeur de hauteur
- valeur de couleur de fond
- valeur de marge gauche (non interpreté par IE)
- valeur de marge droite (non interpreté par IE)

- déclaration sélecteur/classe/couleur du calque gauche
- valeur de couleur du texte intégré
- valeur de police du texte intégré
- valeur de taille du texte intégré
- valeur d'alignement du texte
- valeur de largeur du calque
- valeur de hauteur (automatique dans ce cas)
- valeur d'alignement du calque
- valeur de bordure largeur/couleur du calque

- déclaration sélecteur/classe/couleur du calque droit
- valeur de couleur du texte intégré
- valeur de police du texte intégré
- valeur de taille du texte intégré
- valeur d'alignement du texte
- valeur de largeur du calque
- valeur de hauteur (automatique dans ce cas)
- valeur d'alignement du calque
- valeur de bordure largeur/couleur du calque

- fermeture de balise de la feuille de style

Attention : la présence d'une règle déterminant la valeur de bordure largeur/couleur des calques gauche et droit est destinée à souligner la possibilité d'intégration de celle-ci. Logiquement et pour être utile, elle devrait être visible en lui octroyant une couleur différente. S'il s'agit tout simplement de pratiquer une marge interne pour éviter que le texte "colle" aux bords des calques, la propriété à définir est alors exprimée par un padding:unité de mesure réglé ici à 10 pixels. Attention (bis) : le nombre et l'unité de mesure doivent impérativement être collés : 10px et non 10 px !

Aux dernières nouvelles, seul Internet Explorer en version 5.5 et supérieures interprétent ces propriétés et valeurs destinées aux ascenseurs exotiques ... Netscape les ignore superbement (on s'en doutait) et Mozilla 0.9.4 (la dernière version essayée pour l'écriture de cet exposé) n'en veut pas, lui non plus. Tant pis : seuls les adeptes du premier navigateur cité pourront en profiter.

CSS