Etape n°2


On définit body
/*on précise la couleur du fond*/
    /*puis du texte*/
    /*taille des caractères variable, polices*/
    /*pas de marge*/
body{
background-color:#C9DDE4;
color:#0A00B0;
font:1em "times new roman",Geneva,Arial,Helvetica,sans-serif;
margin:0;
padding:0;
}
On définit content, partie contenu.
/*# car #content n'est utilisé qu'une fois*/
    /*couleur du fond*/
    /*bordure noire*/
    /*marges margin:30px 10px 10px 155px;*/
    /*marge en haut fixe*/
    /*marge à droite fixe*/
    /*marge en bas*/
    /*marge à gauche pour laisser la place au menu de taille fixe*/
    /*distances entre la bordure et le texte ou le contenu*/
#content{
background:#E9F5FE;
border:1px solid #000;
margin-top:30px;
margin-right:10px;
margin-bottom:10px;
margin-left:155px;
padding:10px 5px 8px;
}
On définit menugauche
/*hauteur variable en fonction de la taille du texte*/
    /*en cas de dépassement (plus de 155px) cacher le texte*/
    /*position du menu à 90px du haut à gauche*/
    /*largeur du menu fixe*/
    /*placement au dessus d'un z-index inférieur*/
#menugauche{
background-color:transparent;
font-family:"times new roman",Arial,Tahoma,Helvetica,sans-serif;
height:35em;
overflow:hidden;
position:absolute;
top:90px;
left:0;
width:155px;
z-index:10;
padding:0;
}
L'ensemble commence à prendre forme.

Nestcape 4 commence à poser problème.


Un titre pour un tableau avec trois colonnes

Gauche

Centre

Droite

Le texte disparaît

s'il dépasse

les possibilités de l'écran

afin de conserver

l'alignement.

 

 

 

 

Un titre pour un tableau avec deux colonnes

Colonne de gauche large

colonne étroite

texte centré

caractères gras

 

 

Une colonne à gauche occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Une colonne à droite occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.

Passons à l'étape 3.