Etape n°3


On arrange le menu :
     /*j'enlève les puces de la liste*/
#menugauche ul{
list-style:none;
margin:0;
padding:0;
}
#menugauche ul li.none{
border:0;
line-height:1em;
}
     /*traits de séparation*/
#menugauche li{
margin-top:0;
border-bottom:1px solid #90BADE;
border-top:1px solid #90BADE;
margin-bottom:-1px;
}
     /*changer couleur du fond*/
     /*et couleur du texte*/
     /*gras et pas de soulignement*/
     /*bordures à gauche et à droite plus claires*/
     /*afficher toute la largeur*/
     /*espace fixe entre les lignes*/
     /*texte décalé à droite*/
     /*rattrapage bordures*/
#menugauche li a{
background-color:#D2E1FB;
color:#0A00B0;
text-decoration:none;
font-weight:800;
border-left:6px solid #E9F5FE;
border-right:6px solid #E9F5FE;
display:block;
width:135px;
padding-bottom:5px;
padding-top:4px;
padding-left:5px;
padding-right:3px;
}
On marque les différentes parties de la page :
     /*on ajoute une bordure*/
     /*si le texte déborde du cadre, on cache le texte*/
.box0,.box3,.box4,.box5{
border:medium double #FAAAFF;
overflow:hidden;
margin-left:10px;
margin-right:10px;
padding:5px 15px;
width:92%;/*ie 6 bug*/
}
     /*je ne souhaite pas de bordure en bas*/
.box3{
border-bottom:none;
}
     /*il me faut une bordure différente*/
.box4{
border-top-style:dotted;
border-top-width:thin;
}
.box5{
border-bottom:none;
border-top-style:dotted;
border-top-width:thin;
}
Pour améliorer la présentation, on ajoute
/*présentation*/
pre{
border:2px inset #C7C7C5;/bug avec nn4*/
padding-bottom:10px;
padding-left:10px;
padding-top:10px;
width:87%;
}
/*pas très utile car remplaçable par "c b" sauf avec nn4*/
.cb{
font-weight:800;
text-align:center;
}
/**/
.c{
text-align:center;
}
.b{
font-weight:800;
}
.r{
text-align:right;
}
h1{
color:#6600CC;
font-family:"Courier New",Courier,monospace,sans-serif;
font-weight:800;
font-size:2em;
margin-left:20px;
text-align:center;
}
/**/
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 4.