Si vous n'avez pas encore consulté la page permettant d'utiliser la balise <div>, je vous invite à le faire maintenant. De plus, vous pouvez consulter aussi la page relative à l'insertion des feuilles de style.
Les noms utilisés ci-après (dmenu, dtitre et dcontenu) font référence aux noms donnés pour chacune des zones de l'écran.
La position sera définie de manière absolue par rapport au coin supérieur gauche. Le bord supérieur de la zone sera placé à 110 pixels du haut, la taille sera de 05 pixels. Les marges et le 'padding' seront réglés à 0. Pour la bordure, elle sera de couleur rouge et avec des pointillés.
#dmenu{position : absolute;
top : 110px;
left : 3px;
width : 205px;
padding : 0px;
margin : 0px;
border-color : red;
border-style : solid dotted;
}
Pour la zone de titre, il est possible d'y insérer un bandeau image.
#dtitre{background-image : url(Titre2007d.gif);
position : absolute;
top : 0px;
left : 0px;
width : 100%;
height : 100px;
padding : 3px;
margin : 0px;
}
Il est possible de régler la hauteur et la largeur de la zone en pourcentage. Cette démarche permet de garder le menu toujours visible même lorsque la page de contenu a une longueur supérieure à la hauteur de l'écran. Par contre, il ne faut pas oublier de rajouter l'ascenseur pour cette zone (overflow : auto;).
#dcontenu{position : absolute;
top : 110px;
left : 210px;
width : 78%;
height : 80%;
padding : 0px 0px 0px 5px;
margin : 0px;
overflow : auto;
border-color : green;
border-style : solid;
}