Menu à plusieurs niveaux Menu à onglet Menu verticale simple Menu verticale avec calque Menu vertical trois niveaux Le corps.
Le corps.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Le corps | Nous allons créer un nouveau conteneur (div class="corps") qui... |
Le corps de la page.
En présumant que vous suivez le tutoriel depuis le début, nous sommes rendus à l'étape ou il faut insérer le conteneur principal de votre page, le corps. Ce que nous appelons le corps est l'endroit où vous insérerez votre texte, vos images, vos vidéos etc.
Nous allons créer un nouveau conteneur, <div id="corps">. Ce conteneur pourra recevoir ses propres propriétés CSS comme le choix de la police, sa taille, son alignement, etc. Si aucune propriété CSS n'est ajouter, ce seront les paramètres de <body>, le conteneur parent*, qui seront prisent en compte.
*Pour plus d'information sur les conteneurs parent lisez la rubrique « Ancêtre, Parents, Enfants, Frères ».
Ici nous employons le nom de corps pour être bien compris, mais la plupart des concepteurs utiliseront <div id="content">. À vrais dire le nom du conteneur n'a que peu d'importance. L'important est que vous vous comprenez bien.
Dans le XHTML.
Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
|
<!-- Espace réservé au corps -->
<div id="corps">
<!-- Le texte, les images, les vidéos seront insérés à partir d'ici. -->
</div>
|
Dans le CSS.
Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
8
9
10
11
12
|
<!-- Espace réservé au corps -->
#corps{
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
width:600px
min-height:800px;
text-align:justify;
float:left; /* float:left si le menu est à gauche ou "float:right" si le menu est à droite */
margin:0;
padding:0 20px;
border:1px solid #000
}
|
Il y a une bordure (ligne 11) qui peut être supprimé. Elle vous aide à déterminer l'espace allouer au corps. Je vous suggère toujours de créer une bordure pour tous vos conteneurs de façon à bien les positionnés. Vous pourrez les supprimer par la suite si vous le désirez.
Bref, le corps à 600 pixels de large (ligne 5) car je présume que vous avez un menu à gauche. Le conteneur <div id="corps"> est flottant à droite (ligne 8) du menu de gauche. Si votre menu est à droite, il faut changer float:left; par float:right; puis ajuster la largeur jusqu'à ce qu'il soit bien ajusté à l'espace disponible.
Pour une question de symétrie, il faut que margin (ligne 9) et padding (ligne 10) ait les mêmes valeurs que votre menu. Si les marges du menu ont margin:10px (10 pixels de chaque côté), changer margin:0 par margin:10px. Faites de même pour padding.
Ajouter ce site à vos favoris
