Choix des marges et de la taille de police des blocs

Vous remarquez que les blocs div placés l'un à coté de l'autre, ne sont pas espacés. Pour améliorer leur disposition, on utilise les propriètés padding et margin. Vous souhaitez peut être réduire la taille de police qui est un peu grande. Voici alors les modifications à apporter pour le style de la balise div:

 
div {
  padding:2px;
  margin:2px;
  font-size:medium;

}
 

Donc, on a choisi pour tous les blocs <div>, 2 pixels pour les marges internes et 2 pixels pour les marges externes. Les blocs seront bien espacés et leur contenu bien décalé du contour. Pour la taille du texte, une taille moyenne (medium) est choisie.

Même opération pour vérifier l'influence du nouveau code: Sauvegarder et RAFRAICHISSEZ l'écran de votre navigateur!

Mais où est passé le bloc droit. Eh bien, en rajoutant 2 pixels pour le padding, la largeur du conteneur de 800 px ne suffit plus pour tenir en largeur les trois blocs gauche, centre et droit . Le bloc de droite passe, par conséquent, en dessous à gauche.

Pour corriger, modifiez les largeurs des blocs:

Avant cela, remarquez en plus l'affichage lorsque vous cliquez sur le lien "Nous contacter" dans le "Menu Principal"

Les nouvelles valeurs des largeurs de blocs vont corriger tout cela:

 
#conteneur {
  width: 765px;
}
 
#haut {
  width: 755px;
}
 
#gauche{

  width: 155px ;
}
 
#centre {
  width: 430px ;
}
 
#droit {
  width: 155px ;
}
 
#bas {

  width: 760px ;
}
 

Vous remarquez qu'on a profité pour donner plus d'espace (430 contre 400 px ) au corps de la page (le bloc centre).

Sauvegarder et RAFRAICHISSEZ! Voici le résultat avec la résoution 800*600 pixels:

Remarquez qu'il n y'a plus d'ascenseur horizontal. C'est ce que nous désirons.

Revenez à la résolution 1024*768 pour continuer.

Pour compléter l'ajustement des marges, supprimer l'espace vide en haut avant le bloc #conteneur (rappelez vous bien du schéma que vous avez dressé au départ, le bloc #conteneur est le bloc qui contient tous les autres blocs.)

Pour supprimer cet espace, modifier la proprièté margin du bloc #conteneur comme suit:

 
#conteneur {
  margin:-14px auto;
}
 

Une valeur négative de -14 px permet de translater la page vers le haut. Ce qui supprime l'espace vide non désiré.

Sauvegarder et RAFRAICHISSEZ!

A la page suivante, vous allez vous servir de la barre d'outils : "IE Developper Toolbar" pour repérer facilement les éléments à paramétrer dans votre fichier css.